From cfd79c8d3690fbc2188cb2dd12d54ed64bc57edc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Epu=C3=B1an?= <juanbrujo@gmail.com>
Date: Thu, 30 Oct 2014 11:40:51 -0300
Subject: [PATCH 1/8] GruntJS integration

new build through GruntJS
---
 .gitignore              |    2 +
 Gruntfile.js            |   47 ++
 Makefile                |   23 -
 build/cssplot.base.css  |   78 +--
 build/cssplot.full.css  | 1290 +--------------------------------------
 build/cssplot.group.css |   33 +-
 demo.html               |  153 +++++
 package.json            |   19 +
 8 files changed, 224 insertions(+), 1421 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 Gruntfile.js
 delete mode 100644 Makefile
 create mode 100644 demo.html
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..28f1ba7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.DS_Store
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..27bd1c1
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,47 @@
+/*
+*
+* cssplot
+* Simple, css-only plotting
+* https://github.com/asciimoo/cssplot
+* demo: http://asciimoo.github.io/cssplot/
+*
+*/
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    less: {
+      dist: {
+        options: {
+            compress: true
+        },
+        files: {
+            'build/cssplot.base.css': 'src/cssplot.base.less',
+            'build/cssplot.full.css': 'src/cssplot.full.less',
+            'build/cssplot.group.css': 'src/cssplot.group.less'
+        }
+      } 
+    },
+    watch: {
+      options: {
+        livereload: true
+      },
+      css: {
+        files: ['src/less/*.less'],
+        tasks: ['newer:less'],
+        options: {
+          spawn: false
+        }
+      },
+      html: {
+        files: ['*.html'],
+        options: {
+            livereload: true
+        }
+      }
+    }
+  });
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-newer');
+  grunt.registerTask('default', ['newer:less','watch']);
+};
\ No newline at end of file
diff --git a/Makefile b/Makefile
deleted file mode 100644
index 36d31a2..0000000
--- a/Makefile
+++ /dev/null
@@ -1,23 +0,0 @@
-
-all: prepare base full group
-
-prepare: clean
-	@mkdir build/
-	@echo "[!] build/ directory created"
-
-base:
-	@lessc src/cssplot.base.less > build/cssplot.base.css
-	@echo "[!] cssplot.base.css generated"
-
-full:
-	@lessc src/cssplot.full.less > build/cssplot.full.css
-	@echo "[!] cssplot.full.css generated"
-
-group:
-	@lessc src/cssplot.group.less > build/cssplot.group.css
-	@echo "[!] cssplot.group.css generated"
-
-clean:
-	@rm -rf build/
-
-.PHONY: all prepare base full clean
diff --git a/build/cssplot.base.css b/build/cssplot.base.css
index d81cb27..e3e99c8 100644
--- a/build/cssplot.base.css
+++ b/build/cssplot.base.css
@@ -1,77 +1 @@
-.bar-chart,
-.vertical-chart,
-.scatter-plot {
-  position: relative;
-  min-width: 100px;
-  min-height: 100px;
-  padding: 0;
-  margin: 0;
-}
-.bar-chart .plot-container {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  position: absolute;
-  text-align: center;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  padding: 0;
-  margin: 0;
-  min-height: 100px;
-}
-.bar-chart .chart-column,
-.bar-chart [data-cp-size] {
-  -webkit-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-align-self: flex-end;
-  align-self: flex-end;
-}
-.bar-chart .chart-column,
-.vertical-chart .chart-row,
-.bar-chart [data-cp-size],
-.vertical-chart [data-cp-size] {
-  background: #3498db;
-  color: #ffffff;
-  list-style: none;
-  border: 1px solid #ffffff;
-  box-sizing: border-box;
-}
-.vertical-chart {
-  clear: both;
-}
-.vertical-chart .plot-container {
-  flex-direction: row;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-.vertical-chart .chart-row,
-.vertical-chart [data-cp-size] {
-  min-height: 1px;
-}
-.scatter-plot .plot-container {
-  position: absolute;
-  top: 12px;
-  left: 0;
-  right: 12px;
-  bottom: 0;
-  margin: 0;
-  padding: 0;
-}
-.scatter-plot .chart-dot,
-.scatter-plot .chart-dot,
-.scatter-plot [data-cp-x],
-.scatter-plot [data-cp-y] {
-  position: absolute;
-  height: 0;
-  width: 0;
-  list-style: none;
-  overflow: hidden;
-  border: 6px solid #3498db;
-  border-radius: 100%;
-}
+.bar-chart,.vertical-chart,.scatter-plot{position:relative;min-width:100px;min-height:100px;padding:0;margin:0}.bar-chart .plot-container{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;text-align:center;top:0;left:0;bottom:0;right:0;padding:0;margin:0;min-height:100px}.bar-chart .chart-column,.bar-chart [data-cp-size]{-webkit-flex-grow:1;flex-grow:1;-webkit-align-self:flex-end;align-self:flex-end}.bar-chart .chart-column,.vertical-chart .chart-row,.bar-chart [data-cp-size],.vertical-chart [data-cp-size]{background:#3498db;color:#fff;list-style:none;border:1px solid #fff;box-sizing:border-box}.vertical-chart{clear:both}.vertical-chart .plot-container{flex-direction:row;padding:0;margin:0;width:100%}.vertical-chart .chart-row,.vertical-chart [data-cp-size]{min-height:1px}.scatter-plot .plot-container{position:absolute;top:12px;left:0;right:12px;bottom:0;margin:0;padding:0}.scatter-plot .chart-dot,.scatter-plot .chart-dot,.scatter-plot [data-cp-x],.scatter-plot [data-cp-y]{position:absolute;height:0;width:0;list-style:none;overflow:hidden;border:6px solid #3498db;border-radius:100%}
\ No newline at end of file
diff --git a/build/cssplot.full.css b/build/cssplot.full.css
index 97a6856..2a21493 100644
--- a/build/cssplot.full.css
+++ b/build/cssplot.full.css
@@ -1,1289 +1 @@
-.bar-chart,
-.vertical-chart,
-.scatter-plot {
-  position: relative;
-  min-width: 100px;
-  min-height: 100px;
-  padding: 0;
-  margin: 0;
-}
-.bar-chart .plot-container {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  position: absolute;
-  text-align: center;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  padding: 0;
-  margin: 0;
-  min-height: 100px;
-}
-.bar-chart .chart-column,
-.bar-chart [data-cp-size] {
-  -webkit-flex-grow: 1;
-  flex-grow: 1;
-  -webkit-align-self: flex-end;
-  align-self: flex-end;
-}
-.bar-chart .chart-column,
-.vertical-chart .chart-row,
-.bar-chart [data-cp-size],
-.vertical-chart [data-cp-size] {
-  background: #3498db;
-  color: #ffffff;
-  list-style: none;
-  border: 1px solid #ffffff;
-  box-sizing: border-box;
-}
-.vertical-chart {
-  clear: both;
-}
-.vertical-chart .plot-container {
-  flex-direction: row;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-.vertical-chart .chart-row,
-.vertical-chart [data-cp-size] {
-  min-height: 1px;
-}
-.scatter-plot .plot-container {
-  position: absolute;
-  top: 12px;
-  left: 0;
-  right: 12px;
-  bottom: 0;
-  margin: 0;
-  padding: 0;
-}
-.scatter-plot .chart-dot,
-.scatter-plot .chart-dot,
-.scatter-plot [data-cp-x],
-.scatter-plot [data-cp-y] {
-  position: absolute;
-  height: 0;
-  width: 0;
-  list-style: none;
-  overflow: hidden;
-  border: 6px solid #3498db;
-  border-radius: 100%;
-}
-.bar-chart .plot-container [data-cp-size="0"] {
-  height: 0%;
-}
-.bar-chart .plot-container [data-cp-size="1"] {
-  height: 1%;
-}
-.bar-chart .plot-container [data-cp-size="2"] {
-  height: 2%;
-}
-.bar-chart .plot-container [data-cp-size="3"] {
-  height: 3%;
-}
-.bar-chart .plot-container [data-cp-size="4"] {
-  height: 4%;
-}
-.bar-chart .plot-container [data-cp-size="5"] {
-  height: 5%;
-}
-.bar-chart .plot-container [data-cp-size="6"] {
-  height: 6%;
-}
-.bar-chart .plot-container [data-cp-size="7"] {
-  height: 7%;
-}
-.bar-chart .plot-container [data-cp-size="8"] {
-  height: 8%;
-}
-.bar-chart .plot-container [data-cp-size="9"] {
-  height: 9%;
-}
-.bar-chart .plot-container [data-cp-size="10"] {
-  height: 10%;
-}
-.bar-chart .plot-container [data-cp-size="11"] {
-  height: 11%;
-}
-.bar-chart .plot-container [data-cp-size="12"] {
-  height: 12%;
-}
-.bar-chart .plot-container [data-cp-size="13"] {
-  height: 13%;
-}
-.bar-chart .plot-container [data-cp-size="14"] {
-  height: 14%;
-}
-.bar-chart .plot-container [data-cp-size="15"] {
-  height: 15%;
-}
-.bar-chart .plot-container [data-cp-size="16"] {
-  height: 16%;
-}
-.bar-chart .plot-container [data-cp-size="17"] {
-  height: 17%;
-}
-.bar-chart .plot-container [data-cp-size="18"] {
-  height: 18%;
-}
-.bar-chart .plot-container [data-cp-size="19"] {
-  height: 19%;
-}
-.bar-chart .plot-container [data-cp-size="20"] {
-  height: 20%;
-}
-.bar-chart .plot-container [data-cp-size="21"] {
-  height: 21%;
-}
-.bar-chart .plot-container [data-cp-size="22"] {
-  height: 22%;
-}
-.bar-chart .plot-container [data-cp-size="23"] {
-  height: 23%;
-}
-.bar-chart .plot-container [data-cp-size="24"] {
-  height: 24%;
-}
-.bar-chart .plot-container [data-cp-size="25"] {
-  height: 25%;
-}
-.bar-chart .plot-container [data-cp-size="26"] {
-  height: 26%;
-}
-.bar-chart .plot-container [data-cp-size="27"] {
-  height: 27%;
-}
-.bar-chart .plot-container [data-cp-size="28"] {
-  height: 28%;
-}
-.bar-chart .plot-container [data-cp-size="29"] {
-  height: 29%;
-}
-.bar-chart .plot-container [data-cp-size="30"] {
-  height: 30%;
-}
-.bar-chart .plot-container [data-cp-size="31"] {
-  height: 31%;
-}
-.bar-chart .plot-container [data-cp-size="32"] {
-  height: 32%;
-}
-.bar-chart .plot-container [data-cp-size="33"] {
-  height: 33%;
-}
-.bar-chart .plot-container [data-cp-size="34"] {
-  height: 34%;
-}
-.bar-chart .plot-container [data-cp-size="35"] {
-  height: 35%;
-}
-.bar-chart .plot-container [data-cp-size="36"] {
-  height: 36%;
-}
-.bar-chart .plot-container [data-cp-size="37"] {
-  height: 37%;
-}
-.bar-chart .plot-container [data-cp-size="38"] {
-  height: 38%;
-}
-.bar-chart .plot-container [data-cp-size="39"] {
-  height: 39%;
-}
-.bar-chart .plot-container [data-cp-size="40"] {
-  height: 40%;
-}
-.bar-chart .plot-container [data-cp-size="41"] {
-  height: 41%;
-}
-.bar-chart .plot-container [data-cp-size="42"] {
-  height: 42%;
-}
-.bar-chart .plot-container [data-cp-size="43"] {
-  height: 43%;
-}
-.bar-chart .plot-container [data-cp-size="44"] {
-  height: 44%;
-}
-.bar-chart .plot-container [data-cp-size="45"] {
-  height: 45%;
-}
-.bar-chart .plot-container [data-cp-size="46"] {
-  height: 46%;
-}
-.bar-chart .plot-container [data-cp-size="47"] {
-  height: 47%;
-}
-.bar-chart .plot-container [data-cp-size="48"] {
-  height: 48%;
-}
-.bar-chart .plot-container [data-cp-size="49"] {
-  height: 49%;
-}
-.bar-chart .plot-container [data-cp-size="50"] {
-  height: 50%;
-}
-.bar-chart .plot-container [data-cp-size="51"] {
-  height: 51%;
-}
-.bar-chart .plot-container [data-cp-size="52"] {
-  height: 52%;
-}
-.bar-chart .plot-container [data-cp-size="53"] {
-  height: 53%;
-}
-.bar-chart .plot-container [data-cp-size="54"] {
-  height: 54%;
-}
-.bar-chart .plot-container [data-cp-size="55"] {
-  height: 55%;
-}
-.bar-chart .plot-container [data-cp-size="56"] {
-  height: 56%;
-}
-.bar-chart .plot-container [data-cp-size="57"] {
-  height: 57%;
-}
-.bar-chart .plot-container [data-cp-size="58"] {
-  height: 58%;
-}
-.bar-chart .plot-container [data-cp-size="59"] {
-  height: 59%;
-}
-.bar-chart .plot-container [data-cp-size="60"] {
-  height: 60%;
-}
-.bar-chart .plot-container [data-cp-size="61"] {
-  height: 61%;
-}
-.bar-chart .plot-container [data-cp-size="62"] {
-  height: 62%;
-}
-.bar-chart .plot-container [data-cp-size="63"] {
-  height: 63%;
-}
-.bar-chart .plot-container [data-cp-size="64"] {
-  height: 64%;
-}
-.bar-chart .plot-container [data-cp-size="65"] {
-  height: 65%;
-}
-.bar-chart .plot-container [data-cp-size="66"] {
-  height: 66%;
-}
-.bar-chart .plot-container [data-cp-size="67"] {
-  height: 67%;
-}
-.bar-chart .plot-container [data-cp-size="68"] {
-  height: 68%;
-}
-.bar-chart .plot-container [data-cp-size="69"] {
-  height: 69%;
-}
-.bar-chart .plot-container [data-cp-size="70"] {
-  height: 70%;
-}
-.bar-chart .plot-container [data-cp-size="71"] {
-  height: 71%;
-}
-.bar-chart .plot-container [data-cp-size="72"] {
-  height: 72%;
-}
-.bar-chart .plot-container [data-cp-size="73"] {
-  height: 73%;
-}
-.bar-chart .plot-container [data-cp-size="74"] {
-  height: 74%;
-}
-.bar-chart .plot-container [data-cp-size="75"] {
-  height: 75%;
-}
-.bar-chart .plot-container [data-cp-size="76"] {
-  height: 76%;
-}
-.bar-chart .plot-container [data-cp-size="77"] {
-  height: 77%;
-}
-.bar-chart .plot-container [data-cp-size="78"] {
-  height: 78%;
-}
-.bar-chart .plot-container [data-cp-size="79"] {
-  height: 79%;
-}
-.bar-chart .plot-container [data-cp-size="80"] {
-  height: 80%;
-}
-.bar-chart .plot-container [data-cp-size="81"] {
-  height: 81%;
-}
-.bar-chart .plot-container [data-cp-size="82"] {
-  height: 82%;
-}
-.bar-chart .plot-container [data-cp-size="83"] {
-  height: 83%;
-}
-.bar-chart .plot-container [data-cp-size="84"] {
-  height: 84%;
-}
-.bar-chart .plot-container [data-cp-size="85"] {
-  height: 85%;
-}
-.bar-chart .plot-container [data-cp-size="86"] {
-  height: 86%;
-}
-.bar-chart .plot-container [data-cp-size="87"] {
-  height: 87%;
-}
-.bar-chart .plot-container [data-cp-size="88"] {
-  height: 88%;
-}
-.bar-chart .plot-container [data-cp-size="89"] {
-  height: 89%;
-}
-.bar-chart .plot-container [data-cp-size="90"] {
-  height: 90%;
-}
-.bar-chart .plot-container [data-cp-size="91"] {
-  height: 91%;
-}
-.bar-chart .plot-container [data-cp-size="92"] {
-  height: 92%;
-}
-.bar-chart .plot-container [data-cp-size="93"] {
-  height: 93%;
-}
-.bar-chart .plot-container [data-cp-size="94"] {
-  height: 94%;
-}
-.bar-chart .plot-container [data-cp-size="95"] {
-  height: 95%;
-}
-.bar-chart .plot-container [data-cp-size="96"] {
-  height: 96%;
-}
-.bar-chart .plot-container [data-cp-size="97"] {
-  height: 97%;
-}
-.bar-chart .plot-container [data-cp-size="98"] {
-  height: 98%;
-}
-.bar-chart .plot-container [data-cp-size="99"] {
-  height: 99%;
-}
-.bar-chart .plot-container [data-cp-size="100"] {
-  height: 100%;
-}
-.vertical-chart .plot-container [data-cp-size="0"] {
-  width: 0%;
-}
-.vertical-chart .plot-container [data-cp-size="1"] {
-  width: 1%;
-}
-.vertical-chart .plot-container [data-cp-size="2"] {
-  width: 2%;
-}
-.vertical-chart .plot-container [data-cp-size="3"] {
-  width: 3%;
-}
-.vertical-chart .plot-container [data-cp-size="4"] {
-  width: 4%;
-}
-.vertical-chart .plot-container [data-cp-size="5"] {
-  width: 5%;
-}
-.vertical-chart .plot-container [data-cp-size="6"] {
-  width: 6%;
-}
-.vertical-chart .plot-container [data-cp-size="7"] {
-  width: 7%;
-}
-.vertical-chart .plot-container [data-cp-size="8"] {
-  width: 8%;
-}
-.vertical-chart .plot-container [data-cp-size="9"] {
-  width: 9%;
-}
-.vertical-chart .plot-container [data-cp-size="10"] {
-  width: 10%;
-}
-.vertical-chart .plot-container [data-cp-size="11"] {
-  width: 11%;
-}
-.vertical-chart .plot-container [data-cp-size="12"] {
-  width: 12%;
-}
-.vertical-chart .plot-container [data-cp-size="13"] {
-  width: 13%;
-}
-.vertical-chart .plot-container [data-cp-size="14"] {
-  width: 14%;
-}
-.vertical-chart .plot-container [data-cp-size="15"] {
-  width: 15%;
-}
-.vertical-chart .plot-container [data-cp-size="16"] {
-  width: 16%;
-}
-.vertical-chart .plot-container [data-cp-size="17"] {
-  width: 17%;
-}
-.vertical-chart .plot-container [data-cp-size="18"] {
-  width: 18%;
-}
-.vertical-chart .plot-container [data-cp-size="19"] {
-  width: 19%;
-}
-.vertical-chart .plot-container [data-cp-size="20"] {
-  width: 20%;
-}
-.vertical-chart .plot-container [data-cp-size="21"] {
-  width: 21%;
-}
-.vertical-chart .plot-container [data-cp-size="22"] {
-  width: 22%;
-}
-.vertical-chart .plot-container [data-cp-size="23"] {
-  width: 23%;
-}
-.vertical-chart .plot-container [data-cp-size="24"] {
-  width: 24%;
-}
-.vertical-chart .plot-container [data-cp-size="25"] {
-  width: 25%;
-}
-.vertical-chart .plot-container [data-cp-size="26"] {
-  width: 26%;
-}
-.vertical-chart .plot-container [data-cp-size="27"] {
-  width: 27%;
-}
-.vertical-chart .plot-container [data-cp-size="28"] {
-  width: 28%;
-}
-.vertical-chart .plot-container [data-cp-size="29"] {
-  width: 29%;
-}
-.vertical-chart .plot-container [data-cp-size="30"] {
-  width: 30%;
-}
-.vertical-chart .plot-container [data-cp-size="31"] {
-  width: 31%;
-}
-.vertical-chart .plot-container [data-cp-size="32"] {
-  width: 32%;
-}
-.vertical-chart .plot-container [data-cp-size="33"] {
-  width: 33%;
-}
-.vertical-chart .plot-container [data-cp-size="34"] {
-  width: 34%;
-}
-.vertical-chart .plot-container [data-cp-size="35"] {
-  width: 35%;
-}
-.vertical-chart .plot-container [data-cp-size="36"] {
-  width: 36%;
-}
-.vertical-chart .plot-container [data-cp-size="37"] {
-  width: 37%;
-}
-.vertical-chart .plot-container [data-cp-size="38"] {
-  width: 38%;
-}
-.vertical-chart .plot-container [data-cp-size="39"] {
-  width: 39%;
-}
-.vertical-chart .plot-container [data-cp-size="40"] {
-  width: 40%;
-}
-.vertical-chart .plot-container [data-cp-size="41"] {
-  width: 41%;
-}
-.vertical-chart .plot-container [data-cp-size="42"] {
-  width: 42%;
-}
-.vertical-chart .plot-container [data-cp-size="43"] {
-  width: 43%;
-}
-.vertical-chart .plot-container [data-cp-size="44"] {
-  width: 44%;
-}
-.vertical-chart .plot-container [data-cp-size="45"] {
-  width: 45%;
-}
-.vertical-chart .plot-container [data-cp-size="46"] {
-  width: 46%;
-}
-.vertical-chart .plot-container [data-cp-size="47"] {
-  width: 47%;
-}
-.vertical-chart .plot-container [data-cp-size="48"] {
-  width: 48%;
-}
-.vertical-chart .plot-container [data-cp-size="49"] {
-  width: 49%;
-}
-.vertical-chart .plot-container [data-cp-size="50"] {
-  width: 50%;
-}
-.vertical-chart .plot-container [data-cp-size="51"] {
-  width: 51%;
-}
-.vertical-chart .plot-container [data-cp-size="52"] {
-  width: 52%;
-}
-.vertical-chart .plot-container [data-cp-size="53"] {
-  width: 53%;
-}
-.vertical-chart .plot-container [data-cp-size="54"] {
-  width: 54%;
-}
-.vertical-chart .plot-container [data-cp-size="55"] {
-  width: 55%;
-}
-.vertical-chart .plot-container [data-cp-size="56"] {
-  width: 56%;
-}
-.vertical-chart .plot-container [data-cp-size="57"] {
-  width: 57%;
-}
-.vertical-chart .plot-container [data-cp-size="58"] {
-  width: 58%;
-}
-.vertical-chart .plot-container [data-cp-size="59"] {
-  width: 59%;
-}
-.vertical-chart .plot-container [data-cp-size="60"] {
-  width: 60%;
-}
-.vertical-chart .plot-container [data-cp-size="61"] {
-  width: 61%;
-}
-.vertical-chart .plot-container [data-cp-size="62"] {
-  width: 62%;
-}
-.vertical-chart .plot-container [data-cp-size="63"] {
-  width: 63%;
-}
-.vertical-chart .plot-container [data-cp-size="64"] {
-  width: 64%;
-}
-.vertical-chart .plot-container [data-cp-size="65"] {
-  width: 65%;
-}
-.vertical-chart .plot-container [data-cp-size="66"] {
-  width: 66%;
-}
-.vertical-chart .plot-container [data-cp-size="67"] {
-  width: 67%;
-}
-.vertical-chart .plot-container [data-cp-size="68"] {
-  width: 68%;
-}
-.vertical-chart .plot-container [data-cp-size="69"] {
-  width: 69%;
-}
-.vertical-chart .plot-container [data-cp-size="70"] {
-  width: 70%;
-}
-.vertical-chart .plot-container [data-cp-size="71"] {
-  width: 71%;
-}
-.vertical-chart .plot-container [data-cp-size="72"] {
-  width: 72%;
-}
-.vertical-chart .plot-container [data-cp-size="73"] {
-  width: 73%;
-}
-.vertical-chart .plot-container [data-cp-size="74"] {
-  width: 74%;
-}
-.vertical-chart .plot-container [data-cp-size="75"] {
-  width: 75%;
-}
-.vertical-chart .plot-container [data-cp-size="76"] {
-  width: 76%;
-}
-.vertical-chart .plot-container [data-cp-size="77"] {
-  width: 77%;
-}
-.vertical-chart .plot-container [data-cp-size="78"] {
-  width: 78%;
-}
-.vertical-chart .plot-container [data-cp-size="79"] {
-  width: 79%;
-}
-.vertical-chart .plot-container [data-cp-size="80"] {
-  width: 80%;
-}
-.vertical-chart .plot-container [data-cp-size="81"] {
-  width: 81%;
-}
-.vertical-chart .plot-container [data-cp-size="82"] {
-  width: 82%;
-}
-.vertical-chart .plot-container [data-cp-size="83"] {
-  width: 83%;
-}
-.vertical-chart .plot-container [data-cp-size="84"] {
-  width: 84%;
-}
-.vertical-chart .plot-container [data-cp-size="85"] {
-  width: 85%;
-}
-.vertical-chart .plot-container [data-cp-size="86"] {
-  width: 86%;
-}
-.vertical-chart .plot-container [data-cp-size="87"] {
-  width: 87%;
-}
-.vertical-chart .plot-container [data-cp-size="88"] {
-  width: 88%;
-}
-.vertical-chart .plot-container [data-cp-size="89"] {
-  width: 89%;
-}
-.vertical-chart .plot-container [data-cp-size="90"] {
-  width: 90%;
-}
-.vertical-chart .plot-container [data-cp-size="91"] {
-  width: 91%;
-}
-.vertical-chart .plot-container [data-cp-size="92"] {
-  width: 92%;
-}
-.vertical-chart .plot-container [data-cp-size="93"] {
-  width: 93%;
-}
-.vertical-chart .plot-container [data-cp-size="94"] {
-  width: 94%;
-}
-.vertical-chart .plot-container [data-cp-size="95"] {
-  width: 95%;
-}
-.vertical-chart .plot-container [data-cp-size="96"] {
-  width: 96%;
-}
-.vertical-chart .plot-container [data-cp-size="97"] {
-  width: 97%;
-}
-.vertical-chart .plot-container [data-cp-size="98"] {
-  width: 98%;
-}
-.vertical-chart .plot-container [data-cp-size="99"] {
-  width: 99%;
-}
-.vertical-chart .plot-container [data-cp-size="100"] {
-  width: 100%;
-}
-.scatter-plot .plot-container [data-cp-x="0"] {
-  left: 0%;
-}
-.scatter-plot .plot-container [data-cp-x="1"] {
-  left: 1%;
-}
-.scatter-plot .plot-container [data-cp-x="2"] {
-  left: 2%;
-}
-.scatter-plot .plot-container [data-cp-x="3"] {
-  left: 3%;
-}
-.scatter-plot .plot-container [data-cp-x="4"] {
-  left: 4%;
-}
-.scatter-plot .plot-container [data-cp-x="5"] {
-  left: 5%;
-}
-.scatter-plot .plot-container [data-cp-x="6"] {
-  left: 6%;
-}
-.scatter-plot .plot-container [data-cp-x="7"] {
-  left: 7%;
-}
-.scatter-plot .plot-container [data-cp-x="8"] {
-  left: 8%;
-}
-.scatter-plot .plot-container [data-cp-x="9"] {
-  left: 9%;
-}
-.scatter-plot .plot-container [data-cp-x="10"] {
-  left: 10%;
-}
-.scatter-plot .plot-container [data-cp-x="11"] {
-  left: 11%;
-}
-.scatter-plot .plot-container [data-cp-x="12"] {
-  left: 12%;
-}
-.scatter-plot .plot-container [data-cp-x="13"] {
-  left: 13%;
-}
-.scatter-plot .plot-container [data-cp-x="14"] {
-  left: 14%;
-}
-.scatter-plot .plot-container [data-cp-x="15"] {
-  left: 15%;
-}
-.scatter-plot .plot-container [data-cp-x="16"] {
-  left: 16%;
-}
-.scatter-plot .plot-container [data-cp-x="17"] {
-  left: 17%;
-}
-.scatter-plot .plot-container [data-cp-x="18"] {
-  left: 18%;
-}
-.scatter-plot .plot-container [data-cp-x="19"] {
-  left: 19%;
-}
-.scatter-plot .plot-container [data-cp-x="20"] {
-  left: 20%;
-}
-.scatter-plot .plot-container [data-cp-x="21"] {
-  left: 21%;
-}
-.scatter-plot .plot-container [data-cp-x="22"] {
-  left: 22%;
-}
-.scatter-plot .plot-container [data-cp-x="23"] {
-  left: 23%;
-}
-.scatter-plot .plot-container [data-cp-x="24"] {
-  left: 24%;
-}
-.scatter-plot .plot-container [data-cp-x="25"] {
-  left: 25%;
-}
-.scatter-plot .plot-container [data-cp-x="26"] {
-  left: 26%;
-}
-.scatter-plot .plot-container [data-cp-x="27"] {
-  left: 27%;
-}
-.scatter-plot .plot-container [data-cp-x="28"] {
-  left: 28%;
-}
-.scatter-plot .plot-container [data-cp-x="29"] {
-  left: 29%;
-}
-.scatter-plot .plot-container [data-cp-x="30"] {
-  left: 30%;
-}
-.scatter-plot .plot-container [data-cp-x="31"] {
-  left: 31%;
-}
-.scatter-plot .plot-container [data-cp-x="32"] {
-  left: 32%;
-}
-.scatter-plot .plot-container [data-cp-x="33"] {
-  left: 33%;
-}
-.scatter-plot .plot-container [data-cp-x="34"] {
-  left: 34%;
-}
-.scatter-plot .plot-container [data-cp-x="35"] {
-  left: 35%;
-}
-.scatter-plot .plot-container [data-cp-x="36"] {
-  left: 36%;
-}
-.scatter-plot .plot-container [data-cp-x="37"] {
-  left: 37%;
-}
-.scatter-plot .plot-container [data-cp-x="38"] {
-  left: 38%;
-}
-.scatter-plot .plot-container [data-cp-x="39"] {
-  left: 39%;
-}
-.scatter-plot .plot-container [data-cp-x="40"] {
-  left: 40%;
-}
-.scatter-plot .plot-container [data-cp-x="41"] {
-  left: 41%;
-}
-.scatter-plot .plot-container [data-cp-x="42"] {
-  left: 42%;
-}
-.scatter-plot .plot-container [data-cp-x="43"] {
-  left: 43%;
-}
-.scatter-plot .plot-container [data-cp-x="44"] {
-  left: 44%;
-}
-.scatter-plot .plot-container [data-cp-x="45"] {
-  left: 45%;
-}
-.scatter-plot .plot-container [data-cp-x="46"] {
-  left: 46%;
-}
-.scatter-plot .plot-container [data-cp-x="47"] {
-  left: 47%;
-}
-.scatter-plot .plot-container [data-cp-x="48"] {
-  left: 48%;
-}
-.scatter-plot .plot-container [data-cp-x="49"] {
-  left: 49%;
-}
-.scatter-plot .plot-container [data-cp-x="50"] {
-  left: 50%;
-}
-.scatter-plot .plot-container [data-cp-x="51"] {
-  left: 51%;
-}
-.scatter-plot .plot-container [data-cp-x="52"] {
-  left: 52%;
-}
-.scatter-plot .plot-container [data-cp-x="53"] {
-  left: 53%;
-}
-.scatter-plot .plot-container [data-cp-x="54"] {
-  left: 54%;
-}
-.scatter-plot .plot-container [data-cp-x="55"] {
-  left: 55%;
-}
-.scatter-plot .plot-container [data-cp-x="56"] {
-  left: 56%;
-}
-.scatter-plot .plot-container [data-cp-x="57"] {
-  left: 57%;
-}
-.scatter-plot .plot-container [data-cp-x="58"] {
-  left: 58%;
-}
-.scatter-plot .plot-container [data-cp-x="59"] {
-  left: 59%;
-}
-.scatter-plot .plot-container [data-cp-x="60"] {
-  left: 60%;
-}
-.scatter-plot .plot-container [data-cp-x="61"] {
-  left: 61%;
-}
-.scatter-plot .plot-container [data-cp-x="62"] {
-  left: 62%;
-}
-.scatter-plot .plot-container [data-cp-x="63"] {
-  left: 63%;
-}
-.scatter-plot .plot-container [data-cp-x="64"] {
-  left: 64%;
-}
-.scatter-plot .plot-container [data-cp-x="65"] {
-  left: 65%;
-}
-.scatter-plot .plot-container [data-cp-x="66"] {
-  left: 66%;
-}
-.scatter-plot .plot-container [data-cp-x="67"] {
-  left: 67%;
-}
-.scatter-plot .plot-container [data-cp-x="68"] {
-  left: 68%;
-}
-.scatter-plot .plot-container [data-cp-x="69"] {
-  left: 69%;
-}
-.scatter-plot .plot-container [data-cp-x="70"] {
-  left: 70%;
-}
-.scatter-plot .plot-container [data-cp-x="71"] {
-  left: 71%;
-}
-.scatter-plot .plot-container [data-cp-x="72"] {
-  left: 72%;
-}
-.scatter-plot .plot-container [data-cp-x="73"] {
-  left: 73%;
-}
-.scatter-plot .plot-container [data-cp-x="74"] {
-  left: 74%;
-}
-.scatter-plot .plot-container [data-cp-x="75"] {
-  left: 75%;
-}
-.scatter-plot .plot-container [data-cp-x="76"] {
-  left: 76%;
-}
-.scatter-plot .plot-container [data-cp-x="77"] {
-  left: 77%;
-}
-.scatter-plot .plot-container [data-cp-x="78"] {
-  left: 78%;
-}
-.scatter-plot .plot-container [data-cp-x="79"] {
-  left: 79%;
-}
-.scatter-plot .plot-container [data-cp-x="80"] {
-  left: 80%;
-}
-.scatter-plot .plot-container [data-cp-x="81"] {
-  left: 81%;
-}
-.scatter-plot .plot-container [data-cp-x="82"] {
-  left: 82%;
-}
-.scatter-plot .plot-container [data-cp-x="83"] {
-  left: 83%;
-}
-.scatter-plot .plot-container [data-cp-x="84"] {
-  left: 84%;
-}
-.scatter-plot .plot-container [data-cp-x="85"] {
-  left: 85%;
-}
-.scatter-plot .plot-container [data-cp-x="86"] {
-  left: 86%;
-}
-.scatter-plot .plot-container [data-cp-x="87"] {
-  left: 87%;
-}
-.scatter-plot .plot-container [data-cp-x="88"] {
-  left: 88%;
-}
-.scatter-plot .plot-container [data-cp-x="89"] {
-  left: 89%;
-}
-.scatter-plot .plot-container [data-cp-x="90"] {
-  left: 90%;
-}
-.scatter-plot .plot-container [data-cp-x="91"] {
-  left: 91%;
-}
-.scatter-plot .plot-container [data-cp-x="92"] {
-  left: 92%;
-}
-.scatter-plot .plot-container [data-cp-x="93"] {
-  left: 93%;
-}
-.scatter-plot .plot-container [data-cp-x="94"] {
-  left: 94%;
-}
-.scatter-plot .plot-container [data-cp-x="95"] {
-  left: 95%;
-}
-.scatter-plot .plot-container [data-cp-x="96"] {
-  left: 96%;
-}
-.scatter-plot .plot-container [data-cp-x="97"] {
-  left: 97%;
-}
-.scatter-plot .plot-container [data-cp-x="98"] {
-  left: 98%;
-}
-.scatter-plot .plot-container [data-cp-x="99"] {
-  left: 99%;
-}
-.scatter-plot .plot-container [data-cp-x="100"] {
-  left: 100%;
-}
-.scatter-plot .plot-container [data-cp-y="0"] {
-  bottom: 0%;
-}
-.scatter-plot .plot-container [data-cp-y="1"] {
-  bottom: 1%;
-}
-.scatter-plot .plot-container [data-cp-y="2"] {
-  bottom: 2%;
-}
-.scatter-plot .plot-container [data-cp-y="3"] {
-  bottom: 3%;
-}
-.scatter-plot .plot-container [data-cp-y="4"] {
-  bottom: 4%;
-}
-.scatter-plot .plot-container [data-cp-y="5"] {
-  bottom: 5%;
-}
-.scatter-plot .plot-container [data-cp-y="6"] {
-  bottom: 6%;
-}
-.scatter-plot .plot-container [data-cp-y="7"] {
-  bottom: 7%;
-}
-.scatter-plot .plot-container [data-cp-y="8"] {
-  bottom: 8%;
-}
-.scatter-plot .plot-container [data-cp-y="9"] {
-  bottom: 9%;
-}
-.scatter-plot .plot-container [data-cp-y="10"] {
-  bottom: 10%;
-}
-.scatter-plot .plot-container [data-cp-y="11"] {
-  bottom: 11%;
-}
-.scatter-plot .plot-container [data-cp-y="12"] {
-  bottom: 12%;
-}
-.scatter-plot .plot-container [data-cp-y="13"] {
-  bottom: 13%;
-}
-.scatter-plot .plot-container [data-cp-y="14"] {
-  bottom: 14%;
-}
-.scatter-plot .plot-container [data-cp-y="15"] {
-  bottom: 15%;
-}
-.scatter-plot .plot-container [data-cp-y="16"] {
-  bottom: 16%;
-}
-.scatter-plot .plot-container [data-cp-y="17"] {
-  bottom: 17%;
-}
-.scatter-plot .plot-container [data-cp-y="18"] {
-  bottom: 18%;
-}
-.scatter-plot .plot-container [data-cp-y="19"] {
-  bottom: 19%;
-}
-.scatter-plot .plot-container [data-cp-y="20"] {
-  bottom: 20%;
-}
-.scatter-plot .plot-container [data-cp-y="21"] {
-  bottom: 21%;
-}
-.scatter-plot .plot-container [data-cp-y="22"] {
-  bottom: 22%;
-}
-.scatter-plot .plot-container [data-cp-y="23"] {
-  bottom: 23%;
-}
-.scatter-plot .plot-container [data-cp-y="24"] {
-  bottom: 24%;
-}
-.scatter-plot .plot-container [data-cp-y="25"] {
-  bottom: 25%;
-}
-.scatter-plot .plot-container [data-cp-y="26"] {
-  bottom: 26%;
-}
-.scatter-plot .plot-container [data-cp-y="27"] {
-  bottom: 27%;
-}
-.scatter-plot .plot-container [data-cp-y="28"] {
-  bottom: 28%;
-}
-.scatter-plot .plot-container [data-cp-y="29"] {
-  bottom: 29%;
-}
-.scatter-plot .plot-container [data-cp-y="30"] {
-  bottom: 30%;
-}
-.scatter-plot .plot-container [data-cp-y="31"] {
-  bottom: 31%;
-}
-.scatter-plot .plot-container [data-cp-y="32"] {
-  bottom: 32%;
-}
-.scatter-plot .plot-container [data-cp-y="33"] {
-  bottom: 33%;
-}
-.scatter-plot .plot-container [data-cp-y="34"] {
-  bottom: 34%;
-}
-.scatter-plot .plot-container [data-cp-y="35"] {
-  bottom: 35%;
-}
-.scatter-plot .plot-container [data-cp-y="36"] {
-  bottom: 36%;
-}
-.scatter-plot .plot-container [data-cp-y="37"] {
-  bottom: 37%;
-}
-.scatter-plot .plot-container [data-cp-y="38"] {
-  bottom: 38%;
-}
-.scatter-plot .plot-container [data-cp-y="39"] {
-  bottom: 39%;
-}
-.scatter-plot .plot-container [data-cp-y="40"] {
-  bottom: 40%;
-}
-.scatter-plot .plot-container [data-cp-y="41"] {
-  bottom: 41%;
-}
-.scatter-plot .plot-container [data-cp-y="42"] {
-  bottom: 42%;
-}
-.scatter-plot .plot-container [data-cp-y="43"] {
-  bottom: 43%;
-}
-.scatter-plot .plot-container [data-cp-y="44"] {
-  bottom: 44%;
-}
-.scatter-plot .plot-container [data-cp-y="45"] {
-  bottom: 45%;
-}
-.scatter-plot .plot-container [data-cp-y="46"] {
-  bottom: 46%;
-}
-.scatter-plot .plot-container [data-cp-y="47"] {
-  bottom: 47%;
-}
-.scatter-plot .plot-container [data-cp-y="48"] {
-  bottom: 48%;
-}
-.scatter-plot .plot-container [data-cp-y="49"] {
-  bottom: 49%;
-}
-.scatter-plot .plot-container [data-cp-y="50"] {
-  bottom: 50%;
-}
-.scatter-plot .plot-container [data-cp-y="51"] {
-  bottom: 51%;
-}
-.scatter-plot .plot-container [data-cp-y="52"] {
-  bottom: 52%;
-}
-.scatter-plot .plot-container [data-cp-y="53"] {
-  bottom: 53%;
-}
-.scatter-plot .plot-container [data-cp-y="54"] {
-  bottom: 54%;
-}
-.scatter-plot .plot-container [data-cp-y="55"] {
-  bottom: 55%;
-}
-.scatter-plot .plot-container [data-cp-y="56"] {
-  bottom: 56%;
-}
-.scatter-plot .plot-container [data-cp-y="57"] {
-  bottom: 57%;
-}
-.scatter-plot .plot-container [data-cp-y="58"] {
-  bottom: 58%;
-}
-.scatter-plot .plot-container [data-cp-y="59"] {
-  bottom: 59%;
-}
-.scatter-plot .plot-container [data-cp-y="60"] {
-  bottom: 60%;
-}
-.scatter-plot .plot-container [data-cp-y="61"] {
-  bottom: 61%;
-}
-.scatter-plot .plot-container [data-cp-y="62"] {
-  bottom: 62%;
-}
-.scatter-plot .plot-container [data-cp-y="63"] {
-  bottom: 63%;
-}
-.scatter-plot .plot-container [data-cp-y="64"] {
-  bottom: 64%;
-}
-.scatter-plot .plot-container [data-cp-y="65"] {
-  bottom: 65%;
-}
-.scatter-plot .plot-container [data-cp-y="66"] {
-  bottom: 66%;
-}
-.scatter-plot .plot-container [data-cp-y="67"] {
-  bottom: 67%;
-}
-.scatter-plot .plot-container [data-cp-y="68"] {
-  bottom: 68%;
-}
-.scatter-plot .plot-container [data-cp-y="69"] {
-  bottom: 69%;
-}
-.scatter-plot .plot-container [data-cp-y="70"] {
-  bottom: 70%;
-}
-.scatter-plot .plot-container [data-cp-y="71"] {
-  bottom: 71%;
-}
-.scatter-plot .plot-container [data-cp-y="72"] {
-  bottom: 72%;
-}
-.scatter-plot .plot-container [data-cp-y="73"] {
-  bottom: 73%;
-}
-.scatter-plot .plot-container [data-cp-y="74"] {
-  bottom: 74%;
-}
-.scatter-plot .plot-container [data-cp-y="75"] {
-  bottom: 75%;
-}
-.scatter-plot .plot-container [data-cp-y="76"] {
-  bottom: 76%;
-}
-.scatter-plot .plot-container [data-cp-y="77"] {
-  bottom: 77%;
-}
-.scatter-plot .plot-container [data-cp-y="78"] {
-  bottom: 78%;
-}
-.scatter-plot .plot-container [data-cp-y="79"] {
-  bottom: 79%;
-}
-.scatter-plot .plot-container [data-cp-y="80"] {
-  bottom: 80%;
-}
-.scatter-plot .plot-container [data-cp-y="81"] {
-  bottom: 81%;
-}
-.scatter-plot .plot-container [data-cp-y="82"] {
-  bottom: 82%;
-}
-.scatter-plot .plot-container [data-cp-y="83"] {
-  bottom: 83%;
-}
-.scatter-plot .plot-container [data-cp-y="84"] {
-  bottom: 84%;
-}
-.scatter-plot .plot-container [data-cp-y="85"] {
-  bottom: 85%;
-}
-.scatter-plot .plot-container [data-cp-y="86"] {
-  bottom: 86%;
-}
-.scatter-plot .plot-container [data-cp-y="87"] {
-  bottom: 87%;
-}
-.scatter-plot .plot-container [data-cp-y="88"] {
-  bottom: 88%;
-}
-.scatter-plot .plot-container [data-cp-y="89"] {
-  bottom: 89%;
-}
-.scatter-plot .plot-container [data-cp-y="90"] {
-  bottom: 90%;
-}
-.scatter-plot .plot-container [data-cp-y="91"] {
-  bottom: 91%;
-}
-.scatter-plot .plot-container [data-cp-y="92"] {
-  bottom: 92%;
-}
-.scatter-plot .plot-container [data-cp-y="93"] {
-  bottom: 93%;
-}
-.scatter-plot .plot-container [data-cp-y="94"] {
-  bottom: 94%;
-}
-.scatter-plot .plot-container [data-cp-y="95"] {
-  bottom: 95%;
-}
-.scatter-plot .plot-container [data-cp-y="96"] {
-  bottom: 96%;
-}
-.scatter-plot .plot-container [data-cp-y="97"] {
-  bottom: 97%;
-}
-.scatter-plot .plot-container [data-cp-y="98"] {
-  bottom: 98%;
-}
-.scatter-plot .plot-container [data-cp-y="99"] {
-  bottom: 99%;
-}
-.scatter-plot .plot-container [data-cp-y="100"] {
-  bottom: 100%;
-}
+.bar-chart,.vertical-chart,.scatter-plot{position:relative;min-width:100px;min-height:100px;padding:0;margin:0}.bar-chart .plot-container{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;text-align:center;top:0;left:0;bottom:0;right:0;padding:0;margin:0;min-height:100px}.bar-chart .chart-column,.bar-chart [data-cp-size]{-webkit-flex-grow:1;flex-grow:1;-webkit-align-self:flex-end;align-self:flex-end}.bar-chart .chart-column,.vertical-chart .chart-row,.bar-chart [data-cp-size],.vertical-chart [data-cp-size]{background:#3498db;color:#fff;list-style:none;border:1px solid #fff;box-sizing:border-box}.vertical-chart{clear:both}.vertical-chart .plot-container{flex-direction:row;padding:0;margin:0;width:100%}.vertical-chart .chart-row,.vertical-chart [data-cp-size]{min-height:1px}.scatter-plot .plot-container{position:absolute;top:12px;left:0;right:12px;bottom:0;margin:0;padding:0}.scatter-plot .chart-dot,.scatter-plot .chart-dot,.scatter-plot [data-cp-x],.scatter-plot [data-cp-y]{position:absolute;height:0;width:0;list-style:none;overflow:hidden;border:6px solid #3498db;border-radius:100%}.bar-chart .plot-container [data-cp-size="0"]{height:0%}.bar-chart .plot-container [data-cp-size="1"]{height:1%}.bar-chart .plot-container [data-cp-size="2"]{height:2%}.bar-chart .plot-container [data-cp-size="3"]{height:3%}.bar-chart .plot-container [data-cp-size="4"]{height:4%}.bar-chart .plot-container [data-cp-size="5"]{height:5%}.bar-chart .plot-container [data-cp-size="6"]{height:6%}.bar-chart .plot-container [data-cp-size="7"]{height:7%}.bar-chart .plot-container [data-cp-size="8"]{height:8%}.bar-chart .plot-container [data-cp-size="9"]{height:9%}.bar-chart .plot-container [data-cp-size="10"]{height:10%}.bar-chart .plot-container [data-cp-size="11"]{height:11%}.bar-chart .plot-container [data-cp-size="12"]{height:12%}.bar-chart .plot-container [data-cp-size="13"]{height:13%}.bar-chart .plot-container [data-cp-size="14"]{height:14%}.bar-chart .plot-container [data-cp-size="15"]{height:15%}.bar-chart .plot-container [data-cp-size="16"]{height:16%}.bar-chart .plot-container [data-cp-size="17"]{height:17%}.bar-chart .plot-container [data-cp-size="18"]{height:18%}.bar-chart .plot-container [data-cp-size="19"]{height:19%}.bar-chart .plot-container [data-cp-size="20"]{height:20%}.bar-chart .plot-container [data-cp-size="21"]{height:21%}.bar-chart .plot-container [data-cp-size="22"]{height:22%}.bar-chart .plot-container [data-cp-size="23"]{height:23%}.bar-chart .plot-container [data-cp-size="24"]{height:24%}.bar-chart .plot-container [data-cp-size="25"]{height:25%}.bar-chart .plot-container [data-cp-size="26"]{height:26%}.bar-chart .plot-container [data-cp-size="27"]{height:27%}.bar-chart .plot-container [data-cp-size="28"]{height:28%}.bar-chart .plot-container [data-cp-size="29"]{height:29%}.bar-chart .plot-container [data-cp-size="30"]{height:30%}.bar-chart .plot-container [data-cp-size="31"]{height:31%}.bar-chart .plot-container [data-cp-size="32"]{height:32%}.bar-chart .plot-container [data-cp-size="33"]{height:33%}.bar-chart .plot-container [data-cp-size="34"]{height:34%}.bar-chart .plot-container [data-cp-size="35"]{height:35%}.bar-chart .plot-container [data-cp-size="36"]{height:36%}.bar-chart .plot-container [data-cp-size="37"]{height:37%}.bar-chart .plot-container [data-cp-size="38"]{height:38%}.bar-chart .plot-container [data-cp-size="39"]{height:39%}.bar-chart .plot-container [data-cp-size="40"]{height:40%}.bar-chart .plot-container [data-cp-size="41"]{height:41%}.bar-chart .plot-container [data-cp-size="42"]{height:42%}.bar-chart .plot-container [data-cp-size="43"]{height:43%}.bar-chart .plot-container [data-cp-size="44"]{height:44%}.bar-chart .plot-container [data-cp-size="45"]{height:45%}.bar-chart .plot-container [data-cp-size="46"]{height:46%}.bar-chart .plot-container [data-cp-size="47"]{height:47%}.bar-chart .plot-container [data-cp-size="48"]{height:48%}.bar-chart .plot-container [data-cp-size="49"]{height:49%}.bar-chart .plot-container [data-cp-size="50"]{height:50%}.bar-chart .plot-container [data-cp-size="51"]{height:51%}.bar-chart .plot-container [data-cp-size="52"]{height:52%}.bar-chart .plot-container [data-cp-size="53"]{height:53%}.bar-chart .plot-container [data-cp-size="54"]{height:54%}.bar-chart .plot-container [data-cp-size="55"]{height:55%}.bar-chart .plot-container [data-cp-size="56"]{height:56%}.bar-chart .plot-container [data-cp-size="57"]{height:57%}.bar-chart .plot-container [data-cp-size="58"]{height:58%}.bar-chart .plot-container [data-cp-size="59"]{height:59%}.bar-chart .plot-container [data-cp-size="60"]{height:60%}.bar-chart .plot-container [data-cp-size="61"]{height:61%}.bar-chart .plot-container [data-cp-size="62"]{height:62%}.bar-chart .plot-container [data-cp-size="63"]{height:63%}.bar-chart .plot-container [data-cp-size="64"]{height:64%}.bar-chart .plot-container [data-cp-size="65"]{height:65%}.bar-chart .plot-container [data-cp-size="66"]{height:66%}.bar-chart .plot-container [data-cp-size="67"]{height:67%}.bar-chart .plot-container [data-cp-size="68"]{height:68%}.bar-chart .plot-container [data-cp-size="69"]{height:69%}.bar-chart .plot-container [data-cp-size="70"]{height:70%}.bar-chart .plot-container [data-cp-size="71"]{height:71%}.bar-chart .plot-container [data-cp-size="72"]{height:72%}.bar-chart .plot-container [data-cp-size="73"]{height:73%}.bar-chart .plot-container [data-cp-size="74"]{height:74%}.bar-chart .plot-container [data-cp-size="75"]{height:75%}.bar-chart .plot-container [data-cp-size="76"]{height:76%}.bar-chart .plot-container [data-cp-size="77"]{height:77%}.bar-chart .plot-container [data-cp-size="78"]{height:78%}.bar-chart .plot-container [data-cp-size="79"]{height:79%}.bar-chart .plot-container [data-cp-size="80"]{height:80%}.bar-chart .plot-container [data-cp-size="81"]{height:81%}.bar-chart .plot-container [data-cp-size="82"]{height:82%}.bar-chart .plot-container [data-cp-size="83"]{height:83%}.bar-chart .plot-container [data-cp-size="84"]{height:84%}.bar-chart .plot-container [data-cp-size="85"]{height:85%}.bar-chart .plot-container [data-cp-size="86"]{height:86%}.bar-chart .plot-container [data-cp-size="87"]{height:87%}.bar-chart .plot-container [data-cp-size="88"]{height:88%}.bar-chart .plot-container [data-cp-size="89"]{height:89%}.bar-chart .plot-container [data-cp-size="90"]{height:90%}.bar-chart .plot-container [data-cp-size="91"]{height:91%}.bar-chart .plot-container [data-cp-size="92"]{height:92%}.bar-chart .plot-container [data-cp-size="93"]{height:93%}.bar-chart .plot-container [data-cp-size="94"]{height:94%}.bar-chart .plot-container [data-cp-size="95"]{height:95%}.bar-chart .plot-container [data-cp-size="96"]{height:96%}.bar-chart .plot-container [data-cp-size="97"]{height:97%}.bar-chart .plot-container [data-cp-size="98"]{height:98%}.bar-chart .plot-container [data-cp-size="99"]{height:99%}.bar-chart .plot-container [data-cp-size="100"]{height:100%}.vertical-chart .plot-container [data-cp-size="0"]{width:0%}.vertical-chart .plot-container [data-cp-size="1"]{width:1%}.vertical-chart .plot-container [data-cp-size="2"]{width:2%}.vertical-chart .plot-container [data-cp-size="3"]{width:3%}.vertical-chart .plot-container [data-cp-size="4"]{width:4%}.vertical-chart .plot-container [data-cp-size="5"]{width:5%}.vertical-chart .plot-container [data-cp-size="6"]{width:6%}.vertical-chart .plot-container [data-cp-size="7"]{width:7%}.vertical-chart .plot-container [data-cp-size="8"]{width:8%}.vertical-chart .plot-container [data-cp-size="9"]{width:9%}.vertical-chart .plot-container [data-cp-size="10"]{width:10%}.vertical-chart .plot-container [data-cp-size="11"]{width:11%}.vertical-chart .plot-container [data-cp-size="12"]{width:12%}.vertical-chart .plot-container [data-cp-size="13"]{width:13%}.vertical-chart .plot-container [data-cp-size="14"]{width:14%}.vertical-chart .plot-container [data-cp-size="15"]{width:15%}.vertical-chart .plot-container [data-cp-size="16"]{width:16%}.vertical-chart .plot-container [data-cp-size="17"]{width:17%}.vertical-chart .plot-container [data-cp-size="18"]{width:18%}.vertical-chart .plot-container [data-cp-size="19"]{width:19%}.vertical-chart .plot-container [data-cp-size="20"]{width:20%}.vertical-chart .plot-container [data-cp-size="21"]{width:21%}.vertical-chart .plot-container [data-cp-size="22"]{width:22%}.vertical-chart .plot-container [data-cp-size="23"]{width:23%}.vertical-chart .plot-container [data-cp-size="24"]{width:24%}.vertical-chart .plot-container [data-cp-size="25"]{width:25%}.vertical-chart .plot-container [data-cp-size="26"]{width:26%}.vertical-chart .plot-container [data-cp-size="27"]{width:27%}.vertical-chart .plot-container [data-cp-size="28"]{width:28%}.vertical-chart .plot-container [data-cp-size="29"]{width:29%}.vertical-chart .plot-container [data-cp-size="30"]{width:30%}.vertical-chart .plot-container [data-cp-size="31"]{width:31%}.vertical-chart .plot-container [data-cp-size="32"]{width:32%}.vertical-chart .plot-container [data-cp-size="33"]{width:33%}.vertical-chart .plot-container [data-cp-size="34"]{width:34%}.vertical-chart .plot-container [data-cp-size="35"]{width:35%}.vertical-chart .plot-container [data-cp-size="36"]{width:36%}.vertical-chart .plot-container [data-cp-size="37"]{width:37%}.vertical-chart .plot-container [data-cp-size="38"]{width:38%}.vertical-chart .plot-container [data-cp-size="39"]{width:39%}.vertical-chart .plot-container [data-cp-size="40"]{width:40%}.vertical-chart .plot-container [data-cp-size="41"]{width:41%}.vertical-chart .plot-container [data-cp-size="42"]{width:42%}.vertical-chart .plot-container [data-cp-size="43"]{width:43%}.vertical-chart .plot-container [data-cp-size="44"]{width:44%}.vertical-chart .plot-container [data-cp-size="45"]{width:45%}.vertical-chart .plot-container [data-cp-size="46"]{width:46%}.vertical-chart .plot-container [data-cp-size="47"]{width:47%}.vertical-chart .plot-container [data-cp-size="48"]{width:48%}.vertical-chart .plot-container [data-cp-size="49"]{width:49%}.vertical-chart .plot-container [data-cp-size="50"]{width:50%}.vertical-chart .plot-container [data-cp-size="51"]{width:51%}.vertical-chart .plot-container [data-cp-size="52"]{width:52%}.vertical-chart .plot-container [data-cp-size="53"]{width:53%}.vertical-chart .plot-container [data-cp-size="54"]{width:54%}.vertical-chart .plot-container [data-cp-size="55"]{width:55%}.vertical-chart .plot-container [data-cp-size="56"]{width:56%}.vertical-chart .plot-container [data-cp-size="57"]{width:57%}.vertical-chart .plot-container [data-cp-size="58"]{width:58%}.vertical-chart .plot-container [data-cp-size="59"]{width:59%}.vertical-chart .plot-container [data-cp-size="60"]{width:60%}.vertical-chart .plot-container [data-cp-size="61"]{width:61%}.vertical-chart .plot-container [data-cp-size="62"]{width:62%}.vertical-chart .plot-container [data-cp-size="63"]{width:63%}.vertical-chart .plot-container [data-cp-size="64"]{width:64%}.vertical-chart .plot-container [data-cp-size="65"]{width:65%}.vertical-chart .plot-container [data-cp-size="66"]{width:66%}.vertical-chart .plot-container [data-cp-size="67"]{width:67%}.vertical-chart .plot-container [data-cp-size="68"]{width:68%}.vertical-chart .plot-container [data-cp-size="69"]{width:69%}.vertical-chart .plot-container [data-cp-size="70"]{width:70%}.vertical-chart .plot-container [data-cp-size="71"]{width:71%}.vertical-chart .plot-container [data-cp-size="72"]{width:72%}.vertical-chart .plot-container [data-cp-size="73"]{width:73%}.vertical-chart .plot-container [data-cp-size="74"]{width:74%}.vertical-chart .plot-container [data-cp-size="75"]{width:75%}.vertical-chart .plot-container [data-cp-size="76"]{width:76%}.vertical-chart .plot-container [data-cp-size="77"]{width:77%}.vertical-chart .plot-container [data-cp-size="78"]{width:78%}.vertical-chart .plot-container [data-cp-size="79"]{width:79%}.vertical-chart .plot-container [data-cp-size="80"]{width:80%}.vertical-chart .plot-container [data-cp-size="81"]{width:81%}.vertical-chart .plot-container [data-cp-size="82"]{width:82%}.vertical-chart .plot-container [data-cp-size="83"]{width:83%}.vertical-chart .plot-container [data-cp-size="84"]{width:84%}.vertical-chart .plot-container [data-cp-size="85"]{width:85%}.vertical-chart .plot-container [data-cp-size="86"]{width:86%}.vertical-chart .plot-container [data-cp-size="87"]{width:87%}.vertical-chart .plot-container [data-cp-size="88"]{width:88%}.vertical-chart .plot-container [data-cp-size="89"]{width:89%}.vertical-chart .plot-container [data-cp-size="90"]{width:90%}.vertical-chart .plot-container [data-cp-size="91"]{width:91%}.vertical-chart .plot-container [data-cp-size="92"]{width:92%}.vertical-chart .plot-container [data-cp-size="93"]{width:93%}.vertical-chart .plot-container [data-cp-size="94"]{width:94%}.vertical-chart .plot-container [data-cp-size="95"]{width:95%}.vertical-chart .plot-container [data-cp-size="96"]{width:96%}.vertical-chart .plot-container [data-cp-size="97"]{width:97%}.vertical-chart .plot-container [data-cp-size="98"]{width:98%}.vertical-chart .plot-container [data-cp-size="99"]{width:99%}.vertical-chart .plot-container [data-cp-size="100"]{width:100%}.scatter-plot .plot-container [data-cp-x="0"]{left:0%}.scatter-plot .plot-container [data-cp-x="1"]{left:1%}.scatter-plot .plot-container [data-cp-x="2"]{left:2%}.scatter-plot .plot-container [data-cp-x="3"]{left:3%}.scatter-plot .plot-container [data-cp-x="4"]{left:4%}.scatter-plot .plot-container [data-cp-x="5"]{left:5%}.scatter-plot .plot-container [data-cp-x="6"]{left:6%}.scatter-plot .plot-container [data-cp-x="7"]{left:7%}.scatter-plot .plot-container [data-cp-x="8"]{left:8%}.scatter-plot .plot-container [data-cp-x="9"]{left:9%}.scatter-plot .plot-container [data-cp-x="10"]{left:10%}.scatter-plot .plot-container [data-cp-x="11"]{left:11%}.scatter-plot .plot-container [data-cp-x="12"]{left:12%}.scatter-plot .plot-container [data-cp-x="13"]{left:13%}.scatter-plot .plot-container [data-cp-x="14"]{left:14%}.scatter-plot .plot-container [data-cp-x="15"]{left:15%}.scatter-plot .plot-container [data-cp-x="16"]{left:16%}.scatter-plot .plot-container [data-cp-x="17"]{left:17%}.scatter-plot .plot-container [data-cp-x="18"]{left:18%}.scatter-plot .plot-container [data-cp-x="19"]{left:19%}.scatter-plot .plot-container [data-cp-x="20"]{left:20%}.scatter-plot .plot-container [data-cp-x="21"]{left:21%}.scatter-plot .plot-container [data-cp-x="22"]{left:22%}.scatter-plot .plot-container [data-cp-x="23"]{left:23%}.scatter-plot .plot-container [data-cp-x="24"]{left:24%}.scatter-plot .plot-container [data-cp-x="25"]{left:25%}.scatter-plot .plot-container [data-cp-x="26"]{left:26%}.scatter-plot .plot-container [data-cp-x="27"]{left:27%}.scatter-plot .plot-container [data-cp-x="28"]{left:28%}.scatter-plot .plot-container [data-cp-x="29"]{left:29%}.scatter-plot .plot-container [data-cp-x="30"]{left:30%}.scatter-plot .plot-container [data-cp-x="31"]{left:31%}.scatter-plot .plot-container [data-cp-x="32"]{left:32%}.scatter-plot .plot-container [data-cp-x="33"]{left:33%}.scatter-plot .plot-container [data-cp-x="34"]{left:34%}.scatter-plot .plot-container [data-cp-x="35"]{left:35%}.scatter-plot .plot-container [data-cp-x="36"]{left:36%}.scatter-plot .plot-container [data-cp-x="37"]{left:37%}.scatter-plot .plot-container [data-cp-x="38"]{left:38%}.scatter-plot .plot-container [data-cp-x="39"]{left:39%}.scatter-plot .plot-container [data-cp-x="40"]{left:40%}.scatter-plot .plot-container [data-cp-x="41"]{left:41%}.scatter-plot .plot-container [data-cp-x="42"]{left:42%}.scatter-plot .plot-container [data-cp-x="43"]{left:43%}.scatter-plot .plot-container [data-cp-x="44"]{left:44%}.scatter-plot .plot-container [data-cp-x="45"]{left:45%}.scatter-plot .plot-container [data-cp-x="46"]{left:46%}.scatter-plot .plot-container [data-cp-x="47"]{left:47%}.scatter-plot .plot-container [data-cp-x="48"]{left:48%}.scatter-plot .plot-container [data-cp-x="49"]{left:49%}.scatter-plot .plot-container [data-cp-x="50"]{left:50%}.scatter-plot .plot-container [data-cp-x="51"]{left:51%}.scatter-plot .plot-container [data-cp-x="52"]{left:52%}.scatter-plot .plot-container [data-cp-x="53"]{left:53%}.scatter-plot .plot-container [data-cp-x="54"]{left:54%}.scatter-plot .plot-container [data-cp-x="55"]{left:55%}.scatter-plot .plot-container [data-cp-x="56"]{left:56%}.scatter-plot .plot-container [data-cp-x="57"]{left:57%}.scatter-plot .plot-container [data-cp-x="58"]{left:58%}.scatter-plot .plot-container [data-cp-x="59"]{left:59%}.scatter-plot .plot-container [data-cp-x="60"]{left:60%}.scatter-plot .plot-container [data-cp-x="61"]{left:61%}.scatter-plot .plot-container [data-cp-x="62"]{left:62%}.scatter-plot .plot-container [data-cp-x="63"]{left:63%}.scatter-plot .plot-container [data-cp-x="64"]{left:64%}.scatter-plot .plot-container [data-cp-x="65"]{left:65%}.scatter-plot .plot-container [data-cp-x="66"]{left:66%}.scatter-plot .plot-container [data-cp-x="67"]{left:67%}.scatter-plot .plot-container [data-cp-x="68"]{left:68%}.scatter-plot .plot-container [data-cp-x="69"]{left:69%}.scatter-plot .plot-container [data-cp-x="70"]{left:70%}.scatter-plot .plot-container [data-cp-x="71"]{left:71%}.scatter-plot .plot-container [data-cp-x="72"]{left:72%}.scatter-plot .plot-container [data-cp-x="73"]{left:73%}.scatter-plot .plot-container [data-cp-x="74"]{left:74%}.scatter-plot .plot-container [data-cp-x="75"]{left:75%}.scatter-plot .plot-container [data-cp-x="76"]{left:76%}.scatter-plot .plot-container [data-cp-x="77"]{left:77%}.scatter-plot .plot-container [data-cp-x="78"]{left:78%}.scatter-plot .plot-container [data-cp-x="79"]{left:79%}.scatter-plot .plot-container [data-cp-x="80"]{left:80%}.scatter-plot .plot-container [data-cp-x="81"]{left:81%}.scatter-plot .plot-container [data-cp-x="82"]{left:82%}.scatter-plot .plot-container [data-cp-x="83"]{left:83%}.scatter-plot .plot-container [data-cp-x="84"]{left:84%}.scatter-plot .plot-container [data-cp-x="85"]{left:85%}.scatter-plot .plot-container [data-cp-x="86"]{left:86%}.scatter-plot .plot-container [data-cp-x="87"]{left:87%}.scatter-plot .plot-container [data-cp-x="88"]{left:88%}.scatter-plot .plot-container [data-cp-x="89"]{left:89%}.scatter-plot .plot-container [data-cp-x="90"]{left:90%}.scatter-plot .plot-container [data-cp-x="91"]{left:91%}.scatter-plot .plot-container [data-cp-x="92"]{left:92%}.scatter-plot .plot-container [data-cp-x="93"]{left:93%}.scatter-plot .plot-container [data-cp-x="94"]{left:94%}.scatter-plot .plot-container [data-cp-x="95"]{left:95%}.scatter-plot .plot-container [data-cp-x="96"]{left:96%}.scatter-plot .plot-container [data-cp-x="97"]{left:97%}.scatter-plot .plot-container [data-cp-x="98"]{left:98%}.scatter-plot .plot-container [data-cp-x="99"]{left:99%}.scatter-plot .plot-container [data-cp-x="100"]{left:100%}.scatter-plot .plot-container [data-cp-y="0"]{bottom:0%}.scatter-plot .plot-container [data-cp-y="1"]{bottom:1%}.scatter-plot .plot-container [data-cp-y="2"]{bottom:2%}.scatter-plot .plot-container [data-cp-y="3"]{bottom:3%}.scatter-plot .plot-container [data-cp-y="4"]{bottom:4%}.scatter-plot .plot-container [data-cp-y="5"]{bottom:5%}.scatter-plot .plot-container [data-cp-y="6"]{bottom:6%}.scatter-plot .plot-container [data-cp-y="7"]{bottom:7%}.scatter-plot .plot-container [data-cp-y="8"]{bottom:8%}.scatter-plot .plot-container [data-cp-y="9"]{bottom:9%}.scatter-plot .plot-container [data-cp-y="10"]{bottom:10%}.scatter-plot .plot-container [data-cp-y="11"]{bottom:11%}.scatter-plot .plot-container [data-cp-y="12"]{bottom:12%}.scatter-plot .plot-container [data-cp-y="13"]{bottom:13%}.scatter-plot .plot-container [data-cp-y="14"]{bottom:14%}.scatter-plot .plot-container [data-cp-y="15"]{bottom:15%}.scatter-plot .plot-container [data-cp-y="16"]{bottom:16%}.scatter-plot .plot-container [data-cp-y="17"]{bottom:17%}.scatter-plot .plot-container [data-cp-y="18"]{bottom:18%}.scatter-plot .plot-container [data-cp-y="19"]{bottom:19%}.scatter-plot .plot-container [data-cp-y="20"]{bottom:20%}.scatter-plot .plot-container [data-cp-y="21"]{bottom:21%}.scatter-plot .plot-container [data-cp-y="22"]{bottom:22%}.scatter-plot .plot-container [data-cp-y="23"]{bottom:23%}.scatter-plot .plot-container [data-cp-y="24"]{bottom:24%}.scatter-plot .plot-container [data-cp-y="25"]{bottom:25%}.scatter-plot .plot-container [data-cp-y="26"]{bottom:26%}.scatter-plot .plot-container [data-cp-y="27"]{bottom:27%}.scatter-plot .plot-container [data-cp-y="28"]{bottom:28%}.scatter-plot .plot-container [data-cp-y="29"]{bottom:29%}.scatter-plot .plot-container [data-cp-y="30"]{bottom:30%}.scatter-plot .plot-container [data-cp-y="31"]{bottom:31%}.scatter-plot .plot-container [data-cp-y="32"]{bottom:32%}.scatter-plot .plot-container [data-cp-y="33"]{bottom:33%}.scatter-plot .plot-container [data-cp-y="34"]{bottom:34%}.scatter-plot .plot-container [data-cp-y="35"]{bottom:35%}.scatter-plot .plot-container [data-cp-y="36"]{bottom:36%}.scatter-plot .plot-container [data-cp-y="37"]{bottom:37%}.scatter-plot .plot-container [data-cp-y="38"]{bottom:38%}.scatter-plot .plot-container [data-cp-y="39"]{bottom:39%}.scatter-plot .plot-container [data-cp-y="40"]{bottom:40%}.scatter-plot .plot-container [data-cp-y="41"]{bottom:41%}.scatter-plot .plot-container [data-cp-y="42"]{bottom:42%}.scatter-plot .plot-container [data-cp-y="43"]{bottom:43%}.scatter-plot .plot-container [data-cp-y="44"]{bottom:44%}.scatter-plot .plot-container [data-cp-y="45"]{bottom:45%}.scatter-plot .plot-container [data-cp-y="46"]{bottom:46%}.scatter-plot .plot-container [data-cp-y="47"]{bottom:47%}.scatter-plot .plot-container [data-cp-y="48"]{bottom:48%}.scatter-plot .plot-container [data-cp-y="49"]{bottom:49%}.scatter-plot .plot-container [data-cp-y="50"]{bottom:50%}.scatter-plot .plot-container [data-cp-y="51"]{bottom:51%}.scatter-plot .plot-container [data-cp-y="52"]{bottom:52%}.scatter-plot .plot-container [data-cp-y="53"]{bottom:53%}.scatter-plot .plot-container [data-cp-y="54"]{bottom:54%}.scatter-plot .plot-container [data-cp-y="55"]{bottom:55%}.scatter-plot .plot-container [data-cp-y="56"]{bottom:56%}.scatter-plot .plot-container [data-cp-y="57"]{bottom:57%}.scatter-plot .plot-container [data-cp-y="58"]{bottom:58%}.scatter-plot .plot-container [data-cp-y="59"]{bottom:59%}.scatter-plot .plot-container [data-cp-y="60"]{bottom:60%}.scatter-plot .plot-container [data-cp-y="61"]{bottom:61%}.scatter-plot .plot-container [data-cp-y="62"]{bottom:62%}.scatter-plot .plot-container [data-cp-y="63"]{bottom:63%}.scatter-plot .plot-container [data-cp-y="64"]{bottom:64%}.scatter-plot .plot-container [data-cp-y="65"]{bottom:65%}.scatter-plot .plot-container [data-cp-y="66"]{bottom:66%}.scatter-plot .plot-container [data-cp-y="67"]{bottom:67%}.scatter-plot .plot-container [data-cp-y="68"]{bottom:68%}.scatter-plot .plot-container [data-cp-y="69"]{bottom:69%}.scatter-plot .plot-container [data-cp-y="70"]{bottom:70%}.scatter-plot .plot-container [data-cp-y="71"]{bottom:71%}.scatter-plot .plot-container [data-cp-y="72"]{bottom:72%}.scatter-plot .plot-container [data-cp-y="73"]{bottom:73%}.scatter-plot .plot-container [data-cp-y="74"]{bottom:74%}.scatter-plot .plot-container [data-cp-y="75"]{bottom:75%}.scatter-plot .plot-container [data-cp-y="76"]{bottom:76%}.scatter-plot .plot-container [data-cp-y="77"]{bottom:77%}.scatter-plot .plot-container [data-cp-y="78"]{bottom:78%}.scatter-plot .plot-container [data-cp-y="79"]{bottom:79%}.scatter-plot .plot-container [data-cp-y="80"]{bottom:80%}.scatter-plot .plot-container [data-cp-y="81"]{bottom:81%}.scatter-plot .plot-container [data-cp-y="82"]{bottom:82%}.scatter-plot .plot-container [data-cp-y="83"]{bottom:83%}.scatter-plot .plot-container [data-cp-y="84"]{bottom:84%}.scatter-plot .plot-container [data-cp-y="85"]{bottom:85%}.scatter-plot .plot-container [data-cp-y="86"]{bottom:86%}.scatter-plot .plot-container [data-cp-y="87"]{bottom:87%}.scatter-plot .plot-container [data-cp-y="88"]{bottom:88%}.scatter-plot .plot-container [data-cp-y="89"]{bottom:89%}.scatter-plot .plot-container [data-cp-y="90"]{bottom:90%}.scatter-plot .plot-container [data-cp-y="91"]{bottom:91%}.scatter-plot .plot-container [data-cp-y="92"]{bottom:92%}.scatter-plot .plot-container [data-cp-y="93"]{bottom:93%}.scatter-plot .plot-container [data-cp-y="94"]{bottom:94%}.scatter-plot .plot-container [data-cp-y="95"]{bottom:95%}.scatter-plot .plot-container [data-cp-y="96"]{bottom:96%}.scatter-plot .plot-container [data-cp-y="97"]{bottom:97%}.scatter-plot .plot-container [data-cp-y="98"]{bottom:98%}.scatter-plot .plot-container [data-cp-y="99"]{bottom:99%}.scatter-plot .plot-container [data-cp-y="100"]{bottom:100%}
\ No newline at end of file
diff --git a/build/cssplot.group.css b/build/cssplot.group.css
index 2af1e22..cc55803 100644
--- a/build/cssplot.group.css
+++ b/build/cssplot.group.css
@@ -1,32 +1 @@
-.group-by-gender .male {
-  background: #3498db;
-  color: #ffffff;
-}
-.group-by-gender .female {
-  background: #ff6699;
-  color: #ffffff;
-}
-.group-by-number [data-group="0"] {
-  background: #3498db;
-  color: #ffffff;
-}
-.group-by-number [data-group="1"] {
-  background: #ff6699;
-  color: #ffffff;
-}
-.group-by-number [data-group="2"] {
-  background: #93b881;
-  color: #ffffff;
-}
-.group-by-number [data-group="3"] {
-  background: #e09e87;
-  color: #ffffff;
-}
-.group-by-number [data-group="4"] {
-  background: #a22041;
-  color: #ffffff;
-}
-.group-by-number [data-group="5"] {
-  background: #95879c;
-  color: #ffffff;
-}
+.group-by-gender .male{background:#3498db;color:#fff}.group-by-gender .female{background:#f69;color:#fff}.group-by-number [data-group="0"]{background:#3498db;color:#fff}.group-by-number [data-group="1"]{background:#f69;color:#fff}.group-by-number [data-group="2"]{background:#93b881;color:#fff}.group-by-number [data-group="3"]{background:#e09e87;color:#fff}.group-by-number [data-group="4"]{background:#a22041;color:#fff}.group-by-number [data-group="5"]{background:#95879c;color:#fff}
\ No newline at end of file
diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..86f5f2b
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,153 @@
+
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1" />
+
+    <title>cssplot</title>
+    <link rel="stylesheet" href="build/cssplot.full.css" type="text/css" media="screen" charset="utf-8" />
+    <link rel="stylesheet" href="build/cssplot.group.css" type="text/css" media="screen" charset="utf-8" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
+    <style>
+    body { font-family: sans-serif; color: #444444; }
+    .bar-chart, .vertical-chart, .scatter-plot { margin: 20px; border: 1px solid #3498db; }
+    .scatter-plot, .bar-chart { height: 300px; }
+    .vertical-chart ul li { min-height: 12px; }
+    .pad ul li { padding: 8px; }
+    a { color: #3498db; text-decoration: none; }
+    @media screen and (max-width:50em) {
+        .wrapper { width: 100%; }
+        .wrapper div { width: 90%; }
+    }
+    </style>
+
+</head>
+<body>
+<div class="container">
+    <div class="row">
+    <div class="col-lg-10 col-lg-offset-1 text-center">
+        <h1><a href="https://github.com/asciimoo/cssplot">cssplot</a></h1>
+    </div>
+    </div>
+    <div class="row">
+            <h2>Bar Chart</h2>
+        <div class="col-lg-6">
+            <div class="bar-chart">
+                <ul class="plot-container" data-cp-transition="fade">
+                    <li data-cp-size="99" data-cp-delay="0">99%</li>
+                    <li data-cp-size="50" data-cp-delay="10">50%</li>
+                    <li data-cp-size="30" data-cp-delay="20">30%</li>
+                    <li data-cp-size="90" data-cp-delay="30">90%</li>
+                    <li data-cp-size="10" data-cp-delay="40">10%</li>
+                    <li data-cp-size="70" data-cp-delay="50">70%</li>
+                    <li data-cp-size="30" data-cp-delay="60">30%</li>
+                    <li data-cp-size="90" data-cp-delay="70">90%</li>
+                </ul>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="bar-chart">
+                <ul class="plot-container group-by-number" data-cp-transition="grow">
+                    <li data-cp-size="1" data-cp-delay="0"></li>
+                    <li data-cp-size="2" data-cp-delay="10" data-group="5"></li>
+                    <li data-cp-size="4" data-cp-delay="20"></li>
+                    <li data-cp-size="8" data-cp-delay="30" data-group="5"></li>
+                    <li data-cp-size="16" data-cp-delay="40"></li>
+                    <li data-cp-size="32" data-cp-delay="50" data-group="5"></li>
+                    <li data-cp-size="64" data-cp-delay="60"></li>
+                    <li data-cp-size="100" data-cp-delay="70" data-group="5"></li>
+                    <li data-cp-size="90" data-cp-delay="80"></li>
+                    <li data-cp-size="80" data-cp-delay="90" data-group="5"></li>
+                    <li data-cp-size="70" data-cp-delay="100"></li>
+                    <li data-cp-size="60" data-cp-delay="110" data-group="5"></li>
+                    <li data-cp-size="50" data-cp-delay="120"></li>
+                    <li data-cp-size="40" data-cp-delay="130" data-group="5"></li>
+                    <li data-cp-size="30" data-cp-delay="140"></li>
+                    <li data-cp-size="20" data-cp-delay="150" data-group="5"></li>
+                    <li data-cp-size="10" data-cp-delay="160"></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+            <h2>Vertical Bar Chart</h2>
+        <div class="col-lg-6">
+            <div class="vertical-chart pad">
+                <ul class="plot-container" data-cp-transition="fade">
+                    <li data-cp-size="100" data-cp-delay="10">100%</li>
+                    <li data-cp-size="30" data-cp-delay="20">30%</li>
+                    <li data-cp-size="20" data-cp-delay="30">20%</li>
+                    <li data-cp-size="70" data-cp-delay="40">70%</li>
+                    <li data-cp-size="90" data-cp-delay="50">90%</li>
+                </ul>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="vertical-chart">
+                <ul class="plot-container group-by-number">
+                    <li data-cp-size="1"></li>
+                    <li data-cp-size="2" data-group="5"></li>
+                    <li data-cp-size="4"></li>
+                    <li data-cp-size="8" data-group="5"></li>
+                    <li data-cp-size="16"></li>
+                    <li data-cp-size="32" data-group="5"></li>
+                    <li data-cp-size="64"></li>
+                    <li data-cp-size="100" data-group="5"></li>
+                    <li data-cp-size="90"></li>
+                    <li data-cp-size="80" data-group="5"></li>
+                    <li data-cp-size="70"></li>
+                    <li data-cp-size="60" data-group="5"></li>
+                    <li data-cp-size="50"></li>
+                    <li data-cp-size="40" data-group="5"></li>
+                    <li data-cp-size="30"></li>
+                    <li data-cp-size="20" data-group="5"></li>
+                    <li data-cp-size="10"></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <h2>Scatter plot</h2>
+        <div class="col-lg-6">
+            <div class="scatter-plot">
+                <ul class="plot-container">
+                    <li data-cp-x="50" data-cp-y="30">a</li>
+                    <li data-cp-x="30" data-cp-y="20">b</li>
+                    <li data-cp-x="10" data-cp-y="5">c</li>
+                    <li data-cp-x="11" data-cp-y="10">d</li>
+                    <li data-cp-x="12" data-cp-y="20">e</li>
+                    <li data-cp-x="13" data-cp-y="30">f</li>
+                    <li data-cp-x="0" data-cp-y="0">h</li>
+                    <li data-cp-x="100" data-cp-y="100">i</li>
+                </ul>
+            </div>
+        </div>
+        <div class="col-lg-6">
+            <div class="scatter-plot">
+                <ul class="plot-container">
+                    <li data-cp-x="21" data-cp-y="10">h</li>
+                    <li data-cp-x="22" data-cp-y="20">h</li>
+                    <li data-cp-x="23" data-cp-y="30">h</li>
+                    <li data-cp-x="24" data-cp-y="40">h</li>
+                    <li data-cp-x="25" data-cp-y="50">h</li>
+                    <li data-cp-x="26" data-cp-y="60">h</li>
+                    <li data-cp-x="27" data-cp-y="70">h</li>
+                    <li data-cp-x="28" data-cp-y="80">h</li>
+                    <li data-cp-x="29" data-cp-y="90">h</li>
+                    <li data-cp-x="41" data-cp-y="10">h</li>
+                    <li data-cp-x="42" data-cp-y="20">h</li>
+                    <li data-cp-x="43" data-cp-y="30">h</li>
+                    <li data-cp-x="44" data-cp-y="40">h</li>
+                    <li data-cp-x="45" data-cp-y="50">h</li>
+                    <li data-cp-x="46" data-cp-y="60">h</li>
+                    <li data-cp-x="47" data-cp-y="70">h</li>
+                    <li data-cp-x="48" data-cp-y="80">h</li>
+                    <li data-cp-x="49" data-cp-y="90">h</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..528be80
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "cssplot",
+  "version": "0.1.5",
+  "homepage": "http://asciimoo.github.io/cssplot/",
+  "bugs": {
+    "url": "https://github.com/asciimoo/cssplot/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/asciimoo/cssplot"
+  },
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-less": "^0.12.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-newer": "^0.8.0"
+  }
+}

From 01b66068d31f625a35f2cfa5a75017d7973f5c43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Epu=C3=B1an?= <juanbrujo@gmail.com>
Date: Thu, 30 Oct 2014 12:49:51 -0300
Subject: [PATCH 2/8] /src route modified

---
 Gruntfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 27bd1c1..57643b3 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -26,7 +26,7 @@ module.exports = function(grunt) {
         livereload: true
       },
       css: {
-        files: ['src/less/*.less'],
+        files: ['src/*.less'],
         tasks: ['newer:less'],
         options: {
           spawn: false

From 103f235fd3226daa0398ee817391e29caffc6e67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Epu=C3=B1an?= <juanbrujo@gmail.com>
Date: Thu, 30 Oct 2014 12:56:21 -0300
Subject: [PATCH 3/8] Better README

added BUILD flow to README.md
---
 README.md | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 458a228..e30a8e3 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,19 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati
   <img src="docs/images/cssplot_scatter_plot.png"/>
 </div>
 
+## Build
+Using **GruntJS**.
+
+Clone this repo and install dependencies:
+
+	$ npm install
+
+Then run: 
+
+	$ grunt
+	
+It will keep *watching* your changes while you save them and if you have [Livereload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) extension your browser will refresh each time you save your .less file.
+
 ## Conceptions
 
 - [ ] Pie chart
@@ -92,4 +105,4 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati
 - [ ] Line chart
 - [ ] Axis/scale support
 - [ ] Live demo
-- [ ] Better build script
+- [X] Better build script

From 71ca4f1c07d19f754826ea314062885fa6ec6c1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Epu=C3=B1an?= <juanbrujo@gmail.com>
Date: Thu, 30 Oct 2014 12:56:40 -0300
Subject: [PATCH 4/8] not yet

---
 demo.html | 153 ------------------------------------------------------
 1 file changed, 153 deletions(-)
 delete mode 100644 demo.html

diff --git a/demo.html b/demo.html
deleted file mode 100644
index 86f5f2b..0000000
--- a/demo.html
+++ /dev/null
@@ -1,153 +0,0 @@
-
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1" />
-
-    <title>cssplot</title>
-    <link rel="stylesheet" href="build/cssplot.full.css" type="text/css" media="screen" charset="utf-8" />
-    <link rel="stylesheet" href="build/cssplot.group.css" type="text/css" media="screen" charset="utf-8" />
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
-    <style>
-    body { font-family: sans-serif; color: #444444; }
-    .bar-chart, .vertical-chart, .scatter-plot { margin: 20px; border: 1px solid #3498db; }
-    .scatter-plot, .bar-chart { height: 300px; }
-    .vertical-chart ul li { min-height: 12px; }
-    .pad ul li { padding: 8px; }
-    a { color: #3498db; text-decoration: none; }
-    @media screen and (max-width:50em) {
-        .wrapper { width: 100%; }
-        .wrapper div { width: 90%; }
-    }
-    </style>
-
-</head>
-<body>
-<div class="container">
-    <div class="row">
-    <div class="col-lg-10 col-lg-offset-1 text-center">
-        <h1><a href="https://github.com/asciimoo/cssplot">cssplot</a></h1>
-    </div>
-    </div>
-    <div class="row">
-            <h2>Bar Chart</h2>
-        <div class="col-lg-6">
-            <div class="bar-chart">
-                <ul class="plot-container" data-cp-transition="fade">
-                    <li data-cp-size="99" data-cp-delay="0">99%</li>
-                    <li data-cp-size="50" data-cp-delay="10">50%</li>
-                    <li data-cp-size="30" data-cp-delay="20">30%</li>
-                    <li data-cp-size="90" data-cp-delay="30">90%</li>
-                    <li data-cp-size="10" data-cp-delay="40">10%</li>
-                    <li data-cp-size="70" data-cp-delay="50">70%</li>
-                    <li data-cp-size="30" data-cp-delay="60">30%</li>
-                    <li data-cp-size="90" data-cp-delay="70">90%</li>
-                </ul>
-            </div>
-        </div>
-        <div class="col-lg-6">
-            <div class="bar-chart">
-                <ul class="plot-container group-by-number" data-cp-transition="grow">
-                    <li data-cp-size="1" data-cp-delay="0"></li>
-                    <li data-cp-size="2" data-cp-delay="10" data-group="5"></li>
-                    <li data-cp-size="4" data-cp-delay="20"></li>
-                    <li data-cp-size="8" data-cp-delay="30" data-group="5"></li>
-                    <li data-cp-size="16" data-cp-delay="40"></li>
-                    <li data-cp-size="32" data-cp-delay="50" data-group="5"></li>
-                    <li data-cp-size="64" data-cp-delay="60"></li>
-                    <li data-cp-size="100" data-cp-delay="70" data-group="5"></li>
-                    <li data-cp-size="90" data-cp-delay="80"></li>
-                    <li data-cp-size="80" data-cp-delay="90" data-group="5"></li>
-                    <li data-cp-size="70" data-cp-delay="100"></li>
-                    <li data-cp-size="60" data-cp-delay="110" data-group="5"></li>
-                    <li data-cp-size="50" data-cp-delay="120"></li>
-                    <li data-cp-size="40" data-cp-delay="130" data-group="5"></li>
-                    <li data-cp-size="30" data-cp-delay="140"></li>
-                    <li data-cp-size="20" data-cp-delay="150" data-group="5"></li>
-                    <li data-cp-size="10" data-cp-delay="160"></li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    <div class="row">
-            <h2>Vertical Bar Chart</h2>
-        <div class="col-lg-6">
-            <div class="vertical-chart pad">
-                <ul class="plot-container" data-cp-transition="fade">
-                    <li data-cp-size="100" data-cp-delay="10">100%</li>
-                    <li data-cp-size="30" data-cp-delay="20">30%</li>
-                    <li data-cp-size="20" data-cp-delay="30">20%</li>
-                    <li data-cp-size="70" data-cp-delay="40">70%</li>
-                    <li data-cp-size="90" data-cp-delay="50">90%</li>
-                </ul>
-            </div>
-        </div>
-        <div class="col-lg-6">
-            <div class="vertical-chart">
-                <ul class="plot-container group-by-number">
-                    <li data-cp-size="1"></li>
-                    <li data-cp-size="2" data-group="5"></li>
-                    <li data-cp-size="4"></li>
-                    <li data-cp-size="8" data-group="5"></li>
-                    <li data-cp-size="16"></li>
-                    <li data-cp-size="32" data-group="5"></li>
-                    <li data-cp-size="64"></li>
-                    <li data-cp-size="100" data-group="5"></li>
-                    <li data-cp-size="90"></li>
-                    <li data-cp-size="80" data-group="5"></li>
-                    <li data-cp-size="70"></li>
-                    <li data-cp-size="60" data-group="5"></li>
-                    <li data-cp-size="50"></li>
-                    <li data-cp-size="40" data-group="5"></li>
-                    <li data-cp-size="30"></li>
-                    <li data-cp-size="20" data-group="5"></li>
-                    <li data-cp-size="10"></li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <h2>Scatter plot</h2>
-        <div class="col-lg-6">
-            <div class="scatter-plot">
-                <ul class="plot-container">
-                    <li data-cp-x="50" data-cp-y="30">a</li>
-                    <li data-cp-x="30" data-cp-y="20">b</li>
-                    <li data-cp-x="10" data-cp-y="5">c</li>
-                    <li data-cp-x="11" data-cp-y="10">d</li>
-                    <li data-cp-x="12" data-cp-y="20">e</li>
-                    <li data-cp-x="13" data-cp-y="30">f</li>
-                    <li data-cp-x="0" data-cp-y="0">h</li>
-                    <li data-cp-x="100" data-cp-y="100">i</li>
-                </ul>
-            </div>
-        </div>
-        <div class="col-lg-6">
-            <div class="scatter-plot">
-                <ul class="plot-container">
-                    <li data-cp-x="21" data-cp-y="10">h</li>
-                    <li data-cp-x="22" data-cp-y="20">h</li>
-                    <li data-cp-x="23" data-cp-y="30">h</li>
-                    <li data-cp-x="24" data-cp-y="40">h</li>
-                    <li data-cp-x="25" data-cp-y="50">h</li>
-                    <li data-cp-x="26" data-cp-y="60">h</li>
-                    <li data-cp-x="27" data-cp-y="70">h</li>
-                    <li data-cp-x="28" data-cp-y="80">h</li>
-                    <li data-cp-x="29" data-cp-y="90">h</li>
-                    <li data-cp-x="41" data-cp-y="10">h</li>
-                    <li data-cp-x="42" data-cp-y="20">h</li>
-                    <li data-cp-x="43" data-cp-y="30">h</li>
-                    <li data-cp-x="44" data-cp-y="40">h</li>
-                    <li data-cp-x="45" data-cp-y="50">h</li>
-                    <li data-cp-x="46" data-cp-y="60">h</li>
-                    <li data-cp-x="47" data-cp-y="70">h</li>
-                    <li data-cp-x="48" data-cp-y="80">h</li>
-                    <li data-cp-x="49" data-cp-y="90">h</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-</body>
-</html>

From 441e0a73a70002ed3493fd1b6d19c4d440d2c8ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Epu=C3=B1an?= <juanbrujo@gmail.com>
Date: Thu, 30 Oct 2014 19:36:14 -0300
Subject: [PATCH 5/8] Animated transitions added

- added animated transitions to charts using data-cp-transition and
data-cp-delay attributes
---
 build/cssplot.base.css      |   2 +-
 build/cssplot.full.css      |   2 +-
 demo.html                   | 132 +++++++++++++++++--------
 src/cssplot.full.less       |   3 +-
 src/modules/animations.less |  69 ++++++++++++++
 src/modules/base.less       | 185 ++++++++++++++++++++++++++++--------
 src/modules/loops.less      |  36 ++++++-
 7 files changed, 344 insertions(+), 85 deletions(-)
 create mode 100644 src/modules/animations.less

diff --git a/build/cssplot.base.css b/build/cssplot.base.css
index e3e99c8..49ebd4c 100644
--- a/build/cssplot.base.css
+++ b/build/cssplot.base.css
@@ -1 +1 @@
-.bar-chart,.vertical-chart,.scatter-plot{position:relative;min-width:100px;min-height:100px;padding:0;margin:0}.bar-chart .plot-container{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;text-align:center;top:0;left:0;bottom:0;right:0;padding:0;margin:0;min-height:100px}.bar-chart .chart-column,.bar-chart [data-cp-size]{-webkit-flex-grow:1;flex-grow:1;-webkit-align-self:flex-end;align-self:flex-end}.bar-chart .chart-column,.vertical-chart .chart-row,.bar-chart [data-cp-size],.vertical-chart [data-cp-size]{background:#3498db;color:#fff;list-style:none;border:1px solid #fff;box-sizing:border-box}.vertical-chart{clear:both}.vertical-chart .plot-container{flex-direction:row;padding:0;margin:0;width:100%}.vertical-chart .chart-row,.vertical-chart [data-cp-size]{min-height:1px}.scatter-plot .plot-container{position:absolute;top:12px;left:0;right:12px;bottom:0;margin:0;padding:0}.scatter-plot .chart-dot,.scatter-plot .chart-dot,.scatter-plot [data-cp-x],.scatter-plot [data-cp-y]{position:absolute;height:0;width:0;list-style:none;overflow:hidden;border:6px solid #3498db;border-radius:100%}
\ No newline at end of file
+.bar-chart,.horizontal-chart,.scatter-plot{position:relative;min-width:100px;min-height:100px;padding:0;margin:0}.bar-chart .plot-container{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;text-align:center;top:0;left:0;bottom:0;right:0;padding:0;margin:0;min-height:100px}.bar-chart .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.bar-chart .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scaleY(0);-webkit-transform-origin:center bottom;transform:scaleY(0);transform-origin:center bottom;-webkit-animation-name:bar-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:bar-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.bar-chart .chart-column,.bar-chart [data-cp-size]{-webkit-flex-grow:1;flex-grow:1;-webkit-align-self:flex-end;align-self:flex-end}.bar-chart .chart-column,.horizontal-chart .chart-row,.bar-chart [data-cp-size],.horizontal-chart [data-cp-size]{background:#3498db;color:#fff;list-style:none;border:1px solid #fff;box-sizing:border-box}.horizontal-chart{clear:both}.horizontal-chart .plot-container{flex-direction:row;padding:0;margin:0;width:100%}.horizontal-chart .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.horizontal-chart .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scaleX(0);-webkit-transform-origin:left center;transform:scaleX(0);transform-origin:left center;-webkit-animation-name:horizontal-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:horizontal-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.horizontal-chart .chart-row,.horizontal-chart [data-cp-size]{min-height:1px}.scatter-plot .plot-container{position:absolute;top:12px;left:0;right:12px;bottom:0;margin:0;padding:0}.scatter-plot .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.scatter-plot .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scale(0);-webkit-transform-origin:center center;transform:scale(0);transform-origin:center center;-webkit-animation-name:horizontal-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:horizontal-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.scatter-plot .chart-dot,.scatter-plot .chart-dot,.scatter-plot [data-cp-x],.scatter-plot [data-cp-y]{position:absolute;height:0;width:0;list-style:none;overflow:hidden;border:6px solid #3498db;border-radius:100%}
\ No newline at end of file
diff --git a/build/cssplot.full.css b/build/cssplot.full.css
index 2a21493..ab72ba1 100644
--- a/build/cssplot.full.css
+++ b/build/cssplot.full.css
@@ -1 +1 @@
-.bar-chart,.vertical-chart,.scatter-plot{position:relative;min-width:100px;min-height:100px;padding:0;margin:0}.bar-chart .plot-container{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;text-align:center;top:0;left:0;bottom:0;right:0;padding:0;margin:0;min-height:100px}.bar-chart .chart-column,.bar-chart [data-cp-size]{-webkit-flex-grow:1;flex-grow:1;-webkit-align-self:flex-end;align-self:flex-end}.bar-chart .chart-column,.vertical-chart .chart-row,.bar-chart [data-cp-size],.vertical-chart [data-cp-size]{background:#3498db;color:#fff;list-style:none;border:1px solid #fff;box-sizing:border-box}.vertical-chart{clear:both}.vertical-chart .plot-container{flex-direction:row;padding:0;margin:0;width:100%}.vertical-chart .chart-row,.vertical-chart [data-cp-size]{min-height:1px}.scatter-plot .plot-container{position:absolute;top:12px;left:0;right:12px;bottom:0;margin:0;padding:0}.scatter-plot .chart-dot,.scatter-plot .chart-dot,.scatter-plot [data-cp-x],.scatter-plot [data-cp-y]{position:absolute;height:0;width:0;list-style:none;overflow:hidden;border:6px solid #3498db;border-radius:100%}.bar-chart .plot-container [data-cp-size="0"]{height:0%}.bar-chart .plot-container [data-cp-size="1"]{height:1%}.bar-chart .plot-container [data-cp-size="2"]{height:2%}.bar-chart .plot-container [data-cp-size="3"]{height:3%}.bar-chart .plot-container [data-cp-size="4"]{height:4%}.bar-chart .plot-container [data-cp-size="5"]{height:5%}.bar-chart .plot-container [data-cp-size="6"]{height:6%}.bar-chart .plot-container [data-cp-size="7"]{height:7%}.bar-chart .plot-container [data-cp-size="8"]{height:8%}.bar-chart .plot-container [data-cp-size="9"]{height:9%}.bar-chart .plot-container [data-cp-size="10"]{height:10%}.bar-chart .plot-container [data-cp-size="11"]{height:11%}.bar-chart .plot-container [data-cp-size="12"]{height:12%}.bar-chart .plot-container [data-cp-size="13"]{height:13%}.bar-chart .plot-container [data-cp-size="14"]{height:14%}.bar-chart .plot-container [data-cp-size="15"]{height:15%}.bar-chart .plot-container [data-cp-size="16"]{height:16%}.bar-chart .plot-container [data-cp-size="17"]{height:17%}.bar-chart .plot-container [data-cp-size="18"]{height:18%}.bar-chart .plot-container [data-cp-size="19"]{height:19%}.bar-chart .plot-container [data-cp-size="20"]{height:20%}.bar-chart .plot-container [data-cp-size="21"]{height:21%}.bar-chart .plot-container [data-cp-size="22"]{height:22%}.bar-chart .plot-container [data-cp-size="23"]{height:23%}.bar-chart .plot-container [data-cp-size="24"]{height:24%}.bar-chart .plot-container [data-cp-size="25"]{height:25%}.bar-chart .plot-container [data-cp-size="26"]{height:26%}.bar-chart .plot-container [data-cp-size="27"]{height:27%}.bar-chart .plot-container [data-cp-size="28"]{height:28%}.bar-chart .plot-container [data-cp-size="29"]{height:29%}.bar-chart .plot-container [data-cp-size="30"]{height:30%}.bar-chart .plot-container [data-cp-size="31"]{height:31%}.bar-chart .plot-container [data-cp-size="32"]{height:32%}.bar-chart .plot-container [data-cp-size="33"]{height:33%}.bar-chart .plot-container [data-cp-size="34"]{height:34%}.bar-chart .plot-container [data-cp-size="35"]{height:35%}.bar-chart .plot-container [data-cp-size="36"]{height:36%}.bar-chart .plot-container [data-cp-size="37"]{height:37%}.bar-chart .plot-container [data-cp-size="38"]{height:38%}.bar-chart .plot-container [data-cp-size="39"]{height:39%}.bar-chart .plot-container [data-cp-size="40"]{height:40%}.bar-chart .plot-container [data-cp-size="41"]{height:41%}.bar-chart .plot-container [data-cp-size="42"]{height:42%}.bar-chart .plot-container [data-cp-size="43"]{height:43%}.bar-chart .plot-container [data-cp-size="44"]{height:44%}.bar-chart .plot-container [data-cp-size="45"]{height:45%}.bar-chart .plot-container [data-cp-size="46"]{height:46%}.bar-chart .plot-container [data-cp-size="47"]{height:47%}.bar-chart .plot-container [data-cp-size="48"]{height:48%}.bar-chart .plot-container [data-cp-size="49"]{height:49%}.bar-chart .plot-container [data-cp-size="50"]{height:50%}.bar-chart .plot-container [data-cp-size="51"]{height:51%}.bar-chart .plot-container [data-cp-size="52"]{height:52%}.bar-chart .plot-container [data-cp-size="53"]{height:53%}.bar-chart .plot-container [data-cp-size="54"]{height:54%}.bar-chart .plot-container [data-cp-size="55"]{height:55%}.bar-chart .plot-container [data-cp-size="56"]{height:56%}.bar-chart .plot-container [data-cp-size="57"]{height:57%}.bar-chart .plot-container [data-cp-size="58"]{height:58%}.bar-chart .plot-container [data-cp-size="59"]{height:59%}.bar-chart .plot-container [data-cp-size="60"]{height:60%}.bar-chart .plot-container [data-cp-size="61"]{height:61%}.bar-chart .plot-container [data-cp-size="62"]{height:62%}.bar-chart .plot-container [data-cp-size="63"]{height:63%}.bar-chart .plot-container [data-cp-size="64"]{height:64%}.bar-chart .plot-container [data-cp-size="65"]{height:65%}.bar-chart .plot-container [data-cp-size="66"]{height:66%}.bar-chart .plot-container [data-cp-size="67"]{height:67%}.bar-chart .plot-container [data-cp-size="68"]{height:68%}.bar-chart .plot-container [data-cp-size="69"]{height:69%}.bar-chart .plot-container [data-cp-size="70"]{height:70%}.bar-chart .plot-container [data-cp-size="71"]{height:71%}.bar-chart .plot-container [data-cp-size="72"]{height:72%}.bar-chart .plot-container [data-cp-size="73"]{height:73%}.bar-chart .plot-container [data-cp-size="74"]{height:74%}.bar-chart .plot-container [data-cp-size="75"]{height:75%}.bar-chart .plot-container [data-cp-size="76"]{height:76%}.bar-chart .plot-container [data-cp-size="77"]{height:77%}.bar-chart .plot-container [data-cp-size="78"]{height:78%}.bar-chart .plot-container [data-cp-size="79"]{height:79%}.bar-chart .plot-container [data-cp-size="80"]{height:80%}.bar-chart .plot-container [data-cp-size="81"]{height:81%}.bar-chart .plot-container [data-cp-size="82"]{height:82%}.bar-chart .plot-container [data-cp-size="83"]{height:83%}.bar-chart .plot-container [data-cp-size="84"]{height:84%}.bar-chart .plot-container [data-cp-size="85"]{height:85%}.bar-chart .plot-container [data-cp-size="86"]{height:86%}.bar-chart .plot-container [data-cp-size="87"]{height:87%}.bar-chart .plot-container [data-cp-size="88"]{height:88%}.bar-chart .plot-container [data-cp-size="89"]{height:89%}.bar-chart .plot-container [data-cp-size="90"]{height:90%}.bar-chart .plot-container [data-cp-size="91"]{height:91%}.bar-chart .plot-container [data-cp-size="92"]{height:92%}.bar-chart .plot-container [data-cp-size="93"]{height:93%}.bar-chart .plot-container [data-cp-size="94"]{height:94%}.bar-chart .plot-container [data-cp-size="95"]{height:95%}.bar-chart .plot-container [data-cp-size="96"]{height:96%}.bar-chart .plot-container [data-cp-size="97"]{height:97%}.bar-chart .plot-container [data-cp-size="98"]{height:98%}.bar-chart .plot-container [data-cp-size="99"]{height:99%}.bar-chart .plot-container [data-cp-size="100"]{height:100%}.vertical-chart .plot-container [data-cp-size="0"]{width:0%}.vertical-chart .plot-container [data-cp-size="1"]{width:1%}.vertical-chart .plot-container [data-cp-size="2"]{width:2%}.vertical-chart .plot-container [data-cp-size="3"]{width:3%}.vertical-chart .plot-container [data-cp-size="4"]{width:4%}.vertical-chart .plot-container [data-cp-size="5"]{width:5%}.vertical-chart .plot-container [data-cp-size="6"]{width:6%}.vertical-chart .plot-container [data-cp-size="7"]{width:7%}.vertical-chart .plot-container [data-cp-size="8"]{width:8%}.vertical-chart .plot-container [data-cp-size="9"]{width:9%}.vertical-chart .plot-container [data-cp-size="10"]{width:10%}.vertical-chart .plot-container [data-cp-size="11"]{width:11%}.vertical-chart .plot-container [data-cp-size="12"]{width:12%}.vertical-chart .plot-container [data-cp-size="13"]{width:13%}.vertical-chart .plot-container [data-cp-size="14"]{width:14%}.vertical-chart .plot-container [data-cp-size="15"]{width:15%}.vertical-chart .plot-container [data-cp-size="16"]{width:16%}.vertical-chart .plot-container [data-cp-size="17"]{width:17%}.vertical-chart .plot-container [data-cp-size="18"]{width:18%}.vertical-chart .plot-container [data-cp-size="19"]{width:19%}.vertical-chart .plot-container [data-cp-size="20"]{width:20%}.vertical-chart .plot-container [data-cp-size="21"]{width:21%}.vertical-chart .plot-container [data-cp-size="22"]{width:22%}.vertical-chart .plot-container [data-cp-size="23"]{width:23%}.vertical-chart .plot-container [data-cp-size="24"]{width:24%}.vertical-chart .plot-container [data-cp-size="25"]{width:25%}.vertical-chart .plot-container [data-cp-size="26"]{width:26%}.vertical-chart .plot-container [data-cp-size="27"]{width:27%}.vertical-chart .plot-container [data-cp-size="28"]{width:28%}.vertical-chart .plot-container [data-cp-size="29"]{width:29%}.vertical-chart .plot-container [data-cp-size="30"]{width:30%}.vertical-chart .plot-container [data-cp-size="31"]{width:31%}.vertical-chart .plot-container [data-cp-size="32"]{width:32%}.vertical-chart .plot-container [data-cp-size="33"]{width:33%}.vertical-chart .plot-container [data-cp-size="34"]{width:34%}.vertical-chart .plot-container [data-cp-size="35"]{width:35%}.vertical-chart .plot-container [data-cp-size="36"]{width:36%}.vertical-chart .plot-container [data-cp-size="37"]{width:37%}.vertical-chart .plot-container [data-cp-size="38"]{width:38%}.vertical-chart .plot-container [data-cp-size="39"]{width:39%}.vertical-chart .plot-container [data-cp-size="40"]{width:40%}.vertical-chart .plot-container [data-cp-size="41"]{width:41%}.vertical-chart .plot-container [data-cp-size="42"]{width:42%}.vertical-chart .plot-container [data-cp-size="43"]{width:43%}.vertical-chart .plot-container [data-cp-size="44"]{width:44%}.vertical-chart .plot-container [data-cp-size="45"]{width:45%}.vertical-chart .plot-container [data-cp-size="46"]{width:46%}.vertical-chart .plot-container [data-cp-size="47"]{width:47%}.vertical-chart .plot-container [data-cp-size="48"]{width:48%}.vertical-chart .plot-container [data-cp-size="49"]{width:49%}.vertical-chart .plot-container [data-cp-size="50"]{width:50%}.vertical-chart .plot-container [data-cp-size="51"]{width:51%}.vertical-chart .plot-container [data-cp-size="52"]{width:52%}.vertical-chart .plot-container [data-cp-size="53"]{width:53%}.vertical-chart .plot-container [data-cp-size="54"]{width:54%}.vertical-chart .plot-container [data-cp-size="55"]{width:55%}.vertical-chart .plot-container [data-cp-size="56"]{width:56%}.vertical-chart .plot-container [data-cp-size="57"]{width:57%}.vertical-chart .plot-container [data-cp-size="58"]{width:58%}.vertical-chart .plot-container [data-cp-size="59"]{width:59%}.vertical-chart .plot-container [data-cp-size="60"]{width:60%}.vertical-chart .plot-container [data-cp-size="61"]{width:61%}.vertical-chart .plot-container [data-cp-size="62"]{width:62%}.vertical-chart .plot-container [data-cp-size="63"]{width:63%}.vertical-chart .plot-container [data-cp-size="64"]{width:64%}.vertical-chart .plot-container [data-cp-size="65"]{width:65%}.vertical-chart .plot-container [data-cp-size="66"]{width:66%}.vertical-chart .plot-container [data-cp-size="67"]{width:67%}.vertical-chart .plot-container [data-cp-size="68"]{width:68%}.vertical-chart .plot-container [data-cp-size="69"]{width:69%}.vertical-chart .plot-container [data-cp-size="70"]{width:70%}.vertical-chart .plot-container [data-cp-size="71"]{width:71%}.vertical-chart .plot-container [data-cp-size="72"]{width:72%}.vertical-chart .plot-container [data-cp-size="73"]{width:73%}.vertical-chart .plot-container [data-cp-size="74"]{width:74%}.vertical-chart .plot-container [data-cp-size="75"]{width:75%}.vertical-chart .plot-container [data-cp-size="76"]{width:76%}.vertical-chart .plot-container [data-cp-size="77"]{width:77%}.vertical-chart .plot-container [data-cp-size="78"]{width:78%}.vertical-chart .plot-container [data-cp-size="79"]{width:79%}.vertical-chart .plot-container [data-cp-size="80"]{width:80%}.vertical-chart .plot-container [data-cp-size="81"]{width:81%}.vertical-chart .plot-container [data-cp-size="82"]{width:82%}.vertical-chart .plot-container [data-cp-size="83"]{width:83%}.vertical-chart .plot-container [data-cp-size="84"]{width:84%}.vertical-chart .plot-container [data-cp-size="85"]{width:85%}.vertical-chart .plot-container [data-cp-size="86"]{width:86%}.vertical-chart .plot-container [data-cp-size="87"]{width:87%}.vertical-chart .plot-container [data-cp-size="88"]{width:88%}.vertical-chart .plot-container [data-cp-size="89"]{width:89%}.vertical-chart .plot-container [data-cp-size="90"]{width:90%}.vertical-chart .plot-container [data-cp-size="91"]{width:91%}.vertical-chart .plot-container [data-cp-size="92"]{width:92%}.vertical-chart .plot-container [data-cp-size="93"]{width:93%}.vertical-chart .plot-container [data-cp-size="94"]{width:94%}.vertical-chart .plot-container [data-cp-size="95"]{width:95%}.vertical-chart .plot-container [data-cp-size="96"]{width:96%}.vertical-chart .plot-container [data-cp-size="97"]{width:97%}.vertical-chart .plot-container [data-cp-size="98"]{width:98%}.vertical-chart .plot-container [data-cp-size="99"]{width:99%}.vertical-chart .plot-container [data-cp-size="100"]{width:100%}.scatter-plot .plot-container [data-cp-x="0"]{left:0%}.scatter-plot .plot-container [data-cp-x="1"]{left:1%}.scatter-plot .plot-container [data-cp-x="2"]{left:2%}.scatter-plot .plot-container [data-cp-x="3"]{left:3%}.scatter-plot .plot-container [data-cp-x="4"]{left:4%}.scatter-plot .plot-container [data-cp-x="5"]{left:5%}.scatter-plot .plot-container [data-cp-x="6"]{left:6%}.scatter-plot .plot-container [data-cp-x="7"]{left:7%}.scatter-plot .plot-container [data-cp-x="8"]{left:8%}.scatter-plot .plot-container [data-cp-x="9"]{left:9%}.scatter-plot .plot-container [data-cp-x="10"]{left:10%}.scatter-plot .plot-container [data-cp-x="11"]{left:11%}.scatter-plot .plot-container [data-cp-x="12"]{left:12%}.scatter-plot .plot-container [data-cp-x="13"]{left:13%}.scatter-plot .plot-container [data-cp-x="14"]{left:14%}.scatter-plot .plot-container [data-cp-x="15"]{left:15%}.scatter-plot .plot-container [data-cp-x="16"]{left:16%}.scatter-plot .plot-container [data-cp-x="17"]{left:17%}.scatter-plot .plot-container [data-cp-x="18"]{left:18%}.scatter-plot .plot-container [data-cp-x="19"]{left:19%}.scatter-plot .plot-container [data-cp-x="20"]{left:20%}.scatter-plot .plot-container [data-cp-x="21"]{left:21%}.scatter-plot .plot-container [data-cp-x="22"]{left:22%}.scatter-plot .plot-container [data-cp-x="23"]{left:23%}.scatter-plot .plot-container [data-cp-x="24"]{left:24%}.scatter-plot .plot-container [data-cp-x="25"]{left:25%}.scatter-plot .plot-container [data-cp-x="26"]{left:26%}.scatter-plot .plot-container [data-cp-x="27"]{left:27%}.scatter-plot .plot-container [data-cp-x="28"]{left:28%}.scatter-plot .plot-container [data-cp-x="29"]{left:29%}.scatter-plot .plot-container [data-cp-x="30"]{left:30%}.scatter-plot .plot-container [data-cp-x="31"]{left:31%}.scatter-plot .plot-container [data-cp-x="32"]{left:32%}.scatter-plot .plot-container [data-cp-x="33"]{left:33%}.scatter-plot .plot-container [data-cp-x="34"]{left:34%}.scatter-plot .plot-container [data-cp-x="35"]{left:35%}.scatter-plot .plot-container [data-cp-x="36"]{left:36%}.scatter-plot .plot-container [data-cp-x="37"]{left:37%}.scatter-plot .plot-container [data-cp-x="38"]{left:38%}.scatter-plot .plot-container [data-cp-x="39"]{left:39%}.scatter-plot .plot-container [data-cp-x="40"]{left:40%}.scatter-plot .plot-container [data-cp-x="41"]{left:41%}.scatter-plot .plot-container [data-cp-x="42"]{left:42%}.scatter-plot .plot-container [data-cp-x="43"]{left:43%}.scatter-plot .plot-container [data-cp-x="44"]{left:44%}.scatter-plot .plot-container [data-cp-x="45"]{left:45%}.scatter-plot .plot-container [data-cp-x="46"]{left:46%}.scatter-plot .plot-container [data-cp-x="47"]{left:47%}.scatter-plot .plot-container [data-cp-x="48"]{left:48%}.scatter-plot .plot-container [data-cp-x="49"]{left:49%}.scatter-plot .plot-container [data-cp-x="50"]{left:50%}.scatter-plot .plot-container [data-cp-x="51"]{left:51%}.scatter-plot .plot-container [data-cp-x="52"]{left:52%}.scatter-plot .plot-container [data-cp-x="53"]{left:53%}.scatter-plot .plot-container [data-cp-x="54"]{left:54%}.scatter-plot .plot-container [data-cp-x="55"]{left:55%}.scatter-plot .plot-container [data-cp-x="56"]{left:56%}.scatter-plot .plot-container [data-cp-x="57"]{left:57%}.scatter-plot .plot-container [data-cp-x="58"]{left:58%}.scatter-plot .plot-container [data-cp-x="59"]{left:59%}.scatter-plot .plot-container [data-cp-x="60"]{left:60%}.scatter-plot .plot-container [data-cp-x="61"]{left:61%}.scatter-plot .plot-container [data-cp-x="62"]{left:62%}.scatter-plot .plot-container [data-cp-x="63"]{left:63%}.scatter-plot .plot-container [data-cp-x="64"]{left:64%}.scatter-plot .plot-container [data-cp-x="65"]{left:65%}.scatter-plot .plot-container [data-cp-x="66"]{left:66%}.scatter-plot .plot-container [data-cp-x="67"]{left:67%}.scatter-plot .plot-container [data-cp-x="68"]{left:68%}.scatter-plot .plot-container [data-cp-x="69"]{left:69%}.scatter-plot .plot-container [data-cp-x="70"]{left:70%}.scatter-plot .plot-container [data-cp-x="71"]{left:71%}.scatter-plot .plot-container [data-cp-x="72"]{left:72%}.scatter-plot .plot-container [data-cp-x="73"]{left:73%}.scatter-plot .plot-container [data-cp-x="74"]{left:74%}.scatter-plot .plot-container [data-cp-x="75"]{left:75%}.scatter-plot .plot-container [data-cp-x="76"]{left:76%}.scatter-plot .plot-container [data-cp-x="77"]{left:77%}.scatter-plot .plot-container [data-cp-x="78"]{left:78%}.scatter-plot .plot-container [data-cp-x="79"]{left:79%}.scatter-plot .plot-container [data-cp-x="80"]{left:80%}.scatter-plot .plot-container [data-cp-x="81"]{left:81%}.scatter-plot .plot-container [data-cp-x="82"]{left:82%}.scatter-plot .plot-container [data-cp-x="83"]{left:83%}.scatter-plot .plot-container [data-cp-x="84"]{left:84%}.scatter-plot .plot-container [data-cp-x="85"]{left:85%}.scatter-plot .plot-container [data-cp-x="86"]{left:86%}.scatter-plot .plot-container [data-cp-x="87"]{left:87%}.scatter-plot .plot-container [data-cp-x="88"]{left:88%}.scatter-plot .plot-container [data-cp-x="89"]{left:89%}.scatter-plot .plot-container [data-cp-x="90"]{left:90%}.scatter-plot .plot-container [data-cp-x="91"]{left:91%}.scatter-plot .plot-container [data-cp-x="92"]{left:92%}.scatter-plot .plot-container [data-cp-x="93"]{left:93%}.scatter-plot .plot-container [data-cp-x="94"]{left:94%}.scatter-plot .plot-container [data-cp-x="95"]{left:95%}.scatter-plot .plot-container [data-cp-x="96"]{left:96%}.scatter-plot .plot-container [data-cp-x="97"]{left:97%}.scatter-plot .plot-container [data-cp-x="98"]{left:98%}.scatter-plot .plot-container [data-cp-x="99"]{left:99%}.scatter-plot .plot-container [data-cp-x="100"]{left:100%}.scatter-plot .plot-container [data-cp-y="0"]{bottom:0%}.scatter-plot .plot-container [data-cp-y="1"]{bottom:1%}.scatter-plot .plot-container [data-cp-y="2"]{bottom:2%}.scatter-plot .plot-container [data-cp-y="3"]{bottom:3%}.scatter-plot .plot-container [data-cp-y="4"]{bottom:4%}.scatter-plot .plot-container [data-cp-y="5"]{bottom:5%}.scatter-plot .plot-container [data-cp-y="6"]{bottom:6%}.scatter-plot .plot-container [data-cp-y="7"]{bottom:7%}.scatter-plot .plot-container [data-cp-y="8"]{bottom:8%}.scatter-plot .plot-container [data-cp-y="9"]{bottom:9%}.scatter-plot .plot-container [data-cp-y="10"]{bottom:10%}.scatter-plot .plot-container [data-cp-y="11"]{bottom:11%}.scatter-plot .plot-container [data-cp-y="12"]{bottom:12%}.scatter-plot .plot-container [data-cp-y="13"]{bottom:13%}.scatter-plot .plot-container [data-cp-y="14"]{bottom:14%}.scatter-plot .plot-container [data-cp-y="15"]{bottom:15%}.scatter-plot .plot-container [data-cp-y="16"]{bottom:16%}.scatter-plot .plot-container [data-cp-y="17"]{bottom:17%}.scatter-plot .plot-container [data-cp-y="18"]{bottom:18%}.scatter-plot .plot-container [data-cp-y="19"]{bottom:19%}.scatter-plot .plot-container [data-cp-y="20"]{bottom:20%}.scatter-plot .plot-container [data-cp-y="21"]{bottom:21%}.scatter-plot .plot-container [data-cp-y="22"]{bottom:22%}.scatter-plot .plot-container [data-cp-y="23"]{bottom:23%}.scatter-plot .plot-container [data-cp-y="24"]{bottom:24%}.scatter-plot .plot-container [data-cp-y="25"]{bottom:25%}.scatter-plot .plot-container [data-cp-y="26"]{bottom:26%}.scatter-plot .plot-container [data-cp-y="27"]{bottom:27%}.scatter-plot .plot-container [data-cp-y="28"]{bottom:28%}.scatter-plot .plot-container [data-cp-y="29"]{bottom:29%}.scatter-plot .plot-container [data-cp-y="30"]{bottom:30%}.scatter-plot .plot-container [data-cp-y="31"]{bottom:31%}.scatter-plot .plot-container [data-cp-y="32"]{bottom:32%}.scatter-plot .plot-container [data-cp-y="33"]{bottom:33%}.scatter-plot .plot-container [data-cp-y="34"]{bottom:34%}.scatter-plot .plot-container [data-cp-y="35"]{bottom:35%}.scatter-plot .plot-container [data-cp-y="36"]{bottom:36%}.scatter-plot .plot-container [data-cp-y="37"]{bottom:37%}.scatter-plot .plot-container [data-cp-y="38"]{bottom:38%}.scatter-plot .plot-container [data-cp-y="39"]{bottom:39%}.scatter-plot .plot-container [data-cp-y="40"]{bottom:40%}.scatter-plot .plot-container [data-cp-y="41"]{bottom:41%}.scatter-plot .plot-container [data-cp-y="42"]{bottom:42%}.scatter-plot .plot-container [data-cp-y="43"]{bottom:43%}.scatter-plot .plot-container [data-cp-y="44"]{bottom:44%}.scatter-plot .plot-container [data-cp-y="45"]{bottom:45%}.scatter-plot .plot-container [data-cp-y="46"]{bottom:46%}.scatter-plot .plot-container [data-cp-y="47"]{bottom:47%}.scatter-plot .plot-container [data-cp-y="48"]{bottom:48%}.scatter-plot .plot-container [data-cp-y="49"]{bottom:49%}.scatter-plot .plot-container [data-cp-y="50"]{bottom:50%}.scatter-plot .plot-container [data-cp-y="51"]{bottom:51%}.scatter-plot .plot-container [data-cp-y="52"]{bottom:52%}.scatter-plot .plot-container [data-cp-y="53"]{bottom:53%}.scatter-plot .plot-container [data-cp-y="54"]{bottom:54%}.scatter-plot .plot-container [data-cp-y="55"]{bottom:55%}.scatter-plot .plot-container [data-cp-y="56"]{bottom:56%}.scatter-plot .plot-container [data-cp-y="57"]{bottom:57%}.scatter-plot .plot-container [data-cp-y="58"]{bottom:58%}.scatter-plot .plot-container [data-cp-y="59"]{bottom:59%}.scatter-plot .plot-container [data-cp-y="60"]{bottom:60%}.scatter-plot .plot-container [data-cp-y="61"]{bottom:61%}.scatter-plot .plot-container [data-cp-y="62"]{bottom:62%}.scatter-plot .plot-container [data-cp-y="63"]{bottom:63%}.scatter-plot .plot-container [data-cp-y="64"]{bottom:64%}.scatter-plot .plot-container [data-cp-y="65"]{bottom:65%}.scatter-plot .plot-container [data-cp-y="66"]{bottom:66%}.scatter-plot .plot-container [data-cp-y="67"]{bottom:67%}.scatter-plot .plot-container [data-cp-y="68"]{bottom:68%}.scatter-plot .plot-container [data-cp-y="69"]{bottom:69%}.scatter-plot .plot-container [data-cp-y="70"]{bottom:70%}.scatter-plot .plot-container [data-cp-y="71"]{bottom:71%}.scatter-plot .plot-container [data-cp-y="72"]{bottom:72%}.scatter-plot .plot-container [data-cp-y="73"]{bottom:73%}.scatter-plot .plot-container [data-cp-y="74"]{bottom:74%}.scatter-plot .plot-container [data-cp-y="75"]{bottom:75%}.scatter-plot .plot-container [data-cp-y="76"]{bottom:76%}.scatter-plot .plot-container [data-cp-y="77"]{bottom:77%}.scatter-plot .plot-container [data-cp-y="78"]{bottom:78%}.scatter-plot .plot-container [data-cp-y="79"]{bottom:79%}.scatter-plot .plot-container [data-cp-y="80"]{bottom:80%}.scatter-plot .plot-container [data-cp-y="81"]{bottom:81%}.scatter-plot .plot-container [data-cp-y="82"]{bottom:82%}.scatter-plot .plot-container [data-cp-y="83"]{bottom:83%}.scatter-plot .plot-container [data-cp-y="84"]{bottom:84%}.scatter-plot .plot-container [data-cp-y="85"]{bottom:85%}.scatter-plot .plot-container [data-cp-y="86"]{bottom:86%}.scatter-plot .plot-container [data-cp-y="87"]{bottom:87%}.scatter-plot .plot-container [data-cp-y="88"]{bottom:88%}.scatter-plot .plot-container [data-cp-y="89"]{bottom:89%}.scatter-plot .plot-container [data-cp-y="90"]{bottom:90%}.scatter-plot .plot-container [data-cp-y="91"]{bottom:91%}.scatter-plot .plot-container [data-cp-y="92"]{bottom:92%}.scatter-plot .plot-container [data-cp-y="93"]{bottom:93%}.scatter-plot .plot-container [data-cp-y="94"]{bottom:94%}.scatter-plot .plot-container [data-cp-y="95"]{bottom:95%}.scatter-plot .plot-container [data-cp-y="96"]{bottom:96%}.scatter-plot .plot-container [data-cp-y="97"]{bottom:97%}.scatter-plot .plot-container [data-cp-y="98"]{bottom:98%}.scatter-plot .plot-container [data-cp-y="99"]{bottom:99%}.scatter-plot .plot-container [data-cp-y="100"]{bottom:100%}
\ No newline at end of file
+.bar-chart,.horizontal-chart,.scatter-plot{position:relative;min-width:100px;min-height:100px;padding:0;margin:0}.bar-chart .plot-container{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;text-align:center;top:0;left:0;bottom:0;right:0;padding:0;margin:0;min-height:100px}.bar-chart .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.bar-chart .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scaleY(0);-webkit-transform-origin:center bottom;transform:scaleY(0);transform-origin:center bottom;-webkit-animation-name:bar-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:bar-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.bar-chart .chart-column,.bar-chart [data-cp-size]{-webkit-flex-grow:1;flex-grow:1;-webkit-align-self:flex-end;align-self:flex-end}.bar-chart .chart-column,.horizontal-chart .chart-row,.bar-chart [data-cp-size],.horizontal-chart [data-cp-size]{background:#3498db;color:#fff;list-style:none;border:1px solid #fff;box-sizing:border-box}.horizontal-chart{clear:both}.horizontal-chart .plot-container{flex-direction:row;padding:0;margin:0;width:100%}.horizontal-chart .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.horizontal-chart .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scaleX(0);-webkit-transform-origin:left center;transform:scaleX(0);transform-origin:left center;-webkit-animation-name:horizontal-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:horizontal-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.horizontal-chart .chart-row,.horizontal-chart [data-cp-size]{min-height:1px}.scatter-plot .plot-container{position:absolute;top:12px;left:0;right:12px;bottom:0;margin:0;padding:0}.scatter-plot .plot-container[data-cp-transition="fade"] [data-cp-delay]{opacity:0;-webkit-animation-name:chart-opacity;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:chart-opacity;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.scatter-plot .plot-container[data-cp-transition="grow"] [data-cp-delay]{-webkit-transform:scale(0);-webkit-transform-origin:center center;transform:scale(0);transform-origin:center center;-webkit-animation-name:horizontal-chart-grow;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-name:horizontal-chart-grow;animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards}.scatter-plot .chart-dot,.scatter-plot .chart-dot,.scatter-plot [data-cp-x],.scatter-plot [data-cp-y]{position:absolute;height:0;width:0;list-style:none;overflow:hidden;border:6px solid #3498db;border-radius:100%}.bar-chart .plot-container [data-cp-size="0"]{height:0%}.bar-chart .plot-container [data-cp-size="1"]{height:1%}.bar-chart .plot-container [data-cp-size="2"]{height:2%}.bar-chart .plot-container [data-cp-size="3"]{height:3%}.bar-chart .plot-container [data-cp-size="4"]{height:4%}.bar-chart .plot-container [data-cp-size="5"]{height:5%}.bar-chart .plot-container [data-cp-size="6"]{height:6%}.bar-chart .plot-container [data-cp-size="7"]{height:7%}.bar-chart .plot-container [data-cp-size="8"]{height:8%}.bar-chart .plot-container [data-cp-size="9"]{height:9%}.bar-chart .plot-container [data-cp-size="10"]{height:10%}.bar-chart .plot-container [data-cp-size="11"]{height:11%}.bar-chart .plot-container [data-cp-size="12"]{height:12%}.bar-chart .plot-container [data-cp-size="13"]{height:13%}.bar-chart .plot-container [data-cp-size="14"]{height:14%}.bar-chart .plot-container [data-cp-size="15"]{height:15%}.bar-chart .plot-container [data-cp-size="16"]{height:16%}.bar-chart .plot-container [data-cp-size="17"]{height:17%}.bar-chart .plot-container [data-cp-size="18"]{height:18%}.bar-chart .plot-container [data-cp-size="19"]{height:19%}.bar-chart .plot-container [data-cp-size="20"]{height:20%}.bar-chart .plot-container [data-cp-size="21"]{height:21%}.bar-chart .plot-container [data-cp-size="22"]{height:22%}.bar-chart .plot-container [data-cp-size="23"]{height:23%}.bar-chart .plot-container [data-cp-size="24"]{height:24%}.bar-chart .plot-container [data-cp-size="25"]{height:25%}.bar-chart .plot-container [data-cp-size="26"]{height:26%}.bar-chart .plot-container [data-cp-size="27"]{height:27%}.bar-chart .plot-container [data-cp-size="28"]{height:28%}.bar-chart .plot-container [data-cp-size="29"]{height:29%}.bar-chart .plot-container [data-cp-size="30"]{height:30%}.bar-chart .plot-container [data-cp-size="31"]{height:31%}.bar-chart .plot-container [data-cp-size="32"]{height:32%}.bar-chart .plot-container [data-cp-size="33"]{height:33%}.bar-chart .plot-container [data-cp-size="34"]{height:34%}.bar-chart .plot-container [data-cp-size="35"]{height:35%}.bar-chart .plot-container [data-cp-size="36"]{height:36%}.bar-chart .plot-container [data-cp-size="37"]{height:37%}.bar-chart .plot-container [data-cp-size="38"]{height:38%}.bar-chart .plot-container [data-cp-size="39"]{height:39%}.bar-chart .plot-container [data-cp-size="40"]{height:40%}.bar-chart .plot-container [data-cp-size="41"]{height:41%}.bar-chart .plot-container [data-cp-size="42"]{height:42%}.bar-chart .plot-container [data-cp-size="43"]{height:43%}.bar-chart .plot-container [data-cp-size="44"]{height:44%}.bar-chart .plot-container [data-cp-size="45"]{height:45%}.bar-chart .plot-container [data-cp-size="46"]{height:46%}.bar-chart .plot-container [data-cp-size="47"]{height:47%}.bar-chart .plot-container [data-cp-size="48"]{height:48%}.bar-chart .plot-container [data-cp-size="49"]{height:49%}.bar-chart .plot-container [data-cp-size="50"]{height:50%}.bar-chart .plot-container [data-cp-size="51"]{height:51%}.bar-chart .plot-container [data-cp-size="52"]{height:52%}.bar-chart .plot-container [data-cp-size="53"]{height:53%}.bar-chart .plot-container [data-cp-size="54"]{height:54%}.bar-chart .plot-container [data-cp-size="55"]{height:55%}.bar-chart .plot-container [data-cp-size="56"]{height:56%}.bar-chart .plot-container [data-cp-size="57"]{height:57%}.bar-chart .plot-container [data-cp-size="58"]{height:58%}.bar-chart .plot-container [data-cp-size="59"]{height:59%}.bar-chart .plot-container [data-cp-size="60"]{height:60%}.bar-chart .plot-container [data-cp-size="61"]{height:61%}.bar-chart .plot-container [data-cp-size="62"]{height:62%}.bar-chart .plot-container [data-cp-size="63"]{height:63%}.bar-chart .plot-container [data-cp-size="64"]{height:64%}.bar-chart .plot-container [data-cp-size="65"]{height:65%}.bar-chart .plot-container [data-cp-size="66"]{height:66%}.bar-chart .plot-container [data-cp-size="67"]{height:67%}.bar-chart .plot-container [data-cp-size="68"]{height:68%}.bar-chart .plot-container [data-cp-size="69"]{height:69%}.bar-chart .plot-container [data-cp-size="70"]{height:70%}.bar-chart .plot-container [data-cp-size="71"]{height:71%}.bar-chart .plot-container [data-cp-size="72"]{height:72%}.bar-chart .plot-container [data-cp-size="73"]{height:73%}.bar-chart .plot-container [data-cp-size="74"]{height:74%}.bar-chart .plot-container [data-cp-size="75"]{height:75%}.bar-chart .plot-container [data-cp-size="76"]{height:76%}.bar-chart .plot-container [data-cp-size="77"]{height:77%}.bar-chart .plot-container [data-cp-size="78"]{height:78%}.bar-chart .plot-container [data-cp-size="79"]{height:79%}.bar-chart .plot-container [data-cp-size="80"]{height:80%}.bar-chart .plot-container [data-cp-size="81"]{height:81%}.bar-chart .plot-container [data-cp-size="82"]{height:82%}.bar-chart .plot-container [data-cp-size="83"]{height:83%}.bar-chart .plot-container [data-cp-size="84"]{height:84%}.bar-chart .plot-container [data-cp-size="85"]{height:85%}.bar-chart .plot-container [data-cp-size="86"]{height:86%}.bar-chart .plot-container [data-cp-size="87"]{height:87%}.bar-chart .plot-container [data-cp-size="88"]{height:88%}.bar-chart .plot-container [data-cp-size="89"]{height:89%}.bar-chart .plot-container [data-cp-size="90"]{height:90%}.bar-chart .plot-container [data-cp-size="91"]{height:91%}.bar-chart .plot-container [data-cp-size="92"]{height:92%}.bar-chart .plot-container [data-cp-size="93"]{height:93%}.bar-chart .plot-container [data-cp-size="94"]{height:94%}.bar-chart .plot-container [data-cp-size="95"]{height:95%}.bar-chart .plot-container [data-cp-size="96"]{height:96%}.bar-chart .plot-container [data-cp-size="97"]{height:97%}.bar-chart .plot-container [data-cp-size="98"]{height:98%}.bar-chart .plot-container [data-cp-size="99"]{height:99%}.bar-chart .plot-container [data-cp-size="100"]{height:100%}.bar-chart .plot-container [data-cp-delay="50"]{-webkit-animation-delay:5s;animation-delay:5s}.bar-chart .plot-container [data-cp-delay="49"]{-webkit-animation-delay:4.9s;animation-delay:4.9s}.bar-chart .plot-container [data-cp-delay="48"]{-webkit-animation-delay:4.8s;animation-delay:4.8s}.bar-chart .plot-container [data-cp-delay="47"]{-webkit-animation-delay:4.7s;animation-delay:4.7s}.bar-chart .plot-container [data-cp-delay="46"]{-webkit-animation-delay:4.6s;animation-delay:4.6s}.bar-chart .plot-container [data-cp-delay="45"]{-webkit-animation-delay:4.5s;animation-delay:4.5s}.bar-chart .plot-container [data-cp-delay="44"]{-webkit-animation-delay:4.4s;animation-delay:4.4s}.bar-chart .plot-container [data-cp-delay="43"]{-webkit-animation-delay:4.3s;animation-delay:4.3s}.bar-chart .plot-container [data-cp-delay="42"]{-webkit-animation-delay:4.2s;animation-delay:4.2s}.bar-chart .plot-container [data-cp-delay="41"]{-webkit-animation-delay:4.1s;animation-delay:4.1s}.bar-chart .plot-container [data-cp-delay="40"]{-webkit-animation-delay:4s;animation-delay:4s}.bar-chart .plot-container [data-cp-delay="39"]{-webkit-animation-delay:3.9s;animation-delay:3.9s}.bar-chart .plot-container [data-cp-delay="38"]{-webkit-animation-delay:3.8s;animation-delay:3.8s}.bar-chart .plot-container [data-cp-delay="37"]{-webkit-animation-delay:3.7s;animation-delay:3.7s}.bar-chart .plot-container [data-cp-delay="36"]{-webkit-animation-delay:3.6s;animation-delay:3.6s}.bar-chart .plot-container [data-cp-delay="35"]{-webkit-animation-delay:3.5s;animation-delay:3.5s}.bar-chart .plot-container [data-cp-delay="34"]{-webkit-animation-delay:3.4s;animation-delay:3.4s}.bar-chart .plot-container [data-cp-delay="33"]{-webkit-animation-delay:3.3s;animation-delay:3.3s}.bar-chart .plot-container [data-cp-delay="32"]{-webkit-animation-delay:3.2s;animation-delay:3.2s}.bar-chart .plot-container [data-cp-delay="31"]{-webkit-animation-delay:3.1s;animation-delay:3.1s}.bar-chart .plot-container [data-cp-delay="30"]{-webkit-animation-delay:3s;animation-delay:3s}.bar-chart .plot-container [data-cp-delay="29"]{-webkit-animation-delay:2.9s;animation-delay:2.9s}.bar-chart .plot-container [data-cp-delay="28"]{-webkit-animation-delay:2.8s;animation-delay:2.8s}.bar-chart .plot-container [data-cp-delay="27"]{-webkit-animation-delay:2.7s;animation-delay:2.7s}.bar-chart .plot-container [data-cp-delay="26"]{-webkit-animation-delay:2.6s;animation-delay:2.6s}.bar-chart .plot-container [data-cp-delay="25"]{-webkit-animation-delay:2.5s;animation-delay:2.5s}.bar-chart .plot-container [data-cp-delay="24"]{-webkit-animation-delay:2.4s;animation-delay:2.4s}.bar-chart .plot-container [data-cp-delay="23"]{-webkit-animation-delay:2.3s;animation-delay:2.3s}.bar-chart .plot-container [data-cp-delay="22"]{-webkit-animation-delay:2.2s;animation-delay:2.2s}.bar-chart .plot-container [data-cp-delay="21"]{-webkit-animation-delay:2.1s;animation-delay:2.1s}.bar-chart .plot-container [data-cp-delay="20"]{-webkit-animation-delay:2s;animation-delay:2s}.bar-chart .plot-container [data-cp-delay="19"]{-webkit-animation-delay:1.9s;animation-delay:1.9s}.bar-chart .plot-container [data-cp-delay="18"]{-webkit-animation-delay:1.8s;animation-delay:1.8s}.bar-chart .plot-container [data-cp-delay="17"]{-webkit-animation-delay:1.7s;animation-delay:1.7s}.bar-chart .plot-container [data-cp-delay="16"]{-webkit-animation-delay:1.6s;animation-delay:1.6s}.bar-chart .plot-container [data-cp-delay="15"]{-webkit-animation-delay:1.5s;animation-delay:1.5s}.bar-chart .plot-container [data-cp-delay="14"]{-webkit-animation-delay:1.4s;animation-delay:1.4s}.bar-chart .plot-container [data-cp-delay="13"]{-webkit-animation-delay:1.3s;animation-delay:1.3s}.bar-chart .plot-container [data-cp-delay="12"]{-webkit-animation-delay:1.2s;animation-delay:1.2s}.bar-chart .plot-container [data-cp-delay="11"]{-webkit-animation-delay:1.1s;animation-delay:1.1s}.bar-chart .plot-container [data-cp-delay="10"]{-webkit-animation-delay:1s;animation-delay:1s}.bar-chart .plot-container [data-cp-delay="9"]{-webkit-animation-delay:.9s;animation-delay:.9s}.bar-chart .plot-container [data-cp-delay="8"]{-webkit-animation-delay:.8s;animation-delay:.8s}.bar-chart .plot-container [data-cp-delay="7"]{-webkit-animation-delay:.7s;animation-delay:.7s}.bar-chart .plot-container [data-cp-delay="6"]{-webkit-animation-delay:.6s;animation-delay:.6s}.bar-chart .plot-container [data-cp-delay="5"]{-webkit-animation-delay:.5s;animation-delay:.5s}.bar-chart .plot-container [data-cp-delay="4"]{-webkit-animation-delay:.4s;animation-delay:.4s}.bar-chart .plot-container [data-cp-delay="3"]{-webkit-animation-delay:.3s;animation-delay:.3s}.bar-chart .plot-container [data-cp-delay="2"]{-webkit-animation-delay:.2s;animation-delay:.2s}.bar-chart .plot-container [data-cp-delay="1"]{-webkit-animation-delay:.1s;animation-delay:.1s}.horizontal-chart .plot-container [data-cp-size="0"]{width:0%}.horizontal-chart .plot-container [data-cp-size="1"]{width:1%}.horizontal-chart .plot-container [data-cp-size="2"]{width:2%}.horizontal-chart .plot-container [data-cp-size="3"]{width:3%}.horizontal-chart .plot-container [data-cp-size="4"]{width:4%}.horizontal-chart .plot-container [data-cp-size="5"]{width:5%}.horizontal-chart .plot-container [data-cp-size="6"]{width:6%}.horizontal-chart .plot-container [data-cp-size="7"]{width:7%}.horizontal-chart .plot-container [data-cp-size="8"]{width:8%}.horizontal-chart .plot-container [data-cp-size="9"]{width:9%}.horizontal-chart .plot-container [data-cp-size="10"]{width:10%}.horizontal-chart .plot-container [data-cp-size="11"]{width:11%}.horizontal-chart .plot-container [data-cp-size="12"]{width:12%}.horizontal-chart .plot-container [data-cp-size="13"]{width:13%}.horizontal-chart .plot-container [data-cp-size="14"]{width:14%}.horizontal-chart .plot-container [data-cp-size="15"]{width:15%}.horizontal-chart .plot-container [data-cp-size="16"]{width:16%}.horizontal-chart .plot-container [data-cp-size="17"]{width:17%}.horizontal-chart .plot-container [data-cp-size="18"]{width:18%}.horizontal-chart .plot-container [data-cp-size="19"]{width:19%}.horizontal-chart .plot-container [data-cp-size="20"]{width:20%}.horizontal-chart .plot-container [data-cp-size="21"]{width:21%}.horizontal-chart .plot-container [data-cp-size="22"]{width:22%}.horizontal-chart .plot-container [data-cp-size="23"]{width:23%}.horizontal-chart .plot-container [data-cp-size="24"]{width:24%}.horizontal-chart .plot-container [data-cp-size="25"]{width:25%}.horizontal-chart .plot-container [data-cp-size="26"]{width:26%}.horizontal-chart .plot-container [data-cp-size="27"]{width:27%}.horizontal-chart .plot-container [data-cp-size="28"]{width:28%}.horizontal-chart .plot-container [data-cp-size="29"]{width:29%}.horizontal-chart .plot-container [data-cp-size="30"]{width:30%}.horizontal-chart .plot-container [data-cp-size="31"]{width:31%}.horizontal-chart .plot-container [data-cp-size="32"]{width:32%}.horizontal-chart .plot-container [data-cp-size="33"]{width:33%}.horizontal-chart .plot-container [data-cp-size="34"]{width:34%}.horizontal-chart .plot-container [data-cp-size="35"]{width:35%}.horizontal-chart .plot-container [data-cp-size="36"]{width:36%}.horizontal-chart .plot-container [data-cp-size="37"]{width:37%}.horizontal-chart .plot-container [data-cp-size="38"]{width:38%}.horizontal-chart .plot-container [data-cp-size="39"]{width:39%}.horizontal-chart .plot-container [data-cp-size="40"]{width:40%}.horizontal-chart .plot-container [data-cp-size="41"]{width:41%}.horizontal-chart .plot-container [data-cp-size="42"]{width:42%}.horizontal-chart .plot-container [data-cp-size="43"]{width:43%}.horizontal-chart .plot-container [data-cp-size="44"]{width:44%}.horizontal-chart .plot-container [data-cp-size="45"]{width:45%}.horizontal-chart .plot-container [data-cp-size="46"]{width:46%}.horizontal-chart .plot-container [data-cp-size="47"]{width:47%}.horizontal-chart .plot-container [data-cp-size="48"]{width:48%}.horizontal-chart .plot-container [data-cp-size="49"]{width:49%}.horizontal-chart .plot-container [data-cp-size="50"]{width:50%}.horizontal-chart .plot-container [data-cp-size="51"]{width:51%}.horizontal-chart .plot-container [data-cp-size="52"]{width:52%}.horizontal-chart .plot-container [data-cp-size="53"]{width:53%}.horizontal-chart .plot-container [data-cp-size="54"]{width:54%}.horizontal-chart .plot-container [data-cp-size="55"]{width:55%}.horizontal-chart .plot-container [data-cp-size="56"]{width:56%}.horizontal-chart .plot-container [data-cp-size="57"]{width:57%}.horizontal-chart .plot-container [data-cp-size="58"]{width:58%}.horizontal-chart .plot-container [data-cp-size="59"]{width:59%}.horizontal-chart .plot-container [data-cp-size="60"]{width:60%}.horizontal-chart .plot-container [data-cp-size="61"]{width:61%}.horizontal-chart .plot-container [data-cp-size="62"]{width:62%}.horizontal-chart .plot-container [data-cp-size="63"]{width:63%}.horizontal-chart .plot-container [data-cp-size="64"]{width:64%}.horizontal-chart .plot-container [data-cp-size="65"]{width:65%}.horizontal-chart .plot-container [data-cp-size="66"]{width:66%}.horizontal-chart .plot-container [data-cp-size="67"]{width:67%}.horizontal-chart .plot-container [data-cp-size="68"]{width:68%}.horizontal-chart .plot-container [data-cp-size="69"]{width:69%}.horizontal-chart .plot-container [data-cp-size="70"]{width:70%}.horizontal-chart .plot-container [data-cp-size="71"]{width:71%}.horizontal-chart .plot-container [data-cp-size="72"]{width:72%}.horizontal-chart .plot-container [data-cp-size="73"]{width:73%}.horizontal-chart .plot-container [data-cp-size="74"]{width:74%}.horizontal-chart .plot-container [data-cp-size="75"]{width:75%}.horizontal-chart .plot-container [data-cp-size="76"]{width:76%}.horizontal-chart .plot-container [data-cp-size="77"]{width:77%}.horizontal-chart .plot-container [data-cp-size="78"]{width:78%}.horizontal-chart .plot-container [data-cp-size="79"]{width:79%}.horizontal-chart .plot-container [data-cp-size="80"]{width:80%}.horizontal-chart .plot-container [data-cp-size="81"]{width:81%}.horizontal-chart .plot-container [data-cp-size="82"]{width:82%}.horizontal-chart .plot-container [data-cp-size="83"]{width:83%}.horizontal-chart .plot-container [data-cp-size="84"]{width:84%}.horizontal-chart .plot-container [data-cp-size="85"]{width:85%}.horizontal-chart .plot-container [data-cp-size="86"]{width:86%}.horizontal-chart .plot-container [data-cp-size="87"]{width:87%}.horizontal-chart .plot-container [data-cp-size="88"]{width:88%}.horizontal-chart .plot-container [data-cp-size="89"]{width:89%}.horizontal-chart .plot-container [data-cp-size="90"]{width:90%}.horizontal-chart .plot-container [data-cp-size="91"]{width:91%}.horizontal-chart .plot-container [data-cp-size="92"]{width:92%}.horizontal-chart .plot-container [data-cp-size="93"]{width:93%}.horizontal-chart .plot-container [data-cp-size="94"]{width:94%}.horizontal-chart .plot-container [data-cp-size="95"]{width:95%}.horizontal-chart .plot-container [data-cp-size="96"]{width:96%}.horizontal-chart .plot-container [data-cp-size="97"]{width:97%}.horizontal-chart .plot-container [data-cp-size="98"]{width:98%}.horizontal-chart .plot-container [data-cp-size="99"]{width:99%}.horizontal-chart .plot-container [data-cp-size="100"]{width:100%}.horizontal-chart .plot-container [data-cp-delay="50"]{-webkit-animation-delay:5s;animation-delay:5s}.horizontal-chart .plot-container [data-cp-delay="49"]{-webkit-animation-delay:4.9s;animation-delay:4.9s}.horizontal-chart .plot-container [data-cp-delay="48"]{-webkit-animation-delay:4.8s;animation-delay:4.8s}.horizontal-chart .plot-container [data-cp-delay="47"]{-webkit-animation-delay:4.7s;animation-delay:4.7s}.horizontal-chart .plot-container [data-cp-delay="46"]{-webkit-animation-delay:4.6s;animation-delay:4.6s}.horizontal-chart .plot-container [data-cp-delay="45"]{-webkit-animation-delay:4.5s;animation-delay:4.5s}.horizontal-chart .plot-container [data-cp-delay="44"]{-webkit-animation-delay:4.4s;animation-delay:4.4s}.horizontal-chart .plot-container [data-cp-delay="43"]{-webkit-animation-delay:4.3s;animation-delay:4.3s}.horizontal-chart .plot-container [data-cp-delay="42"]{-webkit-animation-delay:4.2s;animation-delay:4.2s}.horizontal-chart .plot-container [data-cp-delay="41"]{-webkit-animation-delay:4.1s;animation-delay:4.1s}.horizontal-chart .plot-container [data-cp-delay="40"]{-webkit-animation-delay:4s;animation-delay:4s}.horizontal-chart .plot-container [data-cp-delay="39"]{-webkit-animation-delay:3.9s;animation-delay:3.9s}.horizontal-chart .plot-container [data-cp-delay="38"]{-webkit-animation-delay:3.8s;animation-delay:3.8s}.horizontal-chart .plot-container [data-cp-delay="37"]{-webkit-animation-delay:3.7s;animation-delay:3.7s}.horizontal-chart .plot-container [data-cp-delay="36"]{-webkit-animation-delay:3.6s;animation-delay:3.6s}.horizontal-chart .plot-container [data-cp-delay="35"]{-webkit-animation-delay:3.5s;animation-delay:3.5s}.horizontal-chart .plot-container [data-cp-delay="34"]{-webkit-animation-delay:3.4s;animation-delay:3.4s}.horizontal-chart .plot-container [data-cp-delay="33"]{-webkit-animation-delay:3.3s;animation-delay:3.3s}.horizontal-chart .plot-container [data-cp-delay="32"]{-webkit-animation-delay:3.2s;animation-delay:3.2s}.horizontal-chart .plot-container [data-cp-delay="31"]{-webkit-animation-delay:3.1s;animation-delay:3.1s}.horizontal-chart .plot-container [data-cp-delay="30"]{-webkit-animation-delay:3s;animation-delay:3s}.horizontal-chart .plot-container [data-cp-delay="29"]{-webkit-animation-delay:2.9s;animation-delay:2.9s}.horizontal-chart .plot-container [data-cp-delay="28"]{-webkit-animation-delay:2.8s;animation-delay:2.8s}.horizontal-chart .plot-container [data-cp-delay="27"]{-webkit-animation-delay:2.7s;animation-delay:2.7s}.horizontal-chart .plot-container [data-cp-delay="26"]{-webkit-animation-delay:2.6s;animation-delay:2.6s}.horizontal-chart .plot-container [data-cp-delay="25"]{-webkit-animation-delay:2.5s;animation-delay:2.5s}.horizontal-chart .plot-container [data-cp-delay="24"]{-webkit-animation-delay:2.4s;animation-delay:2.4s}.horizontal-chart .plot-container [data-cp-delay="23"]{-webkit-animation-delay:2.3s;animation-delay:2.3s}.horizontal-chart .plot-container [data-cp-delay="22"]{-webkit-animation-delay:2.2s;animation-delay:2.2s}.horizontal-chart .plot-container [data-cp-delay="21"]{-webkit-animation-delay:2.1s;animation-delay:2.1s}.horizontal-chart .plot-container [data-cp-delay="20"]{-webkit-animation-delay:2s;animation-delay:2s}.horizontal-chart .plot-container [data-cp-delay="19"]{-webkit-animation-delay:1.9s;animation-delay:1.9s}.horizontal-chart .plot-container [data-cp-delay="18"]{-webkit-animation-delay:1.8s;animation-delay:1.8s}.horizontal-chart .plot-container [data-cp-delay="17"]{-webkit-animation-delay:1.7s;animation-delay:1.7s}.horizontal-chart .plot-container [data-cp-delay="16"]{-webkit-animation-delay:1.6s;animation-delay:1.6s}.horizontal-chart .plot-container [data-cp-delay="15"]{-webkit-animation-delay:1.5s;animation-delay:1.5s}.horizontal-chart .plot-container [data-cp-delay="14"]{-webkit-animation-delay:1.4s;animation-delay:1.4s}.horizontal-chart .plot-container [data-cp-delay="13"]{-webkit-animation-delay:1.3s;animation-delay:1.3s}.horizontal-chart .plot-container [data-cp-delay="12"]{-webkit-animation-delay:1.2s;animation-delay:1.2s}.horizontal-chart .plot-container [data-cp-delay="11"]{-webkit-animation-delay:1.1s;animation-delay:1.1s}.horizontal-chart .plot-container [data-cp-delay="10"]{-webkit-animation-delay:1s;animation-delay:1s}.horizontal-chart .plot-container [data-cp-delay="9"]{-webkit-animation-delay:.9s;animation-delay:.9s}.horizontal-chart .plot-container [data-cp-delay="8"]{-webkit-animation-delay:.8s;animation-delay:.8s}.horizontal-chart .plot-container [data-cp-delay="7"]{-webkit-animation-delay:.7s;animation-delay:.7s}.horizontal-chart .plot-container [data-cp-delay="6"]{-webkit-animation-delay:.6s;animation-delay:.6s}.horizontal-chart .plot-container [data-cp-delay="5"]{-webkit-animation-delay:.5s;animation-delay:.5s}.horizontal-chart .plot-container [data-cp-delay="4"]{-webkit-animation-delay:.4s;animation-delay:.4s}.horizontal-chart .plot-container [data-cp-delay="3"]{-webkit-animation-delay:.3s;animation-delay:.3s}.horizontal-chart .plot-container [data-cp-delay="2"]{-webkit-animation-delay:.2s;animation-delay:.2s}.horizontal-chart .plot-container [data-cp-delay="1"]{-webkit-animation-delay:.1s;animation-delay:.1s}.scatter-plot .plot-container [data-cp-x="0"]{left:0%}.scatter-plot .plot-container [data-cp-x="1"]{left:1%}.scatter-plot .plot-container [data-cp-x="2"]{left:2%}.scatter-plot .plot-container [data-cp-x="3"]{left:3%}.scatter-plot .plot-container [data-cp-x="4"]{left:4%}.scatter-plot .plot-container [data-cp-x="5"]{left:5%}.scatter-plot .plot-container [data-cp-x="6"]{left:6%}.scatter-plot .plot-container [data-cp-x="7"]{left:7%}.scatter-plot .plot-container [data-cp-x="8"]{left:8%}.scatter-plot .plot-container [data-cp-x="9"]{left:9%}.scatter-plot .plot-container [data-cp-x="10"]{left:10%}.scatter-plot .plot-container [data-cp-x="11"]{left:11%}.scatter-plot .plot-container [data-cp-x="12"]{left:12%}.scatter-plot .plot-container [data-cp-x="13"]{left:13%}.scatter-plot .plot-container [data-cp-x="14"]{left:14%}.scatter-plot .plot-container [data-cp-x="15"]{left:15%}.scatter-plot .plot-container [data-cp-x="16"]{left:16%}.scatter-plot .plot-container [data-cp-x="17"]{left:17%}.scatter-plot .plot-container [data-cp-x="18"]{left:18%}.scatter-plot .plot-container [data-cp-x="19"]{left:19%}.scatter-plot .plot-container [data-cp-x="20"]{left:20%}.scatter-plot .plot-container [data-cp-x="21"]{left:21%}.scatter-plot .plot-container [data-cp-x="22"]{left:22%}.scatter-plot .plot-container [data-cp-x="23"]{left:23%}.scatter-plot .plot-container [data-cp-x="24"]{left:24%}.scatter-plot .plot-container [data-cp-x="25"]{left:25%}.scatter-plot .plot-container [data-cp-x="26"]{left:26%}.scatter-plot .plot-container [data-cp-x="27"]{left:27%}.scatter-plot .plot-container [data-cp-x="28"]{left:28%}.scatter-plot .plot-container [data-cp-x="29"]{left:29%}.scatter-plot .plot-container [data-cp-x="30"]{left:30%}.scatter-plot .plot-container [data-cp-x="31"]{left:31%}.scatter-plot .plot-container [data-cp-x="32"]{left:32%}.scatter-plot .plot-container [data-cp-x="33"]{left:33%}.scatter-plot .plot-container [data-cp-x="34"]{left:34%}.scatter-plot .plot-container [data-cp-x="35"]{left:35%}.scatter-plot .plot-container [data-cp-x="36"]{left:36%}.scatter-plot .plot-container [data-cp-x="37"]{left:37%}.scatter-plot .plot-container [data-cp-x="38"]{left:38%}.scatter-plot .plot-container [data-cp-x="39"]{left:39%}.scatter-plot .plot-container [data-cp-x="40"]{left:40%}.scatter-plot .plot-container [data-cp-x="41"]{left:41%}.scatter-plot .plot-container [data-cp-x="42"]{left:42%}.scatter-plot .plot-container [data-cp-x="43"]{left:43%}.scatter-plot .plot-container [data-cp-x="44"]{left:44%}.scatter-plot .plot-container [data-cp-x="45"]{left:45%}.scatter-plot .plot-container [data-cp-x="46"]{left:46%}.scatter-plot .plot-container [data-cp-x="47"]{left:47%}.scatter-plot .plot-container [data-cp-x="48"]{left:48%}.scatter-plot .plot-container [data-cp-x="49"]{left:49%}.scatter-plot .plot-container [data-cp-x="50"]{left:50%}.scatter-plot .plot-container [data-cp-x="51"]{left:51%}.scatter-plot .plot-container [data-cp-x="52"]{left:52%}.scatter-plot .plot-container [data-cp-x="53"]{left:53%}.scatter-plot .plot-container [data-cp-x="54"]{left:54%}.scatter-plot .plot-container [data-cp-x="55"]{left:55%}.scatter-plot .plot-container [data-cp-x="56"]{left:56%}.scatter-plot .plot-container [data-cp-x="57"]{left:57%}.scatter-plot .plot-container [data-cp-x="58"]{left:58%}.scatter-plot .plot-container [data-cp-x="59"]{left:59%}.scatter-plot .plot-container [data-cp-x="60"]{left:60%}.scatter-plot .plot-container [data-cp-x="61"]{left:61%}.scatter-plot .plot-container [data-cp-x="62"]{left:62%}.scatter-plot .plot-container [data-cp-x="63"]{left:63%}.scatter-plot .plot-container [data-cp-x="64"]{left:64%}.scatter-plot .plot-container [data-cp-x="65"]{left:65%}.scatter-plot .plot-container [data-cp-x="66"]{left:66%}.scatter-plot .plot-container [data-cp-x="67"]{left:67%}.scatter-plot .plot-container [data-cp-x="68"]{left:68%}.scatter-plot .plot-container [data-cp-x="69"]{left:69%}.scatter-plot .plot-container [data-cp-x="70"]{left:70%}.scatter-plot .plot-container [data-cp-x="71"]{left:71%}.scatter-plot .plot-container [data-cp-x="72"]{left:72%}.scatter-plot .plot-container [data-cp-x="73"]{left:73%}.scatter-plot .plot-container [data-cp-x="74"]{left:74%}.scatter-plot .plot-container [data-cp-x="75"]{left:75%}.scatter-plot .plot-container [data-cp-x="76"]{left:76%}.scatter-plot .plot-container [data-cp-x="77"]{left:77%}.scatter-plot .plot-container [data-cp-x="78"]{left:78%}.scatter-plot .plot-container [data-cp-x="79"]{left:79%}.scatter-plot .plot-container [data-cp-x="80"]{left:80%}.scatter-plot .plot-container [data-cp-x="81"]{left:81%}.scatter-plot .plot-container [data-cp-x="82"]{left:82%}.scatter-plot .plot-container [data-cp-x="83"]{left:83%}.scatter-plot .plot-container [data-cp-x="84"]{left:84%}.scatter-plot .plot-container [data-cp-x="85"]{left:85%}.scatter-plot .plot-container [data-cp-x="86"]{left:86%}.scatter-plot .plot-container [data-cp-x="87"]{left:87%}.scatter-plot .plot-container [data-cp-x="88"]{left:88%}.scatter-plot .plot-container [data-cp-x="89"]{left:89%}.scatter-plot .plot-container [data-cp-x="90"]{left:90%}.scatter-plot .plot-container [data-cp-x="91"]{left:91%}.scatter-plot .plot-container [data-cp-x="92"]{left:92%}.scatter-plot .plot-container [data-cp-x="93"]{left:93%}.scatter-plot .plot-container [data-cp-x="94"]{left:94%}.scatter-plot .plot-container [data-cp-x="95"]{left:95%}.scatter-plot .plot-container [data-cp-x="96"]{left:96%}.scatter-plot .plot-container [data-cp-x="97"]{left:97%}.scatter-plot .plot-container [data-cp-x="98"]{left:98%}.scatter-plot .plot-container [data-cp-x="99"]{left:99%}.scatter-plot .plot-container [data-cp-x="100"]{left:100%}.scatter-plot .plot-container [data-cp-y="0"]{bottom:0%}.scatter-plot .plot-container [data-cp-y="1"]{bottom:1%}.scatter-plot .plot-container [data-cp-y="2"]{bottom:2%}.scatter-plot .plot-container [data-cp-y="3"]{bottom:3%}.scatter-plot .plot-container [data-cp-y="4"]{bottom:4%}.scatter-plot .plot-container [data-cp-y="5"]{bottom:5%}.scatter-plot .plot-container [data-cp-y="6"]{bottom:6%}.scatter-plot .plot-container [data-cp-y="7"]{bottom:7%}.scatter-plot .plot-container [data-cp-y="8"]{bottom:8%}.scatter-plot .plot-container [data-cp-y="9"]{bottom:9%}.scatter-plot .plot-container [data-cp-y="10"]{bottom:10%}.scatter-plot .plot-container [data-cp-y="11"]{bottom:11%}.scatter-plot .plot-container [data-cp-y="12"]{bottom:12%}.scatter-plot .plot-container [data-cp-y="13"]{bottom:13%}.scatter-plot .plot-container [data-cp-y="14"]{bottom:14%}.scatter-plot .plot-container [data-cp-y="15"]{bottom:15%}.scatter-plot .plot-container [data-cp-y="16"]{bottom:16%}.scatter-plot .plot-container [data-cp-y="17"]{bottom:17%}.scatter-plot .plot-container [data-cp-y="18"]{bottom:18%}.scatter-plot .plot-container [data-cp-y="19"]{bottom:19%}.scatter-plot .plot-container [data-cp-y="20"]{bottom:20%}.scatter-plot .plot-container [data-cp-y="21"]{bottom:21%}.scatter-plot .plot-container [data-cp-y="22"]{bottom:22%}.scatter-plot .plot-container [data-cp-y="23"]{bottom:23%}.scatter-plot .plot-container [data-cp-y="24"]{bottom:24%}.scatter-plot .plot-container [data-cp-y="25"]{bottom:25%}.scatter-plot .plot-container [data-cp-y="26"]{bottom:26%}.scatter-plot .plot-container [data-cp-y="27"]{bottom:27%}.scatter-plot .plot-container [data-cp-y="28"]{bottom:28%}.scatter-plot .plot-container [data-cp-y="29"]{bottom:29%}.scatter-plot .plot-container [data-cp-y="30"]{bottom:30%}.scatter-plot .plot-container [data-cp-y="31"]{bottom:31%}.scatter-plot .plot-container [data-cp-y="32"]{bottom:32%}.scatter-plot .plot-container [data-cp-y="33"]{bottom:33%}.scatter-plot .plot-container [data-cp-y="34"]{bottom:34%}.scatter-plot .plot-container [data-cp-y="35"]{bottom:35%}.scatter-plot .plot-container [data-cp-y="36"]{bottom:36%}.scatter-plot .plot-container [data-cp-y="37"]{bottom:37%}.scatter-plot .plot-container [data-cp-y="38"]{bottom:38%}.scatter-plot .plot-container [data-cp-y="39"]{bottom:39%}.scatter-plot .plot-container [data-cp-y="40"]{bottom:40%}.scatter-plot .plot-container [data-cp-y="41"]{bottom:41%}.scatter-plot .plot-container [data-cp-y="42"]{bottom:42%}.scatter-plot .plot-container [data-cp-y="43"]{bottom:43%}.scatter-plot .plot-container [data-cp-y="44"]{bottom:44%}.scatter-plot .plot-container [data-cp-y="45"]{bottom:45%}.scatter-plot .plot-container [data-cp-y="46"]{bottom:46%}.scatter-plot .plot-container [data-cp-y="47"]{bottom:47%}.scatter-plot .plot-container [data-cp-y="48"]{bottom:48%}.scatter-plot .plot-container [data-cp-y="49"]{bottom:49%}.scatter-plot .plot-container [data-cp-y="50"]{bottom:50%}.scatter-plot .plot-container [data-cp-y="51"]{bottom:51%}.scatter-plot .plot-container [data-cp-y="52"]{bottom:52%}.scatter-plot .plot-container [data-cp-y="53"]{bottom:53%}.scatter-plot .plot-container [data-cp-y="54"]{bottom:54%}.scatter-plot .plot-container [data-cp-y="55"]{bottom:55%}.scatter-plot .plot-container [data-cp-y="56"]{bottom:56%}.scatter-plot .plot-container [data-cp-y="57"]{bottom:57%}.scatter-plot .plot-container [data-cp-y="58"]{bottom:58%}.scatter-plot .plot-container [data-cp-y="59"]{bottom:59%}.scatter-plot .plot-container [data-cp-y="60"]{bottom:60%}.scatter-plot .plot-container [data-cp-y="61"]{bottom:61%}.scatter-plot .plot-container [data-cp-y="62"]{bottom:62%}.scatter-plot .plot-container [data-cp-y="63"]{bottom:63%}.scatter-plot .plot-container [data-cp-y="64"]{bottom:64%}.scatter-plot .plot-container [data-cp-y="65"]{bottom:65%}.scatter-plot .plot-container [data-cp-y="66"]{bottom:66%}.scatter-plot .plot-container [data-cp-y="67"]{bottom:67%}.scatter-plot .plot-container [data-cp-y="68"]{bottom:68%}.scatter-plot .plot-container [data-cp-y="69"]{bottom:69%}.scatter-plot .plot-container [data-cp-y="70"]{bottom:70%}.scatter-plot .plot-container [data-cp-y="71"]{bottom:71%}.scatter-plot .plot-container [data-cp-y="72"]{bottom:72%}.scatter-plot .plot-container [data-cp-y="73"]{bottom:73%}.scatter-plot .plot-container [data-cp-y="74"]{bottom:74%}.scatter-plot .plot-container [data-cp-y="75"]{bottom:75%}.scatter-plot .plot-container [data-cp-y="76"]{bottom:76%}.scatter-plot .plot-container [data-cp-y="77"]{bottom:77%}.scatter-plot .plot-container [data-cp-y="78"]{bottom:78%}.scatter-plot .plot-container [data-cp-y="79"]{bottom:79%}.scatter-plot .plot-container [data-cp-y="80"]{bottom:80%}.scatter-plot .plot-container [data-cp-y="81"]{bottom:81%}.scatter-plot .plot-container [data-cp-y="82"]{bottom:82%}.scatter-plot .plot-container [data-cp-y="83"]{bottom:83%}.scatter-plot .plot-container [data-cp-y="84"]{bottom:84%}.scatter-plot .plot-container [data-cp-y="85"]{bottom:85%}.scatter-plot .plot-container [data-cp-y="86"]{bottom:86%}.scatter-plot .plot-container [data-cp-y="87"]{bottom:87%}.scatter-plot .plot-container [data-cp-y="88"]{bottom:88%}.scatter-plot .plot-container [data-cp-y="89"]{bottom:89%}.scatter-plot .plot-container [data-cp-y="90"]{bottom:90%}.scatter-plot .plot-container [data-cp-y="91"]{bottom:91%}.scatter-plot .plot-container [data-cp-y="92"]{bottom:92%}.scatter-plot .plot-container [data-cp-y="93"]{bottom:93%}.scatter-plot .plot-container [data-cp-y="94"]{bottom:94%}.scatter-plot .plot-container [data-cp-y="95"]{bottom:95%}.scatter-plot .plot-container [data-cp-y="96"]{bottom:96%}.scatter-plot .plot-container [data-cp-y="97"]{bottom:97%}.scatter-plot .plot-container [data-cp-y="98"]{bottom:98%}.scatter-plot .plot-container [data-cp-y="99"]{bottom:99%}.scatter-plot .plot-container [data-cp-y="100"]{bottom:100%}.scatter-plot .plot-container [data-cp-delay="50"]{-webkit-animation-delay:5s;animation-delay:5s}.scatter-plot .plot-container [data-cp-delay="49"]{-webkit-animation-delay:4.9s;animation-delay:4.9s}.scatter-plot .plot-container [data-cp-delay="48"]{-webkit-animation-delay:4.8s;animation-delay:4.8s}.scatter-plot .plot-container [data-cp-delay="47"]{-webkit-animation-delay:4.7s;animation-delay:4.7s}.scatter-plot .plot-container [data-cp-delay="46"]{-webkit-animation-delay:4.6s;animation-delay:4.6s}.scatter-plot .plot-container [data-cp-delay="45"]{-webkit-animation-delay:4.5s;animation-delay:4.5s}.scatter-plot .plot-container [data-cp-delay="44"]{-webkit-animation-delay:4.4s;animation-delay:4.4s}.scatter-plot .plot-container [data-cp-delay="43"]{-webkit-animation-delay:4.3s;animation-delay:4.3s}.scatter-plot .plot-container [data-cp-delay="42"]{-webkit-animation-delay:4.2s;animation-delay:4.2s}.scatter-plot .plot-container [data-cp-delay="41"]{-webkit-animation-delay:4.1s;animation-delay:4.1s}.scatter-plot .plot-container [data-cp-delay="40"]{-webkit-animation-delay:4s;animation-delay:4s}.scatter-plot .plot-container [data-cp-delay="39"]{-webkit-animation-delay:3.9s;animation-delay:3.9s}.scatter-plot .plot-container [data-cp-delay="38"]{-webkit-animation-delay:3.8s;animation-delay:3.8s}.scatter-plot .plot-container [data-cp-delay="37"]{-webkit-animation-delay:3.7s;animation-delay:3.7s}.scatter-plot .plot-container [data-cp-delay="36"]{-webkit-animation-delay:3.6s;animation-delay:3.6s}.scatter-plot .plot-container [data-cp-delay="35"]{-webkit-animation-delay:3.5s;animation-delay:3.5s}.scatter-plot .plot-container [data-cp-delay="34"]{-webkit-animation-delay:3.4s;animation-delay:3.4s}.scatter-plot .plot-container [data-cp-delay="33"]{-webkit-animation-delay:3.3s;animation-delay:3.3s}.scatter-plot .plot-container [data-cp-delay="32"]{-webkit-animation-delay:3.2s;animation-delay:3.2s}.scatter-plot .plot-container [data-cp-delay="31"]{-webkit-animation-delay:3.1s;animation-delay:3.1s}.scatter-plot .plot-container [data-cp-delay="30"]{-webkit-animation-delay:3s;animation-delay:3s}.scatter-plot .plot-container [data-cp-delay="29"]{-webkit-animation-delay:2.9s;animation-delay:2.9s}.scatter-plot .plot-container [data-cp-delay="28"]{-webkit-animation-delay:2.8s;animation-delay:2.8s}.scatter-plot .plot-container [data-cp-delay="27"]{-webkit-animation-delay:2.7s;animation-delay:2.7s}.scatter-plot .plot-container [data-cp-delay="26"]{-webkit-animation-delay:2.6s;animation-delay:2.6s}.scatter-plot .plot-container [data-cp-delay="25"]{-webkit-animation-delay:2.5s;animation-delay:2.5s}.scatter-plot .plot-container [data-cp-delay="24"]{-webkit-animation-delay:2.4s;animation-delay:2.4s}.scatter-plot .plot-container [data-cp-delay="23"]{-webkit-animation-delay:2.3s;animation-delay:2.3s}.scatter-plot .plot-container [data-cp-delay="22"]{-webkit-animation-delay:2.2s;animation-delay:2.2s}.scatter-plot .plot-container [data-cp-delay="21"]{-webkit-animation-delay:2.1s;animation-delay:2.1s}.scatter-plot .plot-container [data-cp-delay="20"]{-webkit-animation-delay:2s;animation-delay:2s}.scatter-plot .plot-container [data-cp-delay="19"]{-webkit-animation-delay:1.9s;animation-delay:1.9s}.scatter-plot .plot-container [data-cp-delay="18"]{-webkit-animation-delay:1.8s;animation-delay:1.8s}.scatter-plot .plot-container [data-cp-delay="17"]{-webkit-animation-delay:1.7s;animation-delay:1.7s}.scatter-plot .plot-container [data-cp-delay="16"]{-webkit-animation-delay:1.6s;animation-delay:1.6s}.scatter-plot .plot-container [data-cp-delay="15"]{-webkit-animation-delay:1.5s;animation-delay:1.5s}.scatter-plot .plot-container [data-cp-delay="14"]{-webkit-animation-delay:1.4s;animation-delay:1.4s}.scatter-plot .plot-container [data-cp-delay="13"]{-webkit-animation-delay:1.3s;animation-delay:1.3s}.scatter-plot .plot-container [data-cp-delay="12"]{-webkit-animation-delay:1.2s;animation-delay:1.2s}.scatter-plot .plot-container [data-cp-delay="11"]{-webkit-animation-delay:1.1s;animation-delay:1.1s}.scatter-plot .plot-container [data-cp-delay="10"]{-webkit-animation-delay:1s;animation-delay:1s}.scatter-plot .plot-container [data-cp-delay="9"]{-webkit-animation-delay:.9s;animation-delay:.9s}.scatter-plot .plot-container [data-cp-delay="8"]{-webkit-animation-delay:.8s;animation-delay:.8s}.scatter-plot .plot-container [data-cp-delay="7"]{-webkit-animation-delay:.7s;animation-delay:.7s}.scatter-plot .plot-container [data-cp-delay="6"]{-webkit-animation-delay:.6s;animation-delay:.6s}.scatter-plot .plot-container [data-cp-delay="5"]{-webkit-animation-delay:.5s;animation-delay:.5s}.scatter-plot .plot-container [data-cp-delay="4"]{-webkit-animation-delay:.4s;animation-delay:.4s}.scatter-plot .plot-container [data-cp-delay="3"]{-webkit-animation-delay:.3s;animation-delay:.3s}.scatter-plot .plot-container [data-cp-delay="2"]{-webkit-animation-delay:.2s;animation-delay:.2s}.scatter-plot .plot-container [data-cp-delay="1"]{-webkit-animation-delay:.1s;animation-delay:.1s}@-webkit-keyframes chart-opacity{from{opacity:0}to{opacity:1}}@keyframes chart-opacity{from{opacity:0}to{opacity:1}}@-webkit-keyframes bar-chart-grow{from{-webkit-transform:scaleY(0)}to{-webkit-transform:scaleY(1)}}@keyframes bar-chart-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@-webkit-keyframes horizontal-chart-grow{from{-webkit-transform:scaleX(0)}to{-webkit-transform:scaleX(1)}}@keyframes horizontal-chart-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@-webkit-keyframes scatter-chart-grow{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes scatter-chart-grow{from{transform:scale(0)}to{transform:scale(1)}}
\ No newline at end of file
diff --git a/demo.html b/demo.html
index 86f5f2b..5add183 100644
--- a/demo.html
+++ b/demo.html
@@ -11,10 +11,9 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
     <style>
     body { font-family: sans-serif; color: #444444; }
-    .bar-chart, .vertical-chart, .scatter-plot { margin: 20px; border: 1px solid #3498db; }
+    .bar-chart, .horizontal-chart, .scatter-plot { margin: 20px; border: 1px solid #3498db; }
     .scatter-plot, .bar-chart { height: 300px; }
-    .vertical-chart ul li { min-height: 12px; }
-    .pad ul li { padding: 8px; }
+    .horizontal-chart ul li { min-height: 12px; padding: 8px; }
     a { color: #3498db; text-decoration: none; }
     @media screen and (max-width:50em) {
         .wrapper { width: 100%; }
@@ -34,57 +33,57 @@ <h1><a href="https://github.com/asciimoo/cssplot">cssplot</a></h1>
             <h2>Bar Chart</h2>
         <div class="col-lg-6">
             <div class="bar-chart">
-                <ul class="plot-container" data-cp-transition="fade">
-                    <li data-cp-size="99" data-cp-delay="0">99%</li>
-                    <li data-cp-size="50" data-cp-delay="10">50%</li>
-                    <li data-cp-size="30" data-cp-delay="20">30%</li>
-                    <li data-cp-size="90" data-cp-delay="30">90%</li>
-                    <li data-cp-size="10" data-cp-delay="40">10%</li>
-                    <li data-cp-size="70" data-cp-delay="50">70%</li>
-                    <li data-cp-size="30" data-cp-delay="60">30%</li>
-                    <li data-cp-size="90" data-cp-delay="70">90%</li>
+                <ul class="plot-container">
+                    <li data-cp-size="99"99%</li>
+                    <li data-cp-size="50">50%</li>
+                    <li data-cp-size="30">30%</li>
+                    <li data-cp-size="90">90%</li>
+                    <li data-cp-size="10">10%</li>
+                    <li data-cp-size="70">70%</li>
+                    <li data-cp-size="30">30%</li>
+                    <li data-cp-size="90">90%</li>
                 </ul>
             </div>
         </div>
         <div class="col-lg-6">
             <div class="bar-chart">
-                <ul class="plot-container group-by-number" data-cp-transition="grow">
-                    <li data-cp-size="1" data-cp-delay="0"></li>
-                    <li data-cp-size="2" data-cp-delay="10" data-group="5"></li>
-                    <li data-cp-size="4" data-cp-delay="20"></li>
-                    <li data-cp-size="8" data-cp-delay="30" data-group="5"></li>
-                    <li data-cp-size="16" data-cp-delay="40"></li>
-                    <li data-cp-size="32" data-cp-delay="50" data-group="5"></li>
-                    <li data-cp-size="64" data-cp-delay="60"></li>
-                    <li data-cp-size="100" data-cp-delay="70" data-group="5"></li>
-                    <li data-cp-size="90" data-cp-delay="80"></li>
-                    <li data-cp-size="80" data-cp-delay="90" data-group="5"></li>
-                    <li data-cp-size="70" data-cp-delay="100"></li>
-                    <li data-cp-size="60" data-cp-delay="110" data-group="5"></li>
-                    <li data-cp-size="50" data-cp-delay="120"></li>
-                    <li data-cp-size="40" data-cp-delay="130" data-group="5"></li>
-                    <li data-cp-size="30" data-cp-delay="140"></li>
-                    <li data-cp-size="20" data-cp-delay="150" data-group="5"></li>
-                    <li data-cp-size="10" data-cp-delay="160"></li>
+                <ul class="plot-container group-by-number">
+                    <li data-cp-size="1"></li>
+                    <li data-cp-size="2" data-group="5"></li>
+                    <li data-cp-size="4"></li>
+                    <li data-cp-size="8" data-group="5"></li>
+                    <li data-cp-size="16"></li>
+                    <li data-cp-size="32" data-group="5"></li>
+                    <li data-cp-size="64"></li>
+                    <li data-cp-size="100" data-group="5"></li>
+                    <li data-cp-size="90"</li>
+                    <li data-cp-size="80" data-group="5"></li>
+                    <li data-cp-size="70"></li>
+                    <li data-cp-size="60" data-group="5"></li>
+                    <li data-cp-size="50"></li>
+                    <li data-cp-size="40" data-group="5"></li>
+                    <li data-cp-size="30"></li>
+                    <li data-cp-size="20" data-group="5"></li>
+                    <li data-cp-size="10"></li>
                 </ul>
             </div>
         </div>
     </div>
     <div class="row">
-            <h2>Vertical Bar Chart</h2>
+            <h2>Horizontal Bar Chart</h2>
         <div class="col-lg-6">
-            <div class="vertical-chart pad">
-                <ul class="plot-container" data-cp-transition="fade">
-                    <li data-cp-size="100" data-cp-delay="10">100%</li>
-                    <li data-cp-size="30" data-cp-delay="20">30%</li>
-                    <li data-cp-size="20" data-cp-delay="30">20%</li>
-                    <li data-cp-size="70" data-cp-delay="40">70%</li>
-                    <li data-cp-size="90" data-cp-delay="50">90%</li>
+            <div class="horizontal-chart">
+                <ul class="plot-container">
+                    <li data-cp-size="100">100%</li>
+                    <li data-cp-size="30">30%</li>
+                    <li data-cp-size="20">20%</li>
+                    <li data-cp-size="70">70%</li>
+                    <li data-cp-size="90">90%</li>
                 </ul>
             </div>
         </div>
         <div class="col-lg-6">
-            <div class="vertical-chart">
+            <div class="horizontal-chart">
                 <ul class="plot-container group-by-number">
                     <li data-cp-size="1"></li>
                     <li data-cp-size="2" data-group="5"></li>
@@ -148,6 +147,61 @@ <h2>Scatter plot</h2>
             </div>
         </div>
     </div>
+    <div class="row">
+            <h2>Animated Chart</h2>
+            <select>
+                <option value="">Select Animation</option>
+                <option value="fade">Fade</option>
+                <option value="grow">Grow</option>
+            </select>
+        <div class="col-lg-12">
+            <div class="bar-chart">
+                <ul class="plot-container group-by-number" data-cp-transition="">
+                    <li data-cp-delay="1" data-cp-size="1"></li>
+                    <li data-cp-delay="2" data-cp-size="2" data-group="5"></li>
+                    <li data-cp-delay="3" data-cp-size="4"></li>
+                    <li data-cp-delay="4" data-cp-size="8" data-group="5"></li>
+                    <li data-cp-delay="5" data-cp-size="16"></li>
+                    <li data-cp-delay="6" data-cp-size="32" data-group="5"></li>
+                    <li data-cp-delay="7" data-cp-size="64"></li>
+                    <li data-cp-delay="8" data-cp-size="100" data-group="5"></li>
+                    <li data-cp-delay="9" data-cp-size="90"></li>
+                    <li data-cp-delay="10" data-cp-size="80" data-group="5"></li>
+                    <li data-cp-delay="11" data-cp-size="70"></li>
+                    <li data-cp-delay="12" data-cp-size="60" data-group="5"></li>
+                    <li data-cp-delay="13" data-cp-size="50"></li>
+                    <li data-cp-delay="14" data-cp-size="40" data-group="5"></li>
+                    <li data-cp-delay="15" data-cp-size="30"></li>
+                    <li data-cp-delay="16" data-cp-size="20" data-group="5"></li>
+                    <li data-cp-delay="17" data-cp-size="10"></li>
+                    <li data-cp-delay="18" data-cp-size="4"></li>
+                    <li data-cp-delay="19" data-cp-size="8" data-group="5"></li>
+                    <li data-cp-delay="20" data-cp-size="16"></li>
+                    <li data-cp-delay="21" data-cp-size="32" data-group="5"></li>
+                    <li data-cp-delay="22" data-cp-size="64"></li>
+                    <li data-cp-delay="23" data-cp-size="100" data-group="5"></li>
+                    <li data-cp-delay="24" data-cp-size="90"></li>
+                    <li data-cp-delay="25" data-cp-size="80" data-group="5"></li>
+                    <li data-cp-delay="26" data-cp-size="70"></li>
+                    <li data-cp-delay="27" data-cp-size="60" data-group="5"></li>
+                    <li data-cp-delay="28" data-cp-size="50"></li>
+                    <li data-cp-delay="29" data-cp-size="40" data-group="5"></li>
+                    <li data-cp-delay="30" data-cp-size="30"></li>
+                </ul>
+            </div>
+        </div>
+    </div>
 </div>
+
+<script>
+// just for demo purposes
+var select = document.querySelector('select'),
+    target = document.querySelector('[data-cp-transition]');
+select.addEventListener('change',function(){
+    var value = this.value;
+    target.setAttribute("data-cp-transition",value)
+});
+</script>
+
 </body>
 </html>
diff --git a/src/cssplot.full.less b/src/cssplot.full.less
index 271d98c..acda89a 100644
--- a/src/cssplot.full.less
+++ b/src/cssplot.full.less
@@ -1,3 +1,4 @@
 @import "modules/defaults.less";
 @import "modules/base.less";
-@import "modules/loops.less";
\ No newline at end of file
+@import "modules/loops.less";
+@import "modules/animations.less";
\ No newline at end of file
diff --git a/src/modules/animations.less b/src/modules/animations.less
new file mode 100644
index 0000000..4f13377
--- /dev/null
+++ b/src/modules/animations.less
@@ -0,0 +1,69 @@
+/* general */
+@-webkit-keyframes chart-opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes chart-opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* bar-chart */
+@-webkit-keyframes bar-chart-grow {
+  from {
+    -webkit-transform: scaleY(0);
+  }
+  to {
+    -webkit-transform: scaleY(1);
+  }
+}
+@keyframes bar-chart-grow {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+/* horizontal-chart */
+@-webkit-keyframes horizontal-chart-grow {
+  from {
+    -webkit-transform: scaleX(0);
+  }
+  to {
+    -webkit-transform: scaleX(1);
+  }
+}
+@keyframes horizontal-chart-grow {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+/* scatter-chart */
+@-webkit-keyframes scatter-chart-grow {
+  from {
+    -webkit-transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+  }
+}
+@keyframes scatter-chart-grow {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
diff --git a/src/modules/base.less b/src/modules/base.less
index c8d83e6..e6c3060 100644
--- a/src/modules/base.less
+++ b/src/modules/base.less
@@ -1,4 +1,6 @@
-.bar-chart, .vertical-chart, .scatter-plot {
+.bar-chart, 
+.horizontal-chart, 
+.scatter-plot {
     position: relative;
     min-width: 100px;
     min-height: 100px;
@@ -6,33 +8,61 @@
     margin: 0;
 }
 
-.bar-chart .plot-container {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-    position: absolute;
-    text-align: center;
-    top: 0; left: 0; bottom: 0; right: 0;
-    padding: 0;
-    margin: 0;
-    min-height: 100px;
-}
+.bar-chart {
 
-.bar-chart .chart-column,
-.bar-chart [data-cp-size] {
-    -webkit-flex-grow: 1;
-    flex-grow: 1;
-    -webkit-align-self: flex-end;
-    align-self: flex-end;
+    .plot-container {
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+        -webkit-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+        position: absolute;
+        text-align: center;
+        top: 0; left: 0; bottom: 0; right: 0;
+        padding: 0;
+        margin: 0;
+        min-height: 100px;
+
+        &[data-cp-transition="fade"] [data-cp-delay] {
+            opacity: 0;
+            -webkit-animation-name: chart-opacity;
+            -webkit-animation-duration: 1s;
+            -webkit-animation-timing-function: ease;
+            -webkit-animation-fill-mode: forwards;
+            animation-name: chart-opacity;
+            animation-duration: 1s;
+            animation-timing-function: ease;
+            animation-fill-mode: forwards;
+        }
+        &[data-cp-transition="grow"] [data-cp-delay] {
+            -webkit-transform: scaleY(0);
+            -webkit-transform-origin: center bottom;
+            transform: scaleY(0);
+            transform-origin: center bottom;
+            -webkit-animation-name: bar-chart-grow;
+            -webkit-animation-duration: 1s;
+            -webkit-animation-timing-function: ease;
+            -webkit-animation-fill-mode: forwards;
+            animation-name: bar-chart-grow;
+            animation-duration: 1s;
+            animation-timing-function: ease;
+            animation-fill-mode: forwards;
+        }
+    }
+    .chart-column,
+    [data-cp-size] {
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-align-self: flex-end;
+        align-self: flex-end;
+    }
 }
 
 .bar-chart .chart-column,
-.vertical-chart .chart-row,
+.horizontal-chart .chart-row,
 .bar-chart [data-cp-size],
-.vertical-chart [data-cp-size] {
+.horizontal-chart [data-cp-size] {
     background: @chart-primary-color;
     color: @chart-primary-label-color;
     list-style: none;
@@ -40,29 +70,83 @@
     box-sizing: border-box;
 }
 
-.vertical-chart {
+.horizontal-chart {
     clear: both;
-}
 
-.vertical-chart .plot-container {
-    flex-direction: row;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-}
+    .plot-container {
+        flex-direction: row;
+        padding: 0;
+        margin: 0;
+        width: 100%;
 
-.vertical-chart .chart-row,
-.vertical-chart [data-cp-size] {
-    min-height: 1px;
+        &[data-cp-transition="fade"] [data-cp-delay] {
+            opacity: 0;
+            -webkit-animation-name: chart-opacity;
+            -webkit-animation-duration: 1s;
+            -webkit-animation-timing-function: ease;
+            -webkit-animation-fill-mode: forwards;
+            animation-name: chart-opacity;
+            animation-duration: 1s;
+            animation-timing-function: ease;
+            animation-fill-mode: forwards;
+        }
+        &[data-cp-transition="grow"] [data-cp-delay] {
+            -webkit-transform: scaleX(0);
+            -webkit-transform-origin: left center;
+            transform: scaleX(0);
+            transform-origin: left center;
+            -webkit-animation-name: horizontal-chart-grow;
+            -webkit-animation-duration: 1s;
+            -webkit-animation-timing-function: ease;
+            -webkit-animation-fill-mode: forwards;
+            animation-name: horizontal-chart-grow;
+            animation-duration: 1s;
+            animation-timing-function: ease;
+            animation-fill-mode: forwards;
+        }
+    }
+    .chart-row,
+    [data-cp-size] {
+        min-height: 1px;
+    }
 }
 
-.scatter-plot .plot-container {
-    position: absolute;
-    top: e(%("%dpx", @scatter-plot-dot-size * 2));
-    left: 0;
-    right: e(%("%dpx", @scatter-plot-dot-size * 2));
-    bottom: 0;
-    margin: 0; padding: 0;
+.scatter-plot {
+
+    .plot-container {
+        position: absolute;
+        top: e(%("%dpx", @scatter-plot-dot-size * 2));
+        left: 0;
+        right: e(%("%dpx", @scatter-plot-dot-size * 2));
+        bottom: 0;
+        margin: 0; padding: 0;
+
+        &[data-cp-transition="fade"] [data-cp-delay] {
+            opacity: 0;
+            -webkit-animation-name: chart-opacity;
+            -webkit-animation-duration: 1s;
+            -webkit-animation-timing-function: ease;
+            -webkit-animation-fill-mode: forwards;
+            animation-name: chart-opacity;
+            animation-duration: 1s;
+            animation-timing-function: ease;
+            animation-fill-mode: forwards;
+        }
+        &[data-cp-transition="grow"] [data-cp-delay] {
+            -webkit-transform: scale(0);
+            -webkit-transform-origin: center center;
+            transform: scale(0);
+            transform-origin: center center;
+            -webkit-animation-name: horizontal-chart-grow;
+            -webkit-animation-duration: 1s;
+            -webkit-animation-timing-function: ease;
+            -webkit-animation-fill-mode: forwards;
+            animation-name: horizontal-chart-grow;
+            animation-duration: 1s;
+            animation-timing-function: ease;
+            animation-fill-mode: forwards;
+        }
+    }
 }
 
 .scatter-plot .chart-dot,
@@ -77,3 +161,22 @@
     border: e(%("%dpx", @scatter-plot-dot-size)) solid @chart-primary-color;
     border-radius: 100%;
 }
+
+// Animation base
+/*
+.bar-chart .plot-container[data-cp-transition="fade"] [data-cp-delay] {
+  opacity: 0;
+}
+.bar-chart .plot-container[data-cp-transition="grow"] [data-cp-delay] {
+  transform: scaleY(0);
+  transform-origin: center bottom;
+}
+.bar-chart .plot-container [data-cp-delay] {
+  -webkit-animation: bar-chart-opacity 1s ease forwards;
+  -webkit-animation-delay: 0s;
+}
+.bar-chart .plot-container [data-cp-delay] {
+  -webkit-animation: bar-chart-grow 1s ease forwards;
+  -webkit-animation-delay: 0s;
+}
+*/
\ No newline at end of file
diff --git a/src/modules/loops.less b/src/modules/loops.less
index 5096f8c..b563402 100644
--- a/src/modules/loops.less
+++ b/src/modules/loops.less
@@ -1,4 +1,3 @@
-
 .height_loop(@percent_counter) when (@percent_counter >= 0) {
   .height_loop((@percent_counter - 1));
   [data-cp-size="@{percent_counter}"] { height: ~"@{percent_counter}%"; };
@@ -21,13 +20,46 @@
 
 .bar-chart .plot-container {
   .height_loop(100);
+  // animation loop
+  @max: 50;
+  .loop(@index) when (@index > 0){
+    [data-cp-delay="@{index}"] { 
+      -webkit-animation-delay: @index * .1s;
+      animation-delay: @index * .1s;
+    }
+    .loop(@index - 1);
+  }
+  .loop(0){}
+  .loop(@max);
 }
 
-.vertical-chart .plot-container {
+.horizontal-chart .plot-container {
   .width_loop(100);
+  // animation loop
+  @max: 50;
+  .loop(@index) when (@index > 0){
+    [data-cp-delay="@{index}"] { 
+      -webkit-animation-delay: @index * .1s;
+      animation-delay: @index * .1s;
+    }
+    .loop(@index - 1);
+  }
+  .loop(0){}
+  .loop(@max);
 }
 
 .scatter-plot .plot-container {
   .x_loop(100);
   .y_loop(100);
+  // animation loop
+  @max: 50;
+  .loop(@index) when (@index > 0){
+    [data-cp-delay="@{index}"] { 
+      -webkit-animation-delay: @index * .1s;
+      animation-delay: @index * .1s;
+    }
+    .loop(@index - 1);
+  }
+  .loop(0){}
+  .loop(@max);
 }

From 73442dcada86c9ca2d1a052c8f2ec4afdb6dfc59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Epu=C3=B1an?= <juanbrujo@gmail.com>
Date: Sun, 21 Dec 2014 19:56:17 -0300
Subject: [PATCH 6/8] created cssplot.animations.less

---
 Gruntfile.js                 | 3 ++-
 build/cssplot.animations.css | 1 +
 src/cssplot.animations.less  | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 build/cssplot.animations.css
 create mode 100644 src/cssplot.animations.less

diff --git a/Gruntfile.js b/Gruntfile.js
index 57643b3..b062822 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -17,7 +17,8 @@ module.exports = function(grunt) {
         files: {
             'build/cssplot.base.css': 'src/cssplot.base.less',
             'build/cssplot.full.css': 'src/cssplot.full.less',
-            'build/cssplot.group.css': 'src/cssplot.group.less'
+            'build/cssplot.group.css': 'src/cssplot.group.less',
+            'build/cssplot.animations.css': 'src/cssplot.animations.less'
         }
       } 
     },
diff --git a/build/cssplot.animations.css b/build/cssplot.animations.css
new file mode 100644
index 0000000..76fd32a
--- /dev/null
+++ b/build/cssplot.animations.css
@@ -0,0 +1 @@
+@-webkit-keyframes chart-opacity{from{opacity:0}to{opacity:1}}@keyframes chart-opacity{from{opacity:0}to{opacity:1}}@-webkit-keyframes bar-chart-grow{from{-webkit-transform:scaleY(0)}to{-webkit-transform:scaleY(1)}}@keyframes bar-chart-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@-webkit-keyframes horizontal-chart-grow{from{-webkit-transform:scaleX(0)}to{-webkit-transform:scaleX(1)}}@keyframes horizontal-chart-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@-webkit-keyframes scatter-chart-grow{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes scatter-chart-grow{from{transform:scale(0)}to{transform:scale(1)}}
\ No newline at end of file
diff --git a/src/cssplot.animations.less b/src/cssplot.animations.less
new file mode 100644
index 0000000..49d732b
--- /dev/null
+++ b/src/cssplot.animations.less
@@ -0,0 +1,2 @@
+@import "modules/defaults.less";
+@import "modules/animations.less";
\ No newline at end of file

From ceb2beaaa7f58a67402f2ba6dd2fa32603c0ba9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Epu=C3=B1an?= <juanbrujo@gmail.com>
Date: Sun, 21 Dec 2014 20:04:02 -0300
Subject: [PATCH 7/8] added instructions for animated charts

---
 README.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/README.md b/README.md
index e30a8e3..6d5f037 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,22 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati
   <img src="docs/images/cssplot_scatter_plot.png"/>
 </div>
 
+### Animated Graphs
+
+For animated charts, add the `data-cp-transition` attribute to the `plot-container`; the values are: `fade` and `grow` and they're the two types of animation availables. Then, each point in the graph must have the `data-cp-delay` attribute with a value that must be a number higher than zero and represents the delay of the animation (in miliseconds).
+
+```html
+<div class="bar-plot">
+    <ul class="plot-container" data-cp-transition="0.3">
+        <li data-cp-delay="1" data-cp-size="1"></li>
+        <li data-cp-delay="2" data-cp-size="2"></li>
+        <li data-cp-delay="3" data-cp-size="4"></li>
+        <li data-cp-delay="4" data-cp-size="8"></li>
+        <li data-cp-delay="5" data-cp-size="16"></li>
+    </ul>
+</div>
+```
+
 ## Build
 Using **GruntJS**.
 

From 7493c3dfbdfad1fc920abbd63e16823d6b15c159 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Epu=C3=B1an?= <juanbrujo@gmail.com>
Date: Sun, 21 Dec 2014 20:05:23 -0300
Subject: [PATCH 8/8] better readme

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6d5f037..cadf935 100644
--- a/README.md
+++ b/README.md
@@ -120,5 +120,6 @@ It will keep *watching* your changes while you save them and if you have [Livere
 - [ ] Stacked bar chart
 - [ ] Line chart
 - [ ] Axis/scale support
-- [ ] Live demo
+- [X] Live demo
 - [X] Better build script
+- [X] Animated charts