Version bump

fix `this` breaking tests and builds in node environments

.doclets.yml

@@ -0,0 +1 @@
+dir: src/scripts

.nvmrc

@@ -0,0 +1,2 @@
+v6.9.0
+

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - '0.10'
+  - '5.5.0'
 before_script:
   - 'npm install -g bower grunt-cli'
   - 'bower install'

CHANGELOG.md

@@ -1,3 +1,151 @@
+v0.11.0 - 11 Apr 2017
+- Added CSP compatibility by using CSSOM instead of style attributes (Francisco Silva)
+- Added feature to render pie / donut chart as solid shape, allowing outlines (Sergey Kovalyov, Chris Carson)
+- Fixed XMLNS for foreignObjet content (Alfredo Matos)
+
+v0.10.0 - 23 Oct 2016
+---------------------
+
+- Added dominant-baseline styles for pie and donut charts (Gion Kunz)
+- Added public getNode on SVG api (Gion Kunz)
+- Added support for bar charts to have auto narrowing on AutoScaleAxis by overriding referenceValue (Jonathan Dumaine)
+- Added amdModuleId for better integration into webpack (Chris)
+- Added grid background to line and bar chart (hansmaad)
+- Added new LTS node version and included NPM run scripts (Gion Kunz)
+- Added correct meta data emission in events (Gion Kunz)
+- Fixed rounding issues where raw value was added instead of rounded (Gion Kunz)
+- Fixed step axis issue with axis stretch and series count 0 (Gion Kunz)
+- Fixed label position of single series pie / donut charts to be centered (Gion Kunz)
+- Fixed order or drawing pie and donut slices (Gion Kunz)
+- Fixed calculations of stepLength to only stretch ticksLength if > 1 (Alexander van Eck)
+- Fixed better handling of axisOptions.position and fallback to 'end' position (Alexander van Eck)
+- Fixed handling of holes in interpolation for multi-value series (James Watmuff)
+- Fixed function StepAxis() returning NaN (Joao Milton)
+- Fixed NaN issues in SVG when rendering Pie chart with only 0s (Alexander van Eck)
+- Fixed infinite loop in getBounds with a more robust increment (hansmaad)
+- Fixed performance of Chartist.extend (cheese83)
+- Fixed license reference issues in package.json (Jacob Quant)
+- Cleanup of data normalization changes and allows Date objects and booleans as values (Gion Kunz)
+- Cleanup refactoring for data management and normalization (Gion Kunz)
+
+v0.9.8 - 22 Jun 2016
+--------------------
+- Added monotone cubic interpolation which is now the default interpolation for line charts (James Watmuff)
+- Update zoom plugin to 0.2.1 (hansmaad)
+- Bugfix: Prevent infinite loop in getBounds if bounds.valueRange is very small, fixes #643 (hansmaad)
+- Bugfix: Correct update events during media changes (Rory Hunter)
+- Bugfix: prevent negative value for foreignObject width attribute (Jose Ignacio)
+- Fixed example line chart in getting started documentation (Robin Edbom)
+- Updated development pipeline dependencies (Gion Kunz)
+- Updated chartist tooltip plugin and example styles (Gion Kunz)
+- Fixed WTFPL License issue (Gion Kunz)
+
+v0.9.7 - 23 Feb 2016
+--------------------
+- Fixed bug with label and grid rendering on axis, fixes #621
+
+v0.9.6 - 22 Feb 2016
+--------------------
+- Added dual licensing WTFPL and MIT, built new version (Gion Kunz)
+- Adding unminified CSS to dist output, fixes #506 (Gion Kunz)
+- Refactored namespaced attribute handling, fixes #584 (Gion Kunz)
+- Allow charts to be created without data and labels, fixes #598, fixes #588, fixes #537, fixes #425 (Gion Kunz> <Carlos Morales)
+- Removed onlyInteger setting from default bar chart settings, fixes #423 (Gion Kunz)
+- Removed serialization of values on line chart areas, fixes #424 (Gion Kunz)
+- Removed workaround and fallback for SVG element width and height calculations, fixes #592 (Gion Kunz)
+- Render 0 in ct:value attribute for line graphs (Paul Salaets)
+- Allow empty pie chart values to be ignored (Stephen)
+- Fix #527 Pie render issue with small angles. (hansmaad)
+- Small fix for stacked bars with 'holes' in the data (medzes)
+
+v0.9.5 - 14 Nov 2015
+--------------------
+- Added 'fillHoles' option for line graphs, which continues the line smoothly through data holes (Thanks to Joshua Warner !)
+- Added option to use relative donut width values (Thanks to hansmaad !)
+- Added stackMode for bar charts to create overlapping charts or bipolar stacked charts (Thanks to Douglas Mak !)
+- Fixed issue with unordered ticks in fixed scale axis, fixes #411 (Thanks Carlos !)
+- Fixed left navigation in examples was not using valid anchors, fixes #514 (Thanks Carlos !)
+- Internal refactoring and cleanup (Thanks to hansmaad !)
+
+v0.9.4 - 06 Aug 2015
+--------------------
+- Added axes to all events where they are available in context to provide better API convenience when developing plugins
+- Consider additional parameters of SVG elem when called with DOM node
+
+v0.9.3 - 05 Aug 2015
+--------------------
+- Added better check for undefined values in bar chart, fixes #400
+- Fixed issue with SVG feature check within Svg module (Thanks to Markus Gruber !)
+
+v0.9.2 - 02 Aug 2015
+--------------------
+- Enabled bar charts to use dynamic axes fixes #363, fixes #355
+- Added axis title plugin to plugins page (Thanks to @alexstanbury !)
+- Added a label group for Pie charts to prevent occlusion by slices (Thanks to Anthony Jimenez!)
+- Added better handling for multi values when writing custom attributes, fixes #379
+
+v0.9.1 - 24 Jun 2015
+--------------------
+- Fixed bug with areaBase narrowing process in area charts, fixes #364
+- Fixed bug on bar chart where wrong offset was used (axis offset), fixes #347 (Thanks to @amsardesai !)
+- Fixed bug with namespace attributes that caused duplication of SVG element on updates in old browsers (Thanks to @radist2s !)
+
+v0.9.0 - 10 Jun 2015
+--------------------
+- Major refactoring of axis and projection code, added possibility to configure axes when creating a chart
+- Added areaBase to series options override in line chart, fixes #342
+- Throwing up in infinite loop for edge cases and during development
+- Documentation: Added documentation for axis configuration and getting started guide for custom axes
+
+v0.8.3 - 07 Jun 2015
+--------------------
+- Greatly reduced CSS selector complexity and split slice into slice-pie and slice-donut
+- Added more robust detach mechanism that takes async initialization into account
+- Added better handling for area drawing with segmented paths, fixes #340
+- Documentation: Added getting started guide for styling charts
+
+v0.8.2 - 02 Jun 2015
+--------------------
+- Fixed broken release 0.8.1
+
+v0.8.1 - 02 Jun 2015 (BROKEN!)
+------------------------------
+- Added new option labelPosition for Pie charts to have better control over label placement, fixes #315
+- Added default styles for alignment-baseline
+- Added better support for undefined values in bar charts
+- Refactored getHighLow to use recursion in order to enable more dynamic array structures and better edge case management
+- Fixed issue with Chartist.rho that caused endless loop when called with 1, fixes #318
+
+v0.8.0 - 10 May 2015
+--------------------
+- Added new option to bar charts to allow a series distribution and use a simple one dimensional array for data (#209)
+- Added option for label placement and refactored label positioning code (#302)
+- Added option to only use integer numbers in linear scale axis (#77)
+- Added possibility to add series configuration on line chart to override specific options on series level (#289, #168)
+- Added functionality to handle holes in line charts (#294)
+- Added step interpolation for line charts
+- Added default styles for bar and horizontal bar labels that make more sense (#303)
+- Added series data and meta information to events (#293)
+- Changed line chart behavior to draw points from interpolated values (#295)
+- Removed restriction to SVGElements so Chartist.Svg can be used for HTML DOM elements (#261)
+- Refactored and simplified axis creation, also includes updated CSS label handling
+- Refactored getDataArray for simplification and fixed type conversion issue with data arrays for pie charts
+- Centralized high/low calculations in getHighLow() method and added support for empty charts. Thanks @scthi !
+- Fixed bug in pie chart where meta was only added when series name was specified
+- Fixed bug where special condition to check single value should also include object value notation (#265)
+- Fixed bug with Chartist.extend when null property is extended
+- Fixed bug with Firefox dying with a DOM exception when calling getBBox() on an invisible node. Thanks @scthi !
+- Switched from object literal accessor definition to regular function (#278)
+
+v0.7.4 - 19 Apr 2015
+--------------------
+- Enhanced documentation site (Accessibility plugin, live example eval, fixed path to Sass settings, better HTML example of how to include Chartist, example how to include multiple charts on one page)
+- Added Arc to Chartist.Svg.Path
+- Refactored Chartist.Pie to make use of Svg.Path and expose path in events
+- Closing path of Pie if not a donut for correct strokes
+- Exposing axis objects in created event
+- Changed grid event to use axis object instead of string
+
 v0.7.3 - 27 Feb 2015
 --------------------
 - Fixed bugs in the chart.update method 

LICENSE-MIT

@@ -0,0 +1,7 @@
+Copyright (c) 2013 Gion Kunz <gion.kunz@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,4 +1,6 @@
 # Big welcome by the Chartist Guy
+
+[![Join the chat at https://gitter.im/gionkunz/chartist-js](https://badges.gitter.im/gionkunz/chartist-js.svg)](https://gitter.im/gionkunz/chartist-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](http://img.shields.io/npm/v/chartist.svg)](https://npmjs.org/package/chartist) [![build status](http://img.shields.io/travis/gionkunz/chartist-js.svg)](https://travis-ci.org/gionkunz/chartist-js) [![Inline docs](http://inch-ci.org/github/gionkunz/chartist-js.svg?branch=develop)](http://inch-ci.org/github/gionkunz/chartist-js)
 
 ![The Chartist Guy](https://raw.github.com/gionkunz/chartist-js/develop/site/images/chartist-guy.gif "The Chartist Guy")
@@ -55,6 +57,20 @@ to the masses.
 5. Richer Sass / CSS framework
 6. Other charts types (spider etc.)
 
+## Plugins
+
+Some features aren't right for the core product
+but there is a great set of plugins available
+which add features like:
+
+* [Axis labels](http://gionkunz.github.io/chartist-js/plugins.html#axis-title-plugin)
+* [Tooltips at data points](https://gionkunz.github.io/chartist-js/plugins.html#tooltip-plugin)
+* [Coloring above/below a threshold](https://gionkunz.github.io/chartist-js/plugins.html#threshold-plugin)
+
+and more.
+
+See all the plugins [here](https://gionkunz.github.io/chartist-js/plugins.html).
+
 ## Contribution
 
 We are looking for people who share the idea of having a simple, flexible charting library that is responsive and uses

bower.json

@@ -1,9 +1,8 @@
 {
   "name": "chartist",
-  "version": "0.7.3",
   "main": [
-    "./dist/chartist.min.js",
-    "./dist/chartist.min.css"
+    "./dist/chartist.js",
+    "./dist/chartist.css"
   ],
   "devDependencies": {
     "snap.svg": "~0.3.0",
@@ -12,8 +11,16 @@
     "compass-mixins": "~1.0.2",
     "codemirror": "~4.12.0",
     "base64": "~0.3.0",
-    "chartist-plugin-pointlabels": "~0.0.2",
-    "chartist-plugin-sketchy": "~0.0.1"
+    "chartist-plugin-pointlabels": "~0.0.4",
+    "chartist-plugin-accessibility": "~0.0.2",
+    "chartist-plugin-tooltip": "~0.0.12",
+    "chartist-plugin-axistitle": "~0.0.1",
+    "chartist-plugin-threshold": "~0.0.1",
+    "chartist-plugin-fill-donut": "~0.0.1",
+    "chartist-plugin-zoom": "~0.2.1",
+    "chartist-plugin-targetline": "~1.0.0",
+    "matchMedia": "~0.2.0",
+    "moment": "^2.14.1"
   },
   "ignore": [
     ".*",
@@ -25,5 +32,8 @@
     "site",
     "src",
     "test"
-  ]
+  ],
+  "resolutions": {
+    "chartist": "~0.9.0"
+  }
 }

dist/LICENSE

@@ -1,13 +0,0 @@
-            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-                    Version 2, December 2004
-
- Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
-
- Everyone is permitted to copy and distribute verbatim or modified
- copies of this license document, and changing it is allowed as long
- as the name is changed.
-
-            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
-   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
-  0. You just DO WHAT THE FUCK YOU WANT TO.

dist/chartist.css

@@ -0,0 +1,615 @@
+.ct-label {
+  fill: rgba(0, 0, 0, 0.4);
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 0.75rem;
+  line-height: 1; }
+
+.ct-chart-line .ct-label,
+.ct-chart-bar .ct-label {
+  display: block;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex; }
+
+.ct-chart-pie .ct-label,
+.ct-chart-donut .ct-label {
+  dominant-baseline: central; }
+
+.ct-label.ct-horizontal.ct-start {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-label.ct-horizontal.ct-end {
+  -webkit-box-align: flex-start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-label.ct-vertical.ct-start {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: flex-end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+  text-align: right;
+  text-anchor: end; }
+
+.ct-label.ct-vertical.ct-end {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-chart-bar .ct-label.ct-horizontal.ct-start {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+  text-anchor: start; }
+
+.ct-chart-bar .ct-label.ct-horizontal.ct-end {
+  -webkit-box-align: flex-start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+  text-anchor: start; }
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start {
+  -webkit-box-align: flex-end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
+  -webkit-box-align: flex-start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: start; }
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: flex-end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: flex-end;
+  justify-content: flex-end;
+  text-align: right;
+  text-anchor: end; }
+
+.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: flex-start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  text-anchor: end; }
+
+.ct-grid {
+  stroke: rgba(0, 0, 0, 0.2);
+  stroke-width: 1px;
+  stroke-dasharray: 2px; }
+
+.ct-grid-background {
+  fill: none; }
+
+.ct-point {
+  stroke-width: 10px;
+  stroke-linecap: round; }
+
+.ct-line {
+  fill: none;
+  stroke-width: 4px; }
+
+.ct-area {
+  stroke: none;
+  fill-opacity: 0.1; }
+
+.ct-bar {
+  fill: none;
+  stroke-width: 10px; }
+
+.ct-slice-donut {
+  fill: none;
+  stroke-width: 60px; }
+
+.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
+  stroke: #d70206; }
+
+.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area {
+  fill: #d70206; }
+
+.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
+  stroke: #f05b4f; }
+
+.ct-series-b .ct-slice-pie, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-area {
+  fill: #f05b4f; }
+
+.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
+  stroke: #f4c63d; }
+
+.ct-series-c .ct-slice-pie, .ct-series-c .ct-slice-donut-solid, .ct-series-c .ct-area {
+  fill: #f4c63d; }
+
+.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
+  stroke: #d17905; }
+
+.ct-series-d .ct-slice-pie, .ct-series-d .ct-slice-donut-solid, .ct-series-d .ct-area {
+  fill: #d17905; }
+
+.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
+  stroke: #453d3f; }
+
+.ct-series-e .ct-slice-pie, .ct-series-e .ct-slice-donut-solid, .ct-series-e .ct-area {
+  fill: #453d3f; }
+
+.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
+  stroke: #59922b; }
+
+.ct-series-f .ct-slice-pie, .ct-series-f .ct-slice-donut-solid, .ct-series-f .ct-area {
+  fill: #59922b; }
+
+.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
+  stroke: #0544d3; }
+
+.ct-series-g .ct-slice-pie, .ct-series-g .ct-slice-donut-solid, .ct-series-g .ct-area {
+  fill: #0544d3; }
+
+.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
+  stroke: #6b0392; }
+
+.ct-series-h .ct-slice-pie, .ct-series-h .ct-slice-donut-solid, .ct-series-h .ct-area {
+  fill: #6b0392; }
+
+.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
+  stroke: #f05b4f; }
+
+.ct-series-i .ct-slice-pie, .ct-series-i .ct-slice-donut-solid, .ct-series-i .ct-area {
+  fill: #f05b4f; }
+
+.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut {
+  stroke: #dda458; }
+
+.ct-series-j .ct-slice-pie, .ct-series-j .ct-slice-donut-solid, .ct-series-j .ct-area {
+  fill: #dda458; }
+
+.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut {
+  stroke: #eacf7d; }
+
+.ct-series-k .ct-slice-pie, .ct-series-k .ct-slice-donut-solid, .ct-series-k .ct-area {
+  fill: #eacf7d; }
+
+.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut {
+  stroke: #86797d; }
+
+.ct-series-l .ct-slice-pie, .ct-series-l .ct-slice-donut-solid, .ct-series-l .ct-area {
+  fill: #86797d; }
+
+.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut {
+  stroke: #b2c326; }
+
+.ct-series-m .ct-slice-pie, .ct-series-m .ct-slice-donut-solid, .ct-series-m .ct-area {
+  fill: #b2c326; }
+
+.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut {
+  stroke: #6188e2; }
+
+.ct-series-n .ct-slice-pie, .ct-series-n .ct-slice-donut-solid, .ct-series-n .ct-area {
+  fill: #6188e2; }
+
+.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut {
+  stroke: #a748ca; }
+
+.ct-series-o .ct-slice-pie, .ct-series-o .ct-slice-donut-solid, .ct-series-o .ct-area {
+  fill: #a748ca; }
+
+.ct-square {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-square:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 100%; }
+  .ct-square:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-square > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-minor-second {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-minor-second:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 93.75%; }
+  .ct-minor-second:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-minor-second > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-second {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-second:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 88.8888888889%; }
+  .ct-major-second:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-second > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-minor-third {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-minor-third:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 83.3333333333%; }
+  .ct-minor-third:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-minor-third > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-third {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-third:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 80%; }
+  .ct-major-third:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-third > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-perfect-fourth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-perfect-fourth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 75%; }
+  .ct-perfect-fourth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-perfect-fourth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-perfect-fifth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-perfect-fifth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 66.6666666667%; }
+  .ct-perfect-fifth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-perfect-fifth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-minor-sixth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-minor-sixth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 62.5%; }
+  .ct-minor-sixth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-minor-sixth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-golden-section {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-golden-section:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 61.804697157%; }
+  .ct-golden-section:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-golden-section > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-sixth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-sixth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 60%; }
+  .ct-major-sixth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-sixth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-minor-seventh {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-minor-seventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 56.25%; }
+  .ct-minor-seventh:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-minor-seventh > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-seventh {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-seventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 53.3333333333%; }
+  .ct-major-seventh:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-seventh > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-octave {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-octave:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 50%; }
+  .ct-octave:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-octave > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-tenth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-tenth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 40%; }
+  .ct-major-tenth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-tenth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-eleventh {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-eleventh:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 37.5%; }
+  .ct-major-eleventh:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-eleventh > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-major-twelfth {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-major-twelfth:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 33.3333333333%; }
+  .ct-major-twelfth:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-major-twelfth > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+.ct-double-octave {
+  display: block;
+  position: relative;
+  width: 100%; }
+  .ct-double-octave:before {
+    display: block;
+    float: left;
+    content: "";
+    width: 0;
+    height: 0;
+    padding-bottom: 25%; }
+  .ct-double-octave:after {
+    content: "";
+    display: table;
+    clear: both; }
+  .ct-double-octave > svg {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0; }
+
+/*# sourceMappingURL=chartist.css.map */

dist/scss/chartist.scss

@@ -28,14 +28,40 @@
   }
 }
 
-@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-align: $ct-text-align) {
+@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
+  -webkit-box-align: $ct-text-align;
+  -webkit-align-items: $ct-text-align;
+  -ms-flex-align: $ct-text-align;
+  align-items: $ct-text-align;
+  -webkit-box-pack: $ct-text-justify;
+  -webkit-justify-content: $ct-text-justify;
+  -ms-flex-pack: $ct-text-justify;
+  justify-content: $ct-text-justify;
+  // Fallback to text-align for non-flex browsers
+  @if($ct-text-justify == 'flex-start') {
+    text-align: left;
+  } @else if ($ct-text-justify == 'flex-end') {
+    text-align: right;
+  } @else {
+    text-align: center;
+  }
+}
+
+@mixin ct-flex() {
+  // Fallback to block
   display: block;
-  width: 100%;
-  height: 100%;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
   fill: $ct-text-color;
   color: $ct-text-color;
   font-size: $ct-text-size;
-  text-align: $ct-text-align;
+  line-height: $ct-text-line-height;
 }
 
 @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
@@ -77,32 +103,100 @@
 }
 
 @mixin ct-chart-series-color($color) {
-  .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice}.#{$ct-class-donut} {
+  .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
     stroke: $color;
   }
 
-  .#{$ct-class-slice}:not(.#{$ct-class-donut}), .#{$ct-class-area} {
+  .#{$ct-class-slice-pie}, .#{$ct-class-slice-donut-solid}, .#{$ct-class-area} {
     fill: $color;
   }
 }
 
-@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-horizontal-text-align: $ct-horizontal-text-align, $ct-vertical-text-align: $ct-vertical-text-align, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
+@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
+
   .#{$ct-class-label} {
     @include ct-chart-label($ct-text-color, $ct-text-size);
   }
 
-  .#{$ct-class-label}.#{$ct-class-horizontal} {
-    @include ct-chart-label($ct-text-color, $ct-text-size, $ct-horizontal-text-align);
+  .#{$ct-class-chart-line} .#{$ct-class-label},
+  .#{$ct-class-chart-bar} .#{$ct-class-label} {
+    @include ct-flex();
   }
 
-  .#{$ct-class-label}.#{$ct-class-vertical} {
-    @include ct-chart-label($ct-text-color, $ct-text-size, $ct-vertical-text-align);
+  .#{$ct-class-chart-pie} .#{$ct-class-label},
+  .#{$ct-class-chart-donut} .#{$ct-class-label} {
+    dominant-baseline: central;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-end);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, center);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, center);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
+    @include ct-align-justify(center, flex-end);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(center, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
   }
 
   .#{$ct-class-grid} {
     @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
   }
 
+  .#{$ct-class-grid-background} {
+    fill: $ct-grid-background-fill;
+  }
+
   .#{$ct-class-point} {
     @include ct-chart-point($ct-point-size, $ct-point-shape);
   }
@@ -119,32 +213,28 @@
     @include ct-chart-bar($ct-bar-width);
   }
 
-  .#{$ct-class-slice}.#{$ct-class-donut} {
+  .#{$ct-class-slice-donut} {
     @include ct-chart-donut($ct-donut-width);
   }
 
   @if $ct-include-colored-series {
-    .#{$ct-class-series} {
-      @for $i from 0 to length($ct-series-names) {
-        &.#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
-          $color: nth($ct-series-colors, $i + 1);
+    @for $i from 0 to length($ct-series-names) {
+      .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
+        $color: nth($ct-series-colors, $i + 1);
 
-          @include ct-chart-series-color($color);
-        }
+        @include ct-chart-series-color($color);
       }
     }
   }
 }
 
 @if $ct-include-classes {
-  .#{$ct-class-chart} {
-    @include ct-chart();
+  @include ct-chart();
 
-    @if $ct-include-alternative-responsive-containers {
-      @for $i from 0 to length($ct-scales-names) {
-        &.#{nth($ct-scales-names, $i + 1)} {
-          @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
-        }
+  @if $ct-include-alternative-responsive-containers {
+    @for $i from 0 to length($ct-scales-names) {
+      .#{nth($ct-scales-names, $i + 1)} {
+        @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
       }
     }
   }

dist/scss/settings/_chartist-settings.scss

@@ -6,18 +6,24 @@ $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third,
 $ct-class-chart: ct-chart !default;
 $ct-class-chart-line: ct-chart-line !default;
 $ct-class-chart-bar: ct-chart-bar !default;
+$ct-class-horizontal-bars: ct-horizontal-bars !default;
 $ct-class-chart-pie: ct-chart-pie !default;
+$ct-class-chart-donut: ct-chart-donut !default;
 $ct-class-label: ct-label !default;
 $ct-class-series: ct-series !default;
 $ct-class-line: ct-line !default;
 $ct-class-point: ct-point !default;
 $ct-class-area: ct-area !default;
 $ct-class-bar: ct-bar !default;
-$ct-class-slice: ct-slice !default;
-$ct-class-donut: ct-donut !default;
+$ct-class-slice-pie: ct-slice-pie !default;
+$ct-class-slice-donut: ct-slice-donut !default;
+$ct-class-slice-donut-solid: ct-slice-donut-solid !default;
 $ct-class-grid: ct-grid !default;
+$ct-class-grid-background: ct-grid-background !default;
 $ct-class-vertical: ct-vertical !default;
 $ct-class-horizontal: ct-horizontal !default;
+$ct-class-start: ct-start !default;
+$ct-class-end: ct-end !default;
 
 // Container ratio
 $ct-container-ratio: (1/1.618) !default;
@@ -25,14 +31,15 @@ $ct-container-ratio: (1/1.618) !default;
 // Text styles for labels
 $ct-text-color: rgba(0, 0, 0, 0.4) !default;
 $ct-text-size: 0.75rem !default;
-$ct-text-align: left !default;
-$ct-horizontal-text-align: left !default;
-$ct-vertical-text-align: right !default;
+$ct-text-align: flex-start !default;
+$ct-text-justify: flex-start !default;
+$ct-text-line-height: 1;
 
 // Grid styles
 $ct-grid-color: rgba(0, 0, 0, 0.2) !default;
 $ct-grid-dasharray: 2px !default;
 $ct-grid-width: 1px !default;
+$ct-grid-background-fill: none !default;
 
 // Line chart properties
 $ct-line-width: 4px !default;

package.json

@@ -2,7 +2,7 @@
   "name": "chartist",
   "title": "Chartist.js",
   "description": "Simple, responsive charts",
-  "version": "0.7.3",
+  "version": "0.11.4",
   "author": "Gion Kunz",
   "homepage": "https://gionkunz.github.io/chartist-js",
   "repository": {
@@ -20,58 +20,72 @@
   ],
   "files": [
     "dist",
-    "LICENSE",
+    "LICENSE-WTFPL",
+    "LICENSE-MIT",
     "package.json",
-    "README.md"
+    "README.md",
+    "rescue-campaign.js"
   ],
+  "style": "dist/chartist.min.css",
   "main": "dist/chartist.js",
   "browser": "dist/chartist.js",
+  "license": "MIT OR WTFPL",
   "licenses": [
     {
       "type": "WTFPL",
-      "url": "https://github.com/gionkunz/chartist-js/blob/master/LICENSE"
+      "url": "https://github.com/gionkunz/chartist-js/blob/master/LICENSE-WTFPL"
+    },
+    {
+      "type": "MIT",
+      "url": "https://github.com/gionkunz/chartist-js/blob/master/LICENSE-MIT"
     }
   ],
   "dependencies": {},
   "devDependencies": {
-    "assemble": "~0.4.42",
     "assemble-dox": "0.0.2",
-    "grunt": "^0.4.5",
-    "grunt-concurrent": "^1.0.0",
-    "grunt-contrib-clean": "^0.6.0",
-    "grunt-contrib-concat": "^0.5.0",
-    "grunt-contrib-connect": "~0.9.0",
-    "grunt-contrib-copy": "^0.7.0",
-    "grunt-contrib-cssmin": "^0.12.1",
-    "grunt-contrib-htmlmin": "~0.4.0",
-    "grunt-contrib-imagemin": "~0.9.3",
-    "grunt-contrib-jasmine": "~0.8.2",
-    "grunt-contrib-jshint": "~0.11.0",
-    "grunt-contrib-uglify": "^0.7.0",
-    "grunt-contrib-watch": "^0.6.1",
-    "grunt-critical": "0.1.1",
+    "grunt": "^1.0.1",
+    "grunt-assemble": "^0.4.0",
+    "grunt-concurrent": "^2.3.0",
+    "grunt-contrib-clean": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-connect": "^1.0.2",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-cssmin": "^1.0.1",
+    "grunt-contrib-htmlmin": "^1.4.0",
+    "grunt-contrib-imagemin": "^1.0.0",
+    "grunt-contrib-jasmine": "^1.0.3",
+    "grunt-contrib-jshint": "^1.0.0",
+    "grunt-contrib-uglify": "^1.0.1",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-critical": "^0.2.1",
     "grunt-newer": "^1.1.0",
-    "grunt-sass": "^0.18.0",
-    "grunt-svgmin": "~2.0.0",
+    "grunt-sass": "^1.1.0",
+    "grunt-svgmin": "^3.2.0",
     "grunt-template": "^0.2.3",
-    "grunt-umd": "~2.3.1",
-    "grunt-usemin": "~3.0.0",
-    "handlebars-helpers": "~0.5.8",
-    "jasmine-jquery": "~2.0.6",
-    "jshint-stylish": "~1.0.0",
-    "load-grunt-config": "^0.16.0",
-    "lodash": "~2.4.1",
-    "seed-random": "~2.2.0",
+    "grunt-umd": "^2.3.1",
+    "grunt-usemin": "^3.1.1",
+    "handlebars-helpers": "^0.6.1",
+    "jasmine-jquery": "^2.1.1",
+    "jquery": "^3.0.0",
+    "jshint-stylish": "^2.2.0",
+    "load-grunt-config": "^0.19.2",
+    "lodash": "^4.13.1",
+    "seed-random": "^2.2.0",
     "time-grunt": "^1.0.0"
   },
   "engines": {
-    "node": ">=0.8.0"
+    "node": ">=4.6.0"
   },
   "scripts": {
-    "test": "grunt test"
+    "start": "./node_modules/.bin/grunt",
+    "test": "./node_modules/.bin/grunt test",
+    "dev": "./node_modules/.bin/grunt dev",
+    "build": "./node_modules/.bin/grunt build",
+    "preview": "./node_modules/.bin/grunt preview",
+    "public": "./node_modules/.bin/grunt public"
   },
   "config": {
-    "banner": "/* Chartist.js <%= pkg.version %>\n * Copyright © <%= year %> Gion Kunz\n * Free to use under the WTFPL license.\n * http://www.wtfpl.net/\n */\n",
+    "banner": "/* Chartist.js <%= pkg.version %>\n * Copyright © <%= year %> Gion Kunz\n * Free to use under either the WTFPL license or the MIT license.\n * https://raw.githubusercontent.com/gionkunz/chartist-js/master/LICENSE-WTFPL\n * https://raw.githubusercontent.com/gionkunz/chartist-js/master/LICENSE-MIT\n */\n",
     "src": "src",
     "dist": "dist",
     "site": "site",

site/code-snippets/1-dimension-values.js

@@ -0,0 +1,4 @@
+var data = {
+  labels: ['A', 'B', 'C'],
+  series: [[10, 8, 14]]
+};

site/code-snippets/2-dimensions-values.js

@@ -0,0 +1,8 @@
+var data = {
+  labels: ['A', 'B', 'C'],
+  series: [[
+    {x: undefined, y: 10},
+    {x: undefined, y: 8},
+    {x: undefined, y: 14}
+  ]]
+};

site/code-snippets/colour-override-line-chart.css

@@ -0,0 +1,9 @@
+.ct-series-a .ct-line,
+.ct-series-a .ct-point {
+  stroke: blue;
+}
+
+.ct-series-b .ct-line,
+.ct-series-b .ct-point {
+  stroke: green;
+}

site/code-snippets/custom-style-bar-chart.css

@@ -0,0 +1,11 @@
+/* Use this selector to override bar styles on bar charts. Bars are also strokes so you have maximum freedom in styling them. */
+.ct-series-a .ct-bar {
+  /* Colour of your bars */
+  stroke: red;
+  /* The width of your bars */
+  stroke-width: 20px;
+  /* Yes! Dashed bars! */
+  stroke-dasharray: 20px;
+  /* Maybe you like round corners on your bars? */
+  stroke-linecap: round;
+}

site/code-snippets/custom-style-donut-chart.css

@@ -0,0 +1,9 @@
+/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
+.ct-series-a .ct-slice-donut {
+  /* give the donut slice a custom colour */
+  stroke: blue;
+  /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
+  stroke-width: 5px !important;
+  /* create modern looking rounded donut charts */
+  stroke-linecap: round;
+}

site/code-snippets/custom-style-line-chart.css

@@ -0,0 +1,19 @@
+/* Use this selector to override the line style on a given series */
+.ct-series-a .ct-line {
+  /* Set the colour of this series line */
+  stroke: red;
+  /* Control the thikness of your lines */
+  stroke-width: 5px;
+  /* Create a dashed line with a pattern */
+  stroke-dasharray: 10px 20px;
+}
+
+/* This selector overrides the points style on line charts. Points on line charts are actually just very short strokes. This allows you to customize even the point size in CSS */
+.ct-series-a .ct-point {
+  /* Colour of your points */
+  stroke: red;
+  /* Size of your points */
+  stroke-width: 20px;
+  /* Make your points appear as squares */
+  stroke-linecap: square;
+}

site/code-snippets/custom-style-pie-chart.css

@@ -0,0 +1,9 @@
+/* Pie charts consist of solid slices where you can use this selector to override the default style. */
+.ct-series-a .ct-slice-pie {
+  /* fill of the pie slieces */
+  fill: hsl(120, 40%, 60%);
+  /* give your pie slices some outline or separate them visually by using the background color here */
+  stroke: white;
+  /* outline width */
+  stroke-width: 4px;
+}

site/code-snippets/simple-start-fixed-chart.js

@@ -17,4 +17,4 @@ var options = {
 // Create a new line chart object where as first parameter we pass in a selector
 // that is resolving to our chart container element. The Second parameter
 // is the actual data object. As a third parameter we pass in our custom options.
-new Chartist.Bar('.ct-chart', data, options);
+new Chartist.Line('.ct-chart', data, options);

site/code-snippets/simple-start.html

@@ -1,7 +1,12 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css">
-    <script src="bower_components/chartist/dist/chartist.min.js"></script>
+    <title>My first Chartist Tests</title>
+    <link rel="stylesheet"
+          href="bower_components/chartist/dist/chartist.min.css">
   </head>
+  <body>
+    <!-- Site content goes here !-->
+    <script src="bower_components/chartist/dist/chartist.min.js"></script>
+  </body>
 </html>

site/code-snippets/two-charts.html

@@ -0,0 +1,16 @@
+<div class="ct-chart ct-golden-section" id="chart1"></div>
+<div class="ct-chart ct-golden-section" id="chart2"></div>
+
+<script>
+  // Initialize a Line chart in the container with the ID chart1
+  new Chartist.Line('#chart1', {
+    labels: [1, 2, 3, 4],
+    series: [[100, 120, 180, 200]]
+  });
+
+  // Initialize a Line chart in the container with the ID chart2
+  new Chartist.Bar('#chart2', {
+    labels: [1, 2, 3, 4],
+    series: [[5, 2, 8, 3]]
+  });
+</script>

site/data/pages/examples.yml

@@ -9,6 +9,35 @@ sections:
           id: simple-line-chart
           classes: ct-golden-section
           intro: An example of a simple line chart with three series. You can edit this example in realtime.
+      - type: live-example
+        data:
+          title: Holes in data
+          level: 4
+          id: example-line-data-holes
+          classes: ct-golden-section
+          intro: >
+                   Chartist does not freak out if you have holes in your data. Instead it will render the lines in
+                   segments and handles these holes gracefully. This also allows you to introduce a line at a later
+                   point or to terminate the series before others.
+      - type: live-example
+        data:
+          title: Filled holes in data
+          level: 4
+          id: example-line-data-fill-holes
+          classes: ct-golden-section
+          intro: >
+                   Sometimes you don't want your data looking so fragmented, even when it really is.  That's why you
+                   can also configure Chartist to smooth over holes in your data.
+      - type: live-example
+        data:
+          title: Only whole numbers
+          level: 4
+          id: example-line-only-integer
+          classes: ct-golden-section
+          intro: >
+                   You're dealing with series that contain only whole numbers? It looks weird that Chartist is creating
+                   a scale that contains fractions even if your data does not? No problem! Tell the Chartist guy to
+                   only use integers and he'll do the math!
       - type: live-example
         data:
           title: Line scatter diagram with responsive settings
@@ -19,16 +48,6 @@ sections:
                    This advanced example uses a line chart to draw a scatter diagram. The data object is created
                    with a functional style random mechanism. There is a mobile first responsive configuration using
                    the responsive options to show less labels on small screens.
-      - type: live-example
-        data:
-          title: Line chart with tooltips
-          level: 4
-          id: behavior-with-jquery
-          classes: ct-golden-section
-          intro: >
-                   Adding behavior to your chart with JavaScript is a breeze and is just like any other DOM manipulation
-                   you do to your site. This is just one of many benefits of using inline-SVG and provides you with the
-                   freedom you need in order to create exactly the experience you're looking for.
       - type: live-example
         data:
           title: Line chart with area
@@ -90,6 +109,28 @@ sections:
                    things in Chartist, this can be customized easily! Check out
                    <a href="api-documentation.html#module-chartistinterpolation">the API Documentation</a> for more
                    smoothing options.
+      - type: live-example
+        data:
+          title: Series Overrides
+          level: 4
+          id: example-line-series-override
+          classes: ct-golden-section
+          intro: >
+                   By naming your series using the series object notation with a name property, you can enable the
+                   individual configuration of series specific settings. <code>showLine</code>, <code>showPoint</code>,
+                   <code>showArea</code> and even the smoothing function can be overriden per series! And guess what?
+                   You can even override those series settings in the responsive configuration! Check the example code
+                   for more details.
+      - type: live-example
+        data:
+          title: Time Series with Moment.js
+          level: 4
+          id: example-timeseries-moment
+          classes: ct-golden-section
+          intro: >
+                   This example uses <a href="http://momentjs.com/">Moment.js</a> in the label interpolation function 
+                   to format a date object. The fixed axis ensures that there is correct spacing between the data points, 
+                   and the number of labels is determined by the divisor.
   - title: Bar chart examples
     level: 3
     items:
@@ -100,7 +141,7 @@ sections:
           id: bi-polar-bar-interpolated
           classes: ct-golden-section
           intro: >
-                    A bi-plar bar chart with a range limit set with low and high. There is also an interpolation
+                    A bi-polar bar chart with a range limit set with low and high. There is also an interpolation
                     function used to skip every odd grid line / label.
       - type: live-example
         data:
@@ -128,7 +169,7 @@ sections:
           classes: ct-golden-section
           intro: >
                     Chartist will figure out if your browser supports foreignObject and it will use them to create labels
-                    that re based on regular HTML text elements. Multi-line and regular CSS styles are just two of many
+                    that are based on regular HTML text elements. Multi-line and regular CSS styles are just two of many
                     benefits while using foreignObjects!
       - type: live-example
         data:
@@ -157,6 +198,26 @@ sections:
           intro: >
                     As all settings of a chart can be customized with the responsive configuration override mechanism of
                     Chartist, you can create a chart that adopts to every media condition!
+      - type: live-example
+        data:
+          title: Distributed series
+          level: 4
+          id: example-bar-distributed-series
+          classes: ct-golden-section
+          intro: >
+                    Sometime it's desired to have bar charts that show one bar per series distributed along the x-axis. If
+                    this option is enabled, you need to make sure that you pass a single series array to Chartist that
+                    contains the series values. In this example you can see T-shirt sales of a store categorized by size.
+      - type: live-example
+        data:
+          title: Label placement
+          level: 4
+          id: example-bar-label-position
+          classes: ct-golden-section
+          intro: >
+                    You can change the position of the labels on line and bar charts easily by using the <code>position</code>
+                    option inside of the axis configuration.
+
   - title: Pie chart examples
     level: 3
     items:
@@ -185,3 +246,29 @@ sections:
           id: simple-gauge-chart
           classes: ct-golden-section ct-negative-labels
           intro: This pie chart uses donut, startAngle and total to draw a gauge chart.
+
+      - type: live-example
+        data:
+          title: Animating a Donut with Svg.animate
+          level: 4
+          id: example-donut-animation
+          classes: ct-golden-section
+          intro: >
+                    Although it'd be also possible to achieve this animation with CSS, with some minor suboptimal
+                    things, here's an example of how to animate donut charts using Chartist.Svg.animate and SMIL.
+
+      - type: live-example
+        data:
+          title: Donut chart using fill rather than stroke
+          level: 4
+          id: example-donut-solid-chart
+          classes: ct-golden-section ct-negative-labels
+          intro: This pie chart uses donut and donutSolid to draw a donut chart.
+
+      - type: live-example
+        data:
+          title: Gauge chart using fill rather than stroke
+          level: 4
+          id: example-gauge-donut-solid-chart
+          classes: ct-golden-section ct-negative-labels
+          intro: This pie chart uses total, startAngle, donut and donutSolid to draw a gauge chart.

site/data/pages/getting-started.yml

@@ -90,7 +90,7 @@ sections:
             - type: code
               data:
                 lang: bash
-                code: cp bower_components/chartist/libdist/scss/settings/_chartist-settings.scss styles
+                code: cp bower_components/chartist/dist/scss/settings/_chartist-settings.scss styles
 
             - type: text
               data:
@@ -124,9 +124,9 @@ sections:
 
             - type: code-snippet
               data:
-                id: default-Sass-settings
+                id: default-sass-settings
                 button: Show default settings
-                path: site/styles/settings/_chartist-settings.scss
+                path: src/styles/settings/_chartist-settings.scss
                 lang: scss
 
   - title: Create your first chart
@@ -284,6 +284,23 @@ sections:
                       id: simple-start-fixed-chart
                       lang: js
 
+            - type: sub-section
+              data:
+                title: More than one chart on my page?
+                level: 5
+                items:
+                  - type: text
+                    data:
+                      text: >
+                              The example above uses the chartist default class to select the element where the chart should
+                              be created. This class is important for applying the right styles in the CSS of Chartist. If
+                              you need to create individual charts on one page, you should use IDs to initialize them separately.
+
+                  - type: code-snippet
+                    data:
+                      id: two-charts
+                      lang: html
+
       - type: sub-section
         data:
           title: The configuration of your chart
@@ -360,7 +377,193 @@ sections:
                 classes: hint-cross-browser
                 text: >
                         For IE9 you need to use a matchMedia polyfill. You should take a look at
-                        <a href="https://github.com/paulirish/matchMedia.js/">Paul Irish's matchMedia polyfill</a>.
+                        <a href="https://github.com/paulirish/matchMedia.js/">Paul Irish's matchMedia polyfill</a>. Make
+                        sure you include matchMedia.js as well as matchMedia.addListener.js as always both are needed
+                        to polyfill the full specification of window.matchMedia.
+
+      - type: sub-section
+        data:
+          title: Different configuration for different series
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        Chartist also allows you to add specific configuration overrides for your series. This is useful
+                        if you want to combine different looks for your series on the same chart.
+            - type: text
+              data:
+                text: >
+                        You can even take this one step further by again overriding your series configuration in some
+                        responsive settings overrides. This sounds complicated but it actually is very simple. Check the
+                        example code with inline comments below to see how easy it is.
+            - type: example-chart
+              data:
+                id: example-line-series-override
+                classes: ct-golden-section
+                show-code-button: Show code
+
+  - title: Styling your chart
+    level: 3
+    items:
+      - type: text
+        data:
+          text: >
+                  You should always use the power of CSS to make your data pop into your visitors eyes. I know
+                  I’m telling this over and over but it’s all about a clean separation of concerns. In this chapter
+                  you’ll find some useful information on how to style your charts with CSS.
+      - type: sub-section
+        data:
+          title: Customizing the default CSS
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        Chartist comes with a highly customizable Sass file that allows you to customize all sorts of
+                        appearance relevant things on your charts including colours used for series, line styles,
+                        thickness and other properties. If you have the advantage of having a Sass build process at
+                        your disposal, I highly recommend you to use the Sass version of Chartist instead of the
+                        already prebuilt CSS. For more information on how to use the Sass version
+                        please <a href="#the-sass-way">check out the Sass way of Chartist</a>.
+
+            - type: text
+              data:
+                text: >
+                        Chartist generates predefined classes for series by default. Those class names are alphabetically 
+                        ordered and always start with <code>ct-series-a</code>, where the letter a will be iterated
+                        with each series count (a, b, c, d etc.). To address a specific series in styling, you’ll
+                        need to create some styles for the corresponding series class name.
+
+            - type: text
+              data:
+                text: >
+                        Here is a list of selectors from the different chart types with some comments to explain what
+                        properties can be used to influence the visual style of your charts.
+
+            - type: sub-section
+              data:
+                title: Line chart
+                level: 5
+                items:
+                  - type: code-snippet
+                    data:
+                      id: custom-style-line-chart
+                      lang: css
+
+            - type: sub-section
+              data:
+                title: Bar chart
+                level: 5
+                items:
+                  - type: code-snippet
+                    data:
+                      id: custom-style-bar-chart
+                      lang: css
+
+            - type: sub-section
+              data:
+                title: Pie chart
+                level: 5
+                items:
+                  - type: code-snippet
+                    data:
+                      id: custom-style-pie-chart
+                      lang: css
+
+            - type: sub-section
+              data:
+                title: Donut chart
+                level: 5
+                items:
+                  - type: code-snippet
+                    data:
+                      id: custom-style-donut-chart
+                      lang: css
+
+      - type: sub-section
+        data:
+          title: Colour up your charts
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        Colour is a core attribute of appearance and as you already know, we believe in strong
+                        separation of concerns in web development. Therefore, Chartist does not include any options
+                        within the JavaScript API to control colour of your charts.
+            - type: text
+              data:
+                text: >
+                        This might first seem very inconvenient, but you’ll agree that it’s the right choice once you
+                        need to change some colours in your web project where you’d need to go through some nasty
+                        find-and-replace adventures in your JavaScript files to fix some colour mismatches.
+            - type: text
+              data:
+                text: >
+                        The prebuilt CSS version of Chartist ships with 15 default colours that will be applied to your
+                        chart series elements. If you just want to override some of these colours I recommend you use
+                        the information
+                        found in <a href="#customizing-the-default-css">how to customize the default CSS of Chartist</a>.
+            - type: text
+              data:
+                text: >
+                        The following example illustrates how you’d override the colours of your line chart line and
+                        point elements, within the two first sieries (ct-series-a and ct-series-b).
+            - type: code-snippet
+              data:
+                id: colour-override-line-chart
+                lang: css
+
+            - type: text
+              data:
+                text: >
+                        Note that on SVG elements there are two CSS properties for colourization. For strokes you
+                        should use the <code>stroke</code> property and assign a CSS colour value. For fill areas you
+                        can use the <code>fill</code> property. More information can be found in the above topics.
+
+            - type: sub-section
+              data:
+                title: Dynamic colouring
+                level: 5
+                items:
+                  - type: text
+                    data:
+                      text: >
+                              Often, predefined classes which can be used to colour your charts are fine but sometimes
+                              CSS is not flexible enough to control all facets of dynamic appearance. While we could
+                              build semantic classes like level1, level2, level3 and so on, we could then assign a
+                              class dynamically, but still we’d need to rely on discrete values defined in CSS. One
+                              lack of CSS today is that it does not incorporate dynamic values like mouse position
+                              or placeholder variables that can be linked to JavaScript.
+                  - type: text
+                    data:
+                      text: >
+                              So, how do you go about your heat map chart or dynamically calculated line chart
+                              strokes based on your data?
+                  - type: text
+                    data:
+                      text: >
+                              Chartist offers you a powerful tool for such kind of chart manipulations. The intrusive
+                              event pipeline of Chartist allows you to hook into a <code>draw</code> event that allows
+                              you to modify all your charts elements on the go while they’re drawn.
+                  - type: text
+                    data:
+                      text: >
+                              The following live code example shows you how to make a dynamically coloured chart
+                              based on some data. Please go ahead and play around with the example, that’s what live
+                              coding is for! For more information on how to use the <code>Chartist.Svg</code> API,
+                              please <a href="http://gionkunz.github.io/chartist-js/api-documentation.html#module-chartistsvg">check
+                              the API documentation</a>.
+            - type: live-example
+              data:
+                title: Using draw events to modify chart elements
+                level: 5
+                id: example-dynamic-colours
+                classes: ct-golden-section
+                intro: >
+                         By using the intrusive event pipeline of Chartist, you can easily change the behaviour of your
+                         charts in a consistent and convenient way.
 
   - title: Advanced
     level: 3
@@ -368,35 +571,11 @@ sections:
       - type: text
         data:
           text: >
-                  In the following chapter you'll find some advanced usage examples that might be of interesst for you.
+                  In the following chapter you'll find some advanced usage examples that might be of interest for you.
                   Chartist is very flexible because it relies on standard technology. This also means that you will need
                   to implement certain things yourself. This topic should cover some of these use-cases and give you some
                   basic idea why and how to implement certain functionality.
 
-      - type: sub-section
-        data:
-          title: Adding behavior to your charts
-          level: 4
-          items:
-            - type: text
-              data:
-                text: >
-                        This example shows you how you can easily build a tool tip on top of Chartist using jQuery and some
-                        basic styling. It makes use of the ct-series-name and ct-value custom attributes that are present
-                        on all SVG elements generated by Chartist.
-            - type: text
-              data:
-                text: >
-                        We actually do a few things here that would go against a proper style guide (like animating with
-                        JavaScript and changing styles instead of switching classes etc.), but this example is only for
-                        illustrating how easy behavior could be attached to Chartist.
-
-            - type: example-chart
-              data:
-                id: behavior-with-jquery
-                classes: ct-golden-section
-                show-code-button: Show code
-
       - type: sub-section
         data:
           title: Animations using Chartist.Svg
@@ -430,3 +609,121 @@ sections:
                 classes: ct-golden-section
                 intro: >
                          Edit this example to figure out how to tweak animations. The force is strong in you young padawan!
+
+      - type: sub-section
+        data:
+          title: Switching axis type
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        The default configuration of the line chart is that it will use a step based X-Axis and an
+                        automatic linear scale for the Y-Axis. This is all happening under the hood of Chartist and
+                        already satisfies a lot of use-cases.
+            - type: text
+              data:
+                text: >
+                        Sometimes though, it's not enough to have a fixed step chart and you'd need something a bit
+                        more complex. Something that allows you to plot those values along the X- and Y-Axis, instead
+                        of just the Y-Axis. Sometimes, you'd also want to specify the ticks on your chart manually
+                        rather than having them auto calculated from Chartist.
+            - type: text
+              data:
+                text: >
+                        Of course Chartist wouldn't let you down with all those ideas you have in mind on how to
+                        visualize your data!
+
+            - type: sub-section
+              data:
+                title: A line chart is only 1-dimensional?!
+                level: 5
+                items:
+                  - type: text
+                    data:
+                      text: >
+                              By default, Chartist uses <code>Chartist.StepAxis</code> for the X-Axis and <code>Chartist.AutoScaleAxis</code>
+                              for the Y-Axis. Please read the <a href="api-documentation.html">API documentation</a>
+                              if you'd like to get more details, or available options on axis configuration.
+                  - type: text
+                    data:
+                      text: >
+                              The step based axis will not use any value for projection but rather rely on the index
+                              of the given value to determine the position. This is fine for discrete steps of one
+                              dimensional data, like we know it from regular Chartist charts:
+                  - type: code-snippet
+                    data:
+                      id: 1-dimension-values
+                      lang: js
+                  - type: text
+                    data:
+                      text: >
+                              What really happens with such one dimensional series data under the hood is that it will
+                              be transformed into two dimensional data like so:
+                  - type: code-snippet
+                    data:
+                      id: 2-dimensions-values
+                      lang: js
+                  - type: text
+                    data:
+                      text: >
+                              You can see that Chartist will automatically convert one dimensional data into two
+                              dimensional values where the previous value is assigned to <code>y</code> and <code>x</code> will be set to
+                              <code>undefined</code>. As the default axis for projecting the <code>x</code> value
+                              is a <code>Chartist.StepAxis</code> that relies on the value index rather than the
+                              value, this is perfectly fine for the default setup.
+
+
+            - type: sub-section
+              data:
+                title: Creating an XY-plot chart
+                level: 5
+                items:
+                  - type: text
+                    data:
+                      text: >
+                              In order to plot on the X-Axis too, we'd need to switch the standard axis type
+                              <code>Chartist.StepAxis</code> to something more continuous. Let's create a full fledged auto
+                              scale chart that scales both the Y- and X-Axis automatically using
+                              the <code>Chartist.AutoScaleAxis</code>!
+                  - type: live-example
+                    data:
+                      title: Configure your axis type
+                      level: 6
+                      id: example-axis-auto
+                      classes: ct-golden-section
+                      intro: >
+                               Note that we have just specified the X-Axis because the Y-Axis is configured to
+                               <code>Chartist.AutoScaleAxis</code> by default.
+                  - type: text
+                    data:
+                      text: >
+                              A few things are different in this chart. Because
+                              the <code>labels</code> array of our data is just used to be mapped as <code>ticks</code> option for the
+                              default <code>Chartist.StepAxis</code> X-Axis, we can completely remove the labels from our data,
+                              once we use a different axis than the step based one. Also you can see now from the
+                              data series is that we are specifying 2-dimensional values directly.
+
+            - type: sub-section
+              data:
+                title: Fixed stuff can be sweet too!
+                level: 5
+                items:
+                  - type: text
+                    data:
+                      text: >
+                              The following example shows how to create an axis with some fixed ticks.
+                              The <code>Chartist.FixedScaleAxis</code> can be used to create a more rudimentary
+                              continuous linear scale, where ticks can be fixed either with an array of values or
+                              with a divisor. For the detailed options please check
+                              the <a href="api-documentation.html">API documentation</a>.
+                  - type: live-example
+                    data:
+                      title: Unleash your creativity...
+                      level: 6
+                      id: example-axis-fixed-and-auto
+                      classes: ct-golden-section
+                      intro: >
+                               Let's say we'd like to fix a few ticks on the Y-Axis on our chart as those are the only
+                               ones we're interested in. The X-Axis should be continuous too, but let's make
+                               that axis a <code>Chartist.AutoScaleAxis</code>.

site/data/pages/index.yml

@@ -1,3 +1,19 @@
+affiliate-projects:
+  - title: Material Dashboard Pro
+    link: https://www.creative-tim.com/product/material-dashboard-pro?ref=chartist.io
+    image:
+      src: https://s3.amazonaws.com/creativetim_bucket/products/51/original/opt_mdp_thumbnail.jpg
+      alt: Material Dashboard Pro
+  - title: Material Dashboard Pro Angular
+    link: https://www.creative-tim.com/product/material-dashboard-pro-angular2?ref=chartist.io
+    image:
+      src: https://s3.amazonaws.com/creativetim_bucket/products/55/original/opt_mdp_angular_thumbnail.jpg
+      alt: Material Dashboard Pro Angular
+  - title: Light Bootstrap Dashboard PRO React
+    link: https://www.creative-tim.com/product/light-bootstrap-dashboard-pro-react?ref=chartist.io
+    image:
+      src: https://s3.amazonaws.com/creativetim_bucket/products/66/original/opt_lbdp_react_thumbnail.jpg
+      alt: Light Bootstrap Dashboard PRO React
 gallery-examples:
   - id: example-gallery-one
     classes: ct-golden-section
@@ -167,7 +183,7 @@ sections:
                 - name: iOS Safari 7
                   status: supported
                   text: Supported
-            - name: Reponsive Options Override
+            - name: Responsive Options Override
               browsers:
                 - name: IE9*
                   status: supported
@@ -216,9 +232,15 @@ sections:
             - Project
             - Type
           rows:
+            -
+              - '<a href="https://github.com/panosoft/node-chartist" target="_blank">node-chartist</a>'
+              - Node Package for Server-side Charts
             -
               - '<a href="https://github.com/paradox41/ng-chartist.js" target="_blank">ng-chartist.js</a>'
               - Angular Directive
+            -
+              - '<a href="https://github.com/gruberb/chartistAngularDirective" target="_blank">chartistAngularDirective.js</a>'
+              - Angular Directive
             -
               - '<a href="https://fraserxu.me/react-chartist" target="_blank">react-chartist</a>'
               - React Component
@@ -228,9 +250,18 @@ sections:
             -
               - '<a href="https://github.com/soderlind/tablepress_chartist" target="_blank">tablepress_chartist</a>'
               - Wordpress / Tablepress Extension
-            - 
+            -
               - '<a href="https://github.com/tylergaw/ember-cli-chartist" target="_blank">ember-cli-chartist</a>'
               - Ember Addon
+            -
+              - '<a href="https://github.com/hatemalimam/ChartistJSF" target="_blank">ChartistJSF</a>'
+              - Java Server Faces (Prime Faces) Component
+            -
+              -'<a href="https://github.com/Yopadd/vue-chartist" target="_blank">vue-chartist</a>'
+              - Vue plugin
+            -
+              -'<a href="https://github.com/eriklieben/aurelia-chartist" target="_blank">aurelia-chartist</a>'
+              - Aurelia plugin
   - title: Chart CSS animation example
     level: 3
     items:
@@ -287,4 +318,4 @@ sections:
     side-notes:
       - type: text
         data:
-          text: With the clear separation of concerns within Chartist.js you're able to style your charts with CSS in @media queries. However, sometimes it requires to also control the behaviour of your charts depending on the media. For this purpose Chartist.js provides you with a simple configuration override mechanism based on media queries.
+          text: With the clear separation of concerns within Chartist.js, you're able to style your charts with CSS in @media queries. However, sometimes you also need to conditionally control the behavior of your charts. For this purpose, Chartist.js provides you with a simple configuration override mechanism based on media queries.

site/data/pages/plugins.yml

@@ -55,6 +55,77 @@ sections:
                   <a href="https://github.com/gionkunz/chartist-js/blob/develop/site/data/pages/examples.yml" target="_blank">pull request
                   for this page</a> and add your plugin to the list.
 
+      - type: sub-section
+        data:
+          title: Accessibility Plugin
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision.
+                        We should stop the discrimination against our fellow human and, by fairly little effort and following best
+                        practices, make our content on the web accessible.
+            - type: text
+              data:
+                text: >
+                        The accessibility plugin makes your chart accessible for blind people. It automatically generates
+                        visually hidden accessibility tables that allow you to describe your chart for blind people easily.
+                        This plugin was tested with NVDA and JAWS, and provides all necessary things for building an accessible chart.
+            - type: text
+              data:
+                text: >
+                        By simply including this plugin with default configurations you will already make your charts
+                        accessible to blind people! If you put in 5 minutes effort in customizing the configuration with
+                        meaningful content, you will actually even make them enjoy your charts!
+            - type: live-example
+              data:
+                id: example-plugin-accessibility
+                classes: ct-golden-section
+                intro: >
+                         Creating an accessible chart that shows some fiscal year figures. This example overrides the visuallyHiddenStyles
+                         configuration property so you can actually see the "invisible" table.
+            - type: table
+              data:
+                rows:
+                  -
+                    - '<strong>Author:</strong>'
+                    - Gion Kunz
+                  -
+                    - '<strong>Link:</strong>'
+                    - '<a href="https://github.com/gionkunz/chartist-plugin-accessibility" target="_blank">chartist-plugin-accessibility</a>'
+
+      - type: sub-section
+        data:
+          title: Tooltip Plugin
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        The tooltip plugin makes it super simple to add tooltips to most of your charts which can often
+                        increase it's usability.
+            - type: text
+              data:
+                text: >
+                        By simply including this plugin with default configurations you will already make your charts
+                        get some tooltips showing.
+            - type: live-example
+              data:
+                id: example-plugin-tooltip
+                classes: ct-golden-section
+                intro: >
+                         Creating a simple line chart showing how the tooltips work.
+            - type: table
+              data:
+                rows:
+                  -
+                    - '<strong>Author:</strong>'
+                    - Markus Padourek
+                  -
+                    - '<strong>Link:</strong>'
+                    - '<a href="https://github.com/Globegitter/chartist-plugin-tooltip" target="_blank">chartist-plugin-tooltip</a>'
+
       - type: sub-section
         data:
           title: Point Label Plugin
@@ -84,21 +155,44 @@ sections:
 
       - type: sub-section
         data:
-          title: Sketchy Plugin
+          title: Axis Title Plugin
           level: 4
           items:
             - type: text
               data:
                 text: >
-                        The sketchy plugin makes your charts look like they have been drawn by hand. This plugin makes use
-                        of SVG filters and works on IE10+, Safari 7+ and Android 4.4+. Also note that SVG filters are not
-                        very performant and they will eat your users mobile battery quickly for sure.
+                        The axis title plugin allows you to add simple titles to your axes.
             - type: live-example
               data:
-                id: example-plugin-sketchy
+                id: example-plugin-axistitle
                 classes: ct-golden-section
                 intro: >
-                         Create beautiful hand drawn charts using the Chartist Sketchy plugin.
+                          While not a core functionality, this plugin makes it absolutely easy to add axis titles to your chart.
+            - type: table
+              data:
+                rows:
+                  -
+                    - '<strong>Author:</strong>'
+                    - Alex Stanbury
+                  -
+                    - '<strong>Link:</strong>'
+                    - '<a href="https://github.com/alexstanbury/chartist-plugin-axistitle" target="_blank">chartist-plugin-axistitle</a>'
+      - type: sub-section
+        data:
+          title: Threshold Plugin
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        This Chartist plugin can be used to divide your Line or Bar chart with a threshold.
+            - type: live-example
+              data:
+                id: example-plugin-threshold
+                classes: ct-golden-section
+                intro: >
+                          Everything above and below the
+                          threshold will be tagged with a special class, in order for your to apply different styling where appropriate.
             - type: table
               data:
                 rows:
@@ -107,7 +201,81 @@ sections:
                     - Gion Kunz
                   -
                     - '<strong>Link:</strong>'
-                    - '<a href="https://github.com/gionkunz/chartist-plugin-sketchy" target="_blank">chartist-plugin-sketchy</a>'
+                    - '<a href="https://github.com/gionkunz/chartist-plugin-threshold" target="_blank">chartist-plugin-threshold</a>'
+      - type: sub-section
+        data:
+          title: FillDonut Plugin
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        Let animated donuts look filled and provide options for append labels and html to the donut chart.
+                        This plugin draw the donut a second time but without delay and animation, so it animation will overlaps and looks like the fill the donut.
+                        Also your a possible to add multiple html-labels to the donut on different positions.
+            - type: live-example
+              data:
+                id: example-plugin-fill-donut
+                classes: ct-golden-section
+                intro: >
+                          Let animated donuts look filled and provide options for append labels and html to the donut chart.
+            - type: table
+              data:
+                rows:
+                  -
+                    - '<strong>Author:</strong>'
+                    - Moxx
+                  -
+                    - '<strong>Link:</strong>'
+                    - '<a href="https://github.com/moxx/chartist-plugin-fill-donut" target="_blank">chartist-plugin-fill-donut</a>'
+      - type: sub-section
+        data:
+          title: Zoom Plugin
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        The zoom plugin allows you to zoom into charts.
+            - type: live-example
+              data:
+                id: example-plugin-zoom
+                classes: ct-golden-section
+                intro: >
+                          Use the left mouse button to drag a zoom box. The plugin provides a callback that can be used to reset the zoom.
+            - type: table
+              data:
+                rows:
+                  -
+                    - '<strong>Author:</strong>'
+                    - Hannes Kamecke
+                  -
+                    - '<strong>Link:</strong>'
+                    - '<a href="https://github.com/hansmaad/chartist-plugin-zoom" target="_blank">chartist-plugin-zoom</a>'
+      - type: sub-section
+        data:
+          title: Target Line Plugin
+          level: 4
+          items:
+            - type: text
+              data:
+                text: >
+                        The target line plugin allows you to draw a target line on your chart.
+            - type: live-example
+              data:
+                id: example-plugin-targetline
+                classes: ct-golden-section
+                intro: >
+                          Pass a value to the plugin to draw a target line on the chart.
+            - type: table
+              data:
+                rows:
+                  -
+                    - '<strong>Author:</strong>'
+                    - Harry Twyford
+                  -
+                    - '<strong>Link:</strong>'
+                    - '<a href="https://github.com/htwyford/chartist-plugin-targetline" target="_blank">chartist-plugin-targetline</a>'
   - title: Develop a plugin
     level: 3
     items:

site/examples/behavior-with-jquery.js

@@ -1,38 +0,0 @@
-new Chartist.Line('.ct-chart', {
-  labels: ['1', '2', '3', '4', '5', '6'],
-  series: [
-    {
-      name: 'Fibonacci sequence',
-      data: [1, 2, 3, 5, 8, 13]
-    },
-    {
-      name: 'Golden section',
-      data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
-    }
-  ]
-});
-
-var $chart = $('.ct-chart');
-
-var $toolTip = $chart
-  .append('<div class="tooltip"></div>')
-  .find('.tooltip')
-  .hide();
-
-$chart.on('mouseenter', '.ct-point', function() {
-  var $point = $(this),
-    value = $point.attr('ct:value'),
-    seriesName = $point.parent().attr('ct:series-name');
-  $toolTip.html(seriesName + '<br>' + value).show();
-});
-
-$chart.on('mouseleave', '.ct-point', function() {
-  $toolTip.hide();
-});
-
-$chart.on('mousemove', function(event) {
-  $toolTip.css({
-    left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
-    top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
-  });
-});

site/examples/example-axis-auto.js

@@ -0,0 +1,14 @@
+new Chartist.Line('.ct-chart', {
+  series: [[
+    {x: 1, y: 100},
+    {x: 2, y: 50},
+    {x: 3, y: 25},
+    {x: 5, y: 12.5},
+    {x: 8, y: 6.25}
+  ]]
+}, {
+  axisX: {
+    type: Chartist.AutoScaleAxis,
+    onlyInteger: true
+  }
+});

site/examples/example-axis-fixed-and-auto.js

@@ -0,0 +1,21 @@
+new Chartist.Line('.ct-chart', {
+  series: [[
+    {x: 1, y: 100},
+    {x: 2, y: 50},
+    {x: 3, y: 25},
+    {x: 5, y: 12.5},
+    {x: 8, y: 6.25}
+  ]]
+}, {
+  axisX: {
+    type: Chartist.AutoScaleAxis,
+    onlyInteger: true
+  },
+  axisY: {
+    type: Chartist.FixedScaleAxis,
+    ticks: [0, 50, 75, 87.5, 100],
+    low: 0
+  },
+  lineSmooth: Chartist.Interpolation.step(),
+  showPoint: false
+});

site/examples/example-bar-distributed-series.js

@@ -0,0 +1,6 @@
+new Chartist.Bar('.ct-chart', {
+  labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
+  series: [20, 60, 120, 200, 180, 20, 10]
+}, {
+  distributeSeries: true
+});

site/examples/example-bar-label-position.js

@@ -0,0 +1,16 @@
+new Chartist.Bar('.ct-chart', {
+  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  series: [
+    [5, 4, 3, 7, 5, 10, 3],
+    [3, 2, 9, 5, 4, 6, 4]
+  ]
+}, {
+  axisX: {
+    // On the x-axis start means top and end means bottom
+    position: 'start'
+  },
+  axisY: {
+    // On the y-axis start means left and end means right
+    position: 'end'
+  }
+});

site/examples/example-bar-with-circle-modify-drawing.js

@@ -22,7 +22,7 @@ chart.on('draw', function(data) {
     data.group.append(new Chartist.Svg('circle', {
       cx: data.x2,
       cy: data.y2,
-      r: Math.abs(data.value) * 2 + 5
-    }, 'ct-slice'));
+      r: Math.abs(Chartist.getMultiValue(data.value)) * 2 + 5
+    }, 'ct-slice-pie'));
   }
 });

site/examples/example-donut-animation.js

@@ -0,0 +1,55 @@
+var chart = new Chartist.Pie('.ct-chart', {
+  series: [10, 20, 50, 20, 5, 50, 15],
+  labels: [1, 2, 3, 4, 5, 6, 7]
+}, {
+  donut: true,
+  showLabel: false
+});
+
+chart.on('draw', function(data) {
+  if(data.type === 'slice') {
+    // Get the total path length in order to use for dash array animation
+    var pathLength = data.element._node.getTotalLength();
+
+    // Set a dasharray that matches the path length as prerequisite to animate dashoffset
+    data.element.attr({
+      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
+    });
+
+    // Create animation definition while also assigning an ID to the animation for later sync usage
+    var animationDefinition = {
+      'stroke-dashoffset': {
+        id: 'anim' + data.index,
+        dur: 1000,
+        from: -pathLength + 'px',
+        to:  '0px',
+        easing: Chartist.Svg.Easing.easeOutQuint,
+        // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
+        fill: 'freeze'
+      }
+    };
+
+    // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
+    if(data.index !== 0) {
+      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
+    }
+
+    // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
+    data.element.attr({
+      'stroke-dashoffset': -pathLength + 'px'
+    });
+
+    // We can't use guided mode as the animations need to rely on setting begin manually
+    // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
+    data.element.animate(animationDefinition, false);
+  }
+});
+
+// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
+chart.on('created', function() {
+  if(window.__anim21278907124) {
+    clearTimeout(window.__anim21278907124);
+    window.__anim21278907124 = null;
+  }
+  window.__anim21278907124 = setTimeout(chart.update.bind(chart), 10000);
+});

site/examples/example-donut-solid-chart.js

@@ -0,0 +1,9 @@
+new Chartist.Pie('.ct-chart', {
+  series: [20, 10, 30, 40]
+}, {
+  donut: true,
+  donutWidth: 60,
+  donutSolid: true,
+  startAngle: 270,
+  showLabel: true
+});

site/examples/example-dynamic-colours.js

@@ -0,0 +1,29 @@
+var count = 45;
+var max = 100;
+
+// Creating a bar chart with no labels and a series array with one series. For the series we generate random data with `count` elements and random data ranging from 0 to `max`.
+var chart = new Chartist.Bar('.ct-chart', {
+  labels: Chartist.times(count),
+  series: [
+    Chartist.times(count).map(Math.random).map(Chartist.mapMultiply(max))
+  ]
+}, {
+  axisX: {
+    showLabel: false
+  },
+  axisY: {
+    onlyInteger: true
+  }
+});
+
+// This is the bit we are actually interested in. By registering a callback for `draw` events, we can actually intercept the drawing process of each element on the chart.
+chart.on('draw', function(context) {
+  // First we want to make sure that only do something when the draw event is for bars. Draw events do get fired for labels and grids too.
+  if(context.type === 'bar') {
+    // With the Chartist.Svg API we can easily set an attribute on our bar that just got drawn
+    context.element.attr({
+      // Now we set the style attribute on our bar to override the default color of the bar. By using a HSL colour we can easily set the hue of the colour dynamically while keeping the same saturation and lightness. From the context we can also get the current value of the bar. We use that value to calculate a hue between 0 and 100 degree. This will make our bars appear green when close to the maximum and red when close to zero.
+      style: 'stroke: hsl(' + Math.floor(Chartist.getMultiValue(context.value) / max * 100) + ', 50%, 50%);'
+    });
+  }
+});

site/examples/example-gauge-donut-solid-chart.js

@@ -0,0 +1,10 @@
+new Chartist.Pie('.ct-chart', {
+  series: [20, 10, 30, 40]
+}, {
+  donut: true,
+  donutWidth: 60,
+  donutSolid: true,
+  startAngle: 270,
+  total: 200,
+  showLabel: true
+});

site/examples/example-line-data-fill-holes.js

@@ -0,0 +1,18 @@
+var chart = new Chartist.Line('.ct-chart', {
+  labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+  series: [
+    [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
+    [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null],
+    [null, null, null, null, 3, 4, 1, 3, 4,  6,  7,  9, 5, null, null, null],
+    [{x:3, y: 3},{x: 4, y: 3}, {x: 5, y: undefined}, {x: 6, y: 4}, {x: 7, y: null}, {x: 8, y: 4}, {x: 9, y: 4}]
+  ]
+}, {
+  fullWidth: true,
+  chartPadding: {
+    right: 10
+  },
+  lineSmooth: Chartist.Interpolation.cardinal({
+    fillHoles: true,
+  }),
+  low: 0
+});

site/examples/example-line-data-holes.js

@@ -0,0 +1,15 @@
+var chart = new Chartist.Line('.ct-chart', {
+  labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+  series: [
+    [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
+    [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null],
+    [null, null, null, null, 3, 4, 1, 3, 4,  6,  7,  9, 5, null, null, null],
+    [{x:3, y: 3},{x: 4, y: 3}, {x: 5, y: undefined}, {x: 6, y: 4}, {x: 7, y: null}, {x: 8, y: 4}, {x: 9, y: 4}]
+  ]
+}, {
+  fullWidth: true,
+  chartPadding: {
+    right: 10
+  },
+  low: 0
+});

site/examples/example-line-months-interpolation.js

@@ -25,4 +25,8 @@ var responsiveOptions = [
   ]
 ];
 
-new Chartist.Line('.ct-chart', data, null, responsiveOptions);
+new Chartist.Line('.ct-chart', data, {
+  chartPadding: {
+    top: 30
+  }
+}, responsiveOptions);

site/examples/example-line-only-integer.js

@@ -0,0 +1,18 @@
+new Chartist.Line('.ct-chart', {
+  labels: [1, 2, 3, 4, 5, 6, 7, 8],
+  series: [
+    [1, 2, 3, 1, -2, 0, 1, 0],
+    [-2, -1, -2, -1, -3, -1, -2, -1],
+    [0, 0, 0, 1, 2, 3, 2, 1],
+    [3, 2, 1, 0.5, 1, 0, -1, -3]
+  ]
+}, {
+  high: 3,
+  low: -3,
+  fullWidth: true,
+  // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
+  axisY: {
+    onlyInteger: true,
+    offset: 20
+  }
+});

site/examples/example-line-series-override.js

@@ -0,0 +1,49 @@
+var chart = new Chartist.Line('.ct-chart', {
+  labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
+  // Naming the series with the series object array notation
+  series: [{
+    name: 'series-1',
+    data: [5, 2, -4, 2, 0, -2, 5, -3]
+  }, {
+    name: 'series-2',
+    data: [4, 3, 5, 3, 1, 3, 6, 4]
+  }, {
+    name: 'series-3',
+    data: [2, 4, 3, 1, 4, 5, 3, 2]
+  }]
+}, {
+  fullWidth: true,
+  // Within the series options you can use the series names
+  // to specify configuration that will only be used for the
+  // specific series.
+  series: {
+    'series-1': {
+      lineSmooth: Chartist.Interpolation.step()
+    },
+    'series-2': {
+      lineSmooth: Chartist.Interpolation.simple(),
+      showArea: true
+    },
+    'series-3': {
+      showPoint: false
+    }
+  }
+}, [
+  // You can even use responsive configuration overrides to
+  // customize your series configuration even further!
+  ['screen and (max-width: 320px)', {
+    series: {
+      'series-1': {
+        lineSmooth: Chartist.Interpolation.none()
+      },
+      'series-2': {
+        lineSmooth: Chartist.Interpolation.none(),
+        showArea: false
+      },
+      'series-3': {
+        lineSmooth: Chartist.Interpolation.none(),
+        showPoint: true
+      }
+    }
+  }]
+]);

site/examples/example-line-simple-smoothing.js

@@ -1,8 +1,8 @@
 var chart = new Chartist.Line('.ct-chart', {
   labels: [1, 2, 3, 4, 5],
   series: [
-    [1, 5, 10, 0, 1, 2],
-    [10, 15, 0, 1, 2, 3]
+    [1, 5, 10, 0, 1],
+    [10, 15, 0, 1, 2]
   ]
 }, {
   // Remove this configuration to see that chart rendered with cardinal spline interpolation
@@ -11,5 +11,8 @@ var chart = new Chartist.Line('.ct-chart', {
     divisor: 2
   }),
   fullWidth: true,
+  chartPadding: {
+    right: 20
+  },
   low: 0
 });

site/examples/example-line-svg-animation.js

@@ -88,22 +88,22 @@ chart.on('draw', function(data) {
     var pos1Animation = {
       begin: seq * delays,
       dur: durations,
-      from: data[data.axis + '1'] - 30,
-      to: data[data.axis + '1'],
+      from: data[data.axis.units.pos + '1'] - 30,
+      to: data[data.axis.units.pos + '1'],
       easing: 'easeOutQuart'
     };
 
     var pos2Animation = {
       begin: seq * delays,
       dur: durations,
-      from: data[data.axis + '2'] - 100,
-      to: data[data.axis + '2'],
+      from: data[data.axis.units.pos + '2'] - 100,
+      to: data[data.axis.units.pos + '2'],
       easing: 'easeOutQuart'
     };
 
     var animations = {};
-    animations[data.axis + '1'] = pos1Animation;
-    animations[data.axis + '2'] = pos2Animation;
+    animations[data.axis.units.pos + '1'] = pos1Animation;
+    animations[data.axis.units.pos + '2'] = pos2Animation;
     animations['opacity'] = {
       begin: seq * delays,
       dur: durations,

site/examples/example-plugin-accessibility.js

@@ -0,0 +1,36 @@
+new Chartist.Line('.ct-chart', {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  series: [
+    {name: 'Income', data: [20000, 30000, 35000, 32000, 40000, 42000, 50000, 62000, 80000, 94000, 100000, 120000]},
+    {name: 'Expenses', data: [10000, 15000, 12000, 14000, 20000, 23000, 22000, 24000, 21000, 18000, 30000, 32000]}
+  ]
+}, {
+  fullWidth: true,
+  lineSmooth: false,
+  chartPadding: {
+    right: 20,
+    left: 10
+  },
+  axisX: {
+    labelInterpolationFnc: function(value) {
+      return value.split('').slice(0, 3).join('');
+    }
+  },
+  plugins: [
+    Chartist.plugins.ctAccessibility({
+      caption: 'Fiscal year 2015',
+      seriesHeader: 'business numbers',
+      summary: 'A graphic that shows the business numbers of the fiscal year 2015',
+      valueTransform: function(value) {
+        return value + ' dollar';
+      },
+      // ONLY USE THIS IF YOU WANT TO MAKE YOUR ACCESSIBILITY TABLE ALSO VISIBLE!
+      visuallyHiddenStyles: 'position: absolute; top: 100%; width: 100%; font-size: 11px; overflow-x: auto; background-color: rgba(0, 0, 0, 0.1); padding: 10px'
+    })
+  ]
+});
+
+// This is only used for the example on the Chartist example page
+$chart.parent().css({
+  'margin-bottom': '160px'
+});

site/examples/example-plugin-axistitle.js

@@ -0,0 +1,37 @@
+new Chartist.Line('.ct-chart', {
+  labels: ['0-15', '16-30', '31-45', '46-60', '61-75', '76-90', '91-105', '106-120'],
+  series: [[1, 3, 7, 12, 1, 2, 1, 0]]
+}, {
+  chartPadding: {
+    top: 20,
+    right: 0,
+    bottom: 30,
+    left: 0
+  },
+  axisY: {
+    onlyInteger: true
+  },
+  plugins: [
+    Chartist.plugins.ctAxisTitle({
+      axisX: {
+        axisTitle: 'Time (mins)',
+        axisClass: 'ct-axis-title',
+        offset: {
+          x: 0,
+          y: 50
+        },
+        textAnchor: 'middle'
+      },
+      axisY: {
+        axisTitle: 'Goals',
+        axisClass: 'ct-axis-title',
+        offset: {
+          x: 0,
+          y: 0
+        },
+        textAnchor: 'middle',
+        flipTitle: false
+      }
+    })
+  ]
+});

site/examples/example-plugin-fill-donut.js

@@ -0,0 +1,56 @@
+var chart = new Chartist.Pie('.ct-chart', 
+    {
+        series: [160, 60 ],
+        labels: ['', '']
+    }, {
+        donut: true,
+        donutWidth: 20,
+        startAngle: 210,
+        total: 260,
+        showLabel: false,
+        plugins: [
+            Chartist.plugins.fillDonut({
+                items: [{
+                    content: '<i class="fa fa-tachometer"></i>',
+                    position: 'bottom',
+                    offsetY : 10,
+                    offsetX: -2
+                }, {
+                    content: '<h3>160<span class="small">mph</span></h3>'
+                }]
+            })
+        ],
+    });
+
+chart.on('draw', function(data) {
+    if(data.type === 'slice' && data.index == 0) {
+        // Get the total path length in order to use for dash array animation
+        var pathLength = data.element._node.getTotalLength();
+
+        // Set a dasharray that matches the path length as prerequisite to animate dashoffset
+        data.element.attr({
+            'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
+        });
+
+        // Create animation definition while also assigning an ID to the animation for later sync usage
+        var animationDefinition = {
+            'stroke-dashoffset': {
+                id: 'anim' + data.index,
+                dur: 1200,
+                from: -pathLength + 'px',
+                to:  '0px',
+                easing: Chartist.Svg.Easing.easeOutQuint,
+                fill: 'freeze'
+            }
+        };
+
+        // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
+        data.element.attr({
+            'stroke-dashoffset': -pathLength + 'px'
+        });
+
+        // We can't use guided mode as the animations need to rely on setting begin manually
+        // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
+        data.element.animate(animationDefinition, true);
+    }
+});

site/examples/example-plugin-sketchy.js

@@ -1,37 +0,0 @@
-new Chartist.Bar('.ct-chart', {
-  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
-  series: [
-    [800000, 1200000, 1400000, 1300000],
-    [200000, 400000, 500000, 300000],
-    [100000, 200000, 400000, 600000]
-  ]
-}, {
-  plugins: [
-    Chartist.plugins.ctSketchy({
-      overrides: {
-        grid: {
-          baseFrequency: 0.2,
-          scale: 5,
-          numOctaves: 1
-        },
-        bar: {
-          baseFrequency: 0.02,
-          scale: 10
-        },
-        label: false
-      }
-    })
-  ],
-  stackBars: true,
-  axisY: {
-    labelInterpolationFnc: function(value) {
-      return (value / 1000) + 'k';
-    }
-  }
-}).on('draw', function(data) {
-  if(data.type === 'bar') {
-    data.element.attr({
-      style: 'stroke-width: 30px'
-    });
-  }
-});

site/examples/example-plugin-targetline.js

@@ -0,0 +1,12 @@
+new Chartist.Line('.ct-chart', {
+  labels: ['M', 'T', 'W', 'T', 'F'],
+  series: [
+    [5, 11, 2, 5, 7]
+  ]
+}, {
+  plugins: [
+    Chartist.plugins.ctTargetLine({
+      value: 6
+    })
+  ]
+});

site/examples/example-plugin-threshold.js

@@ -0,0 +1,16 @@
+new Chartist.Line('.ct-chart', {
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  series: [
+    [5, -4, 3, 7, 20, 10, 3, 4, 8, -10, 6, -8]
+  ]
+}, {
+  showArea: true,
+  axisY: {
+    onlyInteger: true
+  },
+  plugins: [
+    Chartist.plugins.ctThreshold({
+      threshold: 4
+    })
+  ]
+});

site/examples/example-plugin-tooltip.js

@@ -0,0 +1,22 @@
+var chart = new Chartist.Line('.ct-chart', {
+  labels: [1, 2, 3],
+  series: [
+    [
+      {meta: 'description', value: 1 },
+      {meta: 'description', value: 5},
+      {meta: 'description', value: 3}
+    ],
+    [
+      {meta: 'other description', value: 2},
+      {meta: 'other description', value: 4},
+      {meta: 'other description', value: 2}
+    ]
+  ]
+}, {
+  low: 0,
+  high: 8,
+  fullWidth: true,
+  plugins: [
+    Chartist.plugins.tooltip()
+  ]
+});

site/examples/example-plugin-zoom.js

@@ -0,0 +1,39 @@
+var data = {
+  series: [[
+    { x: 1, y: 100 },
+    { x: 2, y: 50 },
+    { x: 3, y: 25 },
+    { x: 4, y: 66 },
+    { x: 5, y: 30 },
+    { x: 6, y: 22 }
+  ]]
+};
+
+var options = {
+  axisX: {
+    type: Chartist.AutoScaleAxis
+  },
+  axisY: {
+    type: Chartist.AutoScaleAxis
+  },
+  plugins: [
+    Chartist.plugins.zoom({ onZoom: onZoom })
+  ]
+};
+
+var chart = Chartist.Line('.ct-chart', data, options);
+var resetFnc;
+function onZoom(chart, reset) {
+  resetFnc = reset;
+}
+
+var btn = document.createElement('button');
+btn.id = 'reset-zoom-btn';
+btn.innerHTML = 'Reset Zoom';
+btn.style.float = 'right';
+btn.addEventListener('click', function() {
+  console.log(resetFnc);
+  resetFnc && resetFnc();
+});
+var parent = document.querySelector('#example-plugin-zoom .chart');
+!parent.querySelector('#reset-zoom-btn') && parent.appendChild(btn);

site/examples/example-simple-svg-animation.js

@@ -54,10 +54,10 @@ chart.on('draw', function(data) {
 
 // For the sake of the example we update the chart every time it's created with a delay of 8 seconds
 chart.on('created', function() {
-  if(window.__exampleAnimateTimeout) {
-    clearTimeout(window.__exampleAnimateTimeout);
-    window.__exampleAnimateTimeout = null;
+  if(window.__anim0987432598723) {
+    clearTimeout(window.__anim0987432598723);
+    window.__anim0987432598723 = null;
   }
-  window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 8000);
+  window.__anim0987432598723 = setTimeout(chart.update.bind(chart), 8000);
 });
 

site/examples/example-timeseries-moment.js

@@ -0,0 +1,37 @@
+// Requires Moment.js
+
+var chart = new Chartist.Line('.ct-chart', {
+  series: [
+    {
+      name: 'series-1',
+      data: [
+        {x: new Date(143134652600), y: 53},
+        {x: new Date(143234652600), y: 40},
+        {x: new Date(143340052600), y: 45},
+        {x: new Date(143366652600), y: 40},
+        {x: new Date(143410652600), y: 20},
+        {x: new Date(143508652600), y: 32},
+        {x: new Date(143569652600), y: 18},
+        {x: new Date(143579652600), y: 11}
+      ]
+    },
+    {
+      name: 'series-2',
+      data: [
+        {x: new Date(143134652600), y: 53},
+        {x: new Date(143234652600), y: 35},
+        {x: new Date(143334652600), y: 30},
+        {x: new Date(143384652600), y: 30},
+        {x: new Date(143568652600), y: 10}
+      ]
+    }
+  ]
+}, {
+  axisX: {
+    type: Chartist.FixedScaleAxis,
+    divisor: 5,
+    labelInterpolationFnc: function(value) {
+      return moment(value).format('MMM D');
+    }
+  }
+});

site/examples/overlapping-bars.js

@@ -1,5 +1,5 @@
 var data = {
-  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   series: [
     [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
     [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
@@ -21,4 +21,4 @@ var responsiveOptions = [
   }]
 ];
 
-new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
+new Chartist.Bar('.ct-chart', data, options, responsiveOptions);

site/examples/simple-line-chart.js

@@ -5,4 +5,9 @@ new Chartist.Line('.ct-chart', {
     [2, 1, 3.5, 7, 3],
     [1, 3, 4, 5, 6]
   ]
-});
+}, {
+  fullWidth: true,
+  chartPadding: {
+    right: 40
+  }
+});

site/layouts/default.hbs

@@ -38,6 +38,7 @@
 
 <!-- build:js({site,src}) scripts/all.js -->
 <!-- Vendor scripts-->
+<script src="bower_components/moment/moment.js"></script>
 <script src="bower_components/modernizr/modernizr.js"></script>
 <script src="bower_components/jquery/dist/jquery.js"></script>
 <script src="bower_components/snap.svg/dist/snap.svg-min.js"></script>
@@ -49,6 +50,8 @@
 <script src="bower_components/codemirror/lib/codemirror.js"></script>
 <script src="bower_components/base64/base64.js"></script>
 <script src="bower_components/codemirror/mode/javascript/javascript.js"></script>
+<script src="bower_components/matchMedia/matchMedia.js"></script>
+<script src="bower_components/matchMedia/matchMedia.addListener.js"></script>
 
 <!-- Chartist scripts -->
 <script src="scripts/core.js"></script>
@@ -59,16 +62,22 @@
 <script src="scripts/svg.js"></script>
 <script src="scripts/svg-path.js"></script>
 <script src="scripts/axes/axis.js"></script>
-<script src="scripts/axes/linear-scale-axis.js"></script>
+<script src="scripts/axes/auto-scale-axis.js"></script>
+<script src="scripts/axes/fixed-scale-axis.js"></script>
 <script src="scripts/axes/step-axis.js"></script>
 <script src="scripts/charts/line.js"></script>
 <script src="scripts/charts/bar.js"></script>
 <script src="scripts/charts/pie.js"></script>
-<script src="scripts/chartist-plugin-accessibility.js"></script>
 
 <!-- Chartist plugins -->
 <script src="bower_components/chartist-plugin-pointlabels/dist/chartist-plugin-pointlabels.js"></script>
-<script src="bower_components/chartist-plugin-sketchy/dist/chartist-plugin-sketchy.js"></script>
+<script src="bower_components/chartist-plugin-accessibility/dist/chartist-plugin-accessibility.js"></script>
+<script src="bower_components/chartist-plugin-tooltip/dist/chartist-plugin-tooltip.js"></script>
+<script src="bower_components/chartist-plugin-axistitle/dist/chartist-plugin-axistitle.js"></script>
+<script src="bower_components/chartist-plugin-threshold/dist/chartist-plugin-threshold.js"></script>
+<script src="bower_components/chartist-plugin-fill-donut/dist/chartist-plugin-fill-donut.js"></script>
+<script src="bower_components/chartist-plugin-zoom/dist/chartist-plugin-zoom.js"></script>
+<script src="bower_components/chartist-plugin-targetline/chartist-plugin-targetline.js"></script>
 
 <!-- Chartist site scripts -->
 <script src="scripts/main.js"></script>

site/layouts/landing.hbs

@@ -11,6 +11,9 @@ layout: default
         <svg id="chartist-guy" data-svg-src="images/chartist-guy.svg"></svg>
       </figure>
     </div>
+    <div class="library-statement">
+      Only <span class="important">10KB</span> (Gzip) with <span class="important">no dependencies</span>!
+    </div>
     <div class="call-to-action">
       <a class="button large download" href="https://github.com/gionkunz/chartist-js/tree/develop/dist" target="_blank" data-icon="&#xf019;">Download</a>
       <a class="button large contribute" href="https://github.com/gionkunz/chartist-js" target="_blank" data-icon="&#xf09b;">Contribute</a>

site/partials/affiliate-project.hbs

@@ -0,0 +1,5 @@
+<a href="{{link}}" target="_blank" class="affiliate-project">
+  <div class="affiliate-project__title">{{title}}</div>
+  <img src="{{image.src}}" alt="{{image.alt}}" class="affiliate-project__image">
+  <div class="button">Get this Template</div>
+</a>

site/partials/live-example.hbs

@@ -1,4 +1,4 @@
-<section class="live-example"{{#if title}} id="{{slugify title}}"{{/if}}
+<section class="live-example"{{#if id}} id="{{id}}"{{/if}}
          data-live-example="{{exampleCode id}}">
   {{#if title}}
     <header class="live-example-header">

site/partials/navigation.hbs

@@ -15,7 +15,7 @@
       <ul class="left">
         <li><a href="getting-started.html">Getting started</a></li>
         <li><a href="api-documentation.html">API Documentation</a></li>
-        <li><a href="examples.html">Examples (live coding!)</a></li>
+        <li><a href="examples.html">Examples</a></li>
         <li><a href="plugins.html">Plugins</a></li>
         <li><a href="//github.com/gionkunz/chartist-js" target="_blank">Contribute</a></li>
       </ul>

site/partials/side-navigation.hbs

@@ -1,4 +1,4 @@
-<aside class="side-navigation" data-sticky="100">
+<aside class="side-navigation">
   <nav>
     <ul class="side-nav">
       {{#each page.sections}}
@@ -9,10 +9,10 @@
           {{/is}}
 
           {{#is type 'live-example'}}
-            <li><a class="text-clipping" href="#{{#if id}}{{id}}{{else}}{{slugify data.title}}{{/if}}">{{data.title}}</a></li>
+            <li><a class="text-clipping" href="#{{#if data.id}}{{data.id}}{{else}}{{slugify data.title}}{{/if}}">{{data.title}}</a></li>
           {{/is}}
         {{/each}}
       {{/each}}
     </ul>
   </nav>
-</aside>
+</aside>

site/scripts/chartist-guy.js

@@ -5,7 +5,12 @@
   var optionsChartistGuy = {
     width: 195,
     height: 137,
-    chartPadding: 10,
+    chartPadding: {
+      top: 15,
+      right: 10,
+      bottom: 10,
+      left: 10
+    },
     axisX: {
       offset: 15,
       showLabel: true,
@@ -17,6 +22,9 @@
     axisY: {
       offset: 25,
       showLabel: true,
+      labelOffset: {
+        y: 5
+      },
       showGrid: true,
       scaleMinSpace: 15,
       labelInterpolationFnc: function(n) {

site/scripts/main.js

@@ -12,9 +12,11 @@ function evalChartistCode(code, chartElement) {
   // Remove any declaration of $chart as we are passing $chart to our function eval
   modified = modified.replace(/var \$chart.+;/, '');
 
+  var $chartElement = $(chartElement).empty();
+
   try {
     // Create function from the modified code and execute it
-    return (new Function(['chartElement', '$chart'], modified)(chartElement, $(chartElement))); // jshint ignore:line
+    return (new Function(['chartElement', '$chart'], modified)(chartElement, $chartElement)); // jshint ignore:line
   } catch(err) {
     // Maybe show error in the future
   }
@@ -118,4 +120,4 @@ $(document).foundation({
   topbar: {
     scrolltop: false
   }
-});
+});

site/styles/_affiliate-project.scss

@@ -0,0 +1,31 @@
+.affiliate-projects {
+  display: flex;
+  margin: 0 -10px;
+}
+
+.affiliate-project {
+  display: block;
+  margin: 0 10px;
+}
+
+.affiliate-project__title {
+  display: block;
+  font-size:  20px;
+  font-weight: bold;
+  margin: 10px 0;
+  line-height: 1.1;
+}
+
+.affiliate-project__image {
+  margin-bottom: 10px;
+}
+
+@media screen and (max-width: 640px) {
+  .affiliate-projects {
+    display: block;
+  }
+
+  .affiliate-project {
+    margin: 10px;
+  }
+}

site/styles/_base.scss

@@ -122,3 +122,9 @@ table {
     padding: 0.8em 1em;
   }
 }
+
+p > code {
+  background-color: rgba(255, 255, 255, 0.3);
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+}

site/styles/_example-charts.scss

@@ -1,16 +1,14 @@
 #chartist-guy #chart-canvas {
   @include ct-chart($ct-text-color: darken($color-white, 50%), $ct-grid-color: darken($color-white, 20%));
 
-  .ct-series {
-    &.ct-series-a {
-      .ct-point {
-        @include ct-chart-point($ct-point-shape: square, $ct-point-size: 8px);
-      }
+  .ct-series-a {
+    .ct-point {
+      @include ct-chart-point($ct-point-shape: square, $ct-point-size: 8px);
+    }
 
-      .ct-line {
-        @include ct-chart-line($ct-line-dasharray: 5px);
-        @include animation(dashoffset, 1s linear infinite);
-      }
+    .ct-line {
+      @include ct-chart-line($ct-line-dasharray: 5px);
+      @include animation(dashoffset, 1s linear infinite);
     }
   }
 }
@@ -18,42 +16,129 @@
 #example-line-months-interpolation {
   @include ct-chart($ct-text-color: lighten($color-gray, 30%), $ct-grid-color: lighten($color-gray, 5%), $ct-grid-dasharray: 3px);
 
-  .ct-series {
-    &.ct-series-a {
-      .ct-point {
-        @include ct-chart-point($ct-point-shape: square);
-      }
-
-      .ct-line {
-        @include ct-chart-line($ct-line-width: 4px, $ct-line-dasharray: 5px);
-        @include animation(dashoffset, 1s linear infinite);
-      }
+  .ct-series-a {
+    .ct-point {
+      @include ct-chart-point($ct-point-shape: square);
     }
 
-    &.ct-series-b {
-      .ct-point {
-        @include animation(bouncing-stroke, 0.5s ease infinite);
-      }
+    .ct-line {
+      @include ct-chart-line($ct-line-width: 4px, $ct-line-dasharray: 5px);
+      @include animation(dashoffset, 1s linear infinite);
+    }
+  }
 
-      .ct-line {
-        @include ct-chart-line($ct-line-width: 3px);
-      }
+  .ct-series-b {
+    .ct-point {
+      @include animation(bouncing-stroke, 0.5s ease infinite);
     }
 
-    &.ct-series-c {
-      .ct-point {
-        @include animation(exploding-stroke, 1s ease-out infinite);
-      }
+    .ct-line {
+      @include ct-chart-line($ct-line-width: 3px);
+    }
+  }
 
-      .ct-line {
-        @include ct-chart-line($ct-line-width: 2px, $ct-line-dasharray: 40px 3px);
-      }
+  .ct-series-c {
+    .ct-point {
+      @include animation(exploding-stroke, 1s ease-out infinite);
+    }
+
+    .ct-line {
+      @include ct-chart-line($ct-line-width: 2px, $ct-line-dasharray: 40px 3px);
     }
   }
 }
 
-#behavior-with-jquery {
-  .ct-point {
-    @include ct-chart-point($ct-point-size: 20px);
+#example-plugin-threshold {
+  .ct-line {
+    stroke-dasharray: 5px;
+    animation: dashoffset 1s linear infinite;
   }
-}
+
+  .ct-line.ct-threshold-above, .ct-point.ct-threshold-above, .ct-bar.ct-threshold-above {
+    stroke: #f05b4f;
+  }
+
+  .ct-line.ct-threshold-below, .ct-point.ct-threshold-below, .ct-bar.ct-threshold-below {
+    stroke: #59922b;
+  }
+
+  .ct-area.ct-threshold-above {
+    fill: #f05b4f;
+  }
+
+  .ct-area.ct-threshold-below {
+    fill: #59922b;
+  }
+}
+
+#example-plugin-fill-donut {
+  .ct-chart-donut .ct-series-a .ct-slice-donut {
+    stroke: #d70206;
+  }
+
+  .ct-chart-donut .ct-series-b .ct-slice-donut {
+    stroke: rgba(0,0,0,.4);
+    opacity: 0.0;
+  }
+
+  .ct-chart-donut .ct-fill-donut .ct-slice-donut {
+    stroke: rgba(0,0,0,.4);
+    opacity: 1;
+  }
+
+  .ct-fill-donut-label {
+    h3 {
+      font-weight: bolder;
+    }
+
+    small {
+      font-size: 0.6em;
+    }
+
+
+    i {
+      font-size: 1.5em;
+    }
+
+  }
+}
+#example-plugin-zoom {
+  .ct-zoom-rect {
+		  fill: rgba(200, 100, 100, 0.3);
+		  stroke: red;
+	  }
+}
+#example-plugin-tooltip {
+  .chart {
+    position: relative;
+  }
+
+  .chartist-tooltip {
+    position: absolute;
+    display: block;
+    min-width: 5em;
+    padding: .5em;
+    background: #F4C63D;
+    color: #453D3F;
+    font-family: Oxygen,Helvetica,Arial,sans-serif;
+    font-weight: 700;
+    text-align: center;
+    pointer-events: none;
+    z-index: 1;
+    -webkit-transition: opacity .2s linear;
+    -moz-transition: opacity .2s linear;
+    -o-transition: opacity .2s linear;
+    transition: opacity .2s linear; }
+  .chartist-tooltip:before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    margin-left: -15px;
+    border: 15px solid transparent;
+    border-top-color: #F4C63D; }
+  .chartist-tooltip.tooltip-show {
+    opacity: 1; }
+}

site/styles/_highlight.scss

@@ -118,13 +118,3 @@ Chartist style - Licensed under WTFPL by Gion Kunz https://github.com/gionkunz/c
 .hljs-status {
   font-weight: bold;
 }
-
-.coffeescript .javascript,
-.javascript .xml,
-.tex .hljs-formula,
-.xml .javascript,
-.xml .vbscript,
-.xml .css,
-.xml .hljs-cdata {
-  opacity: 0.5;
-}

site/styles/_landing.scss

@@ -13,7 +13,7 @@
     line-height: 0.5;
     margin-top: 2rem;
 
-    @include text-shadow(1px 1px mix(black, $color-yellow, 15%), 2px 2px mix(black, $color-yellow, 15%), 3px 3px mix(black, $color-yellow, 15%));
+    text-shadow: 1px 1px mix(black, $color-yellow, 15%), 2px 2px mix(black, $color-yellow, 15%), 3px 3px mix(black, $color-yellow, 15%);
 
     @media #{$medium-up} {
       font-size: rem-calc(nth($modular-scale, 10));
@@ -27,6 +27,24 @@
     }
   }
 
+  .library-statement {
+    text-transform: uppercase;
+    font-size: rem-calc(nth($modular-scale, 5));
+    margin: 0;
+    display: inline-block;
+    width: 100%;
+    font-weight: 700;
+    color: white;
+
+    @include text-shadow(1px 1px mix(black, $color-yellow, 15%), 2px 2px mix(black, $color-yellow, 15%));
+
+    padding-bottom: $column-gutter;
+
+    .important {
+      text-decoration: underline;
+    }
+  }
+
   > .limiter {
     position: relative;
     max-width: 480px;

site/styles/main.scss

@@ -17,6 +17,7 @@
 @import "api-doc";
 @import "live-example";
 @import "example-charts";
+@import "affiliate-project";
 
 .button {
   text-transform: uppercase;
@@ -76,31 +77,6 @@
   }
 }
 
-.tooltip {
-  position: absolute;
-  display: inline-block;
-  min-width: 5em;
-  padding: 0.5em;
-  background: $color-yellow;
-  color: $color-black;
-  font-weight: 700;
-  text-align: center;
-  pointer-events: none;
-  z-index: 1;
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    margin-left: -15px;
-    border: 15px solid transparent;
-    border-top-color: $color-yellow;
-  }
-}
-
 code {
   font-family: "Source Code Pro", "Courier New", monospace !important;
   word-wrap: break-word;
@@ -121,7 +97,7 @@ code {
       border-radius: 50%;
       border: 2px solid #F4C63D;
       background-size: 32px 32px;
-      background: #F4C63D url("../images/chartist-icon.svg") no-repeat center;
+      background: #F4C63D url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIGlkPSJoZWFkIj48cGF0aCBmaWxsPSIjNzU1NDNCIiBkPSJNMTMuOCAyMC42czEuNiA1LTMuOSA1bDQuOSAxLjUgNC00LjItNS0yLjN6Ii8+PHBhdGggZmlsbD0iI0IyNDk0OSIgZD0iTTE3LjEgMjVzLTQuMS0xLjUtNS45IDEuMWwzLjcuOSAyLjItMnoiLz48cGF0aCBmaWxsPSIjRDM5Qzc2IiBkPSJNOS45IDI1LjRjMi4xIDEuMSA1IC42IDYgMCAxLjUtLjggMS41LTMgMS4xLTMuMi0uMi0uMS0yLjIgMS4zLTUuOS4xbC40LTMuMy01LjktLjJMOS43IDguNHM3LTIuOSAxNCAwVjE5Yy40LS4xLjgtLjIgMS4xIDAgLjkuMyAxLjEgMS40LjYgMi41LS40LjctMSAxLjMtMS43IDEuNHY2LjJzLTcuMiA0LjgtMTUuMSAyLjFjMCAwLTIuNS0uOC0yLjMtMy40IDAtLjItLjItMS45IDMuNi0yLjR6Ii8+PGcgZmlsbD0iIzYzNDEyOCI+PHBhdGggZD0iTTE1LjEgMTQuNGMwIC41LjkgMSAxLjkgMSAxLjEgMCAxLjktLjQgMS45LTEgMC0uNS0uOS0xLTEuOS0xLTEgMC0xLjkuNS0xLjkgMXpNOS43IDE0LjRjMCAuNS44IDEgMS45IDEgMSAwIDEuOS0uNCAxLjktMXMtLjgtMS0xLjktMWMtMS4xLjEtMS45LjUtMS45IDF6Ii8+PC9nPjxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMy44IDEwLjVWNmMuMS0zLjYgMS40LTUuMS40LTUuMy0xLS4yLTMuMi0uNi03LjgtLjYtNC4xIDAtNy4yLjUtOC4yLjZDNy4zIDEgOSAzLjkgOS4zIDZjLjEgMSAuMSAyLjUuMSAzLjgtMy4zLjUtNS4zIDEuNy01LjcgMi44aDI2LjZzLS4zLTEuMS02LjUtMi4xeiIvPjxwYXRoIGZpbGw9IiMzNTM0MzMiIGQ9Ik0xMi44IDIyLjRjMy4xIDIuOCAxMC40IDIuMyAxMC45LTIuMS4xLTEuMy0uNS0uMy0xLjEuMS0uOS42LTIuNS42LTMuNCAwLTEuNS0xLTQuMS00LjEtNi40LTEuOC0yLjQtMi4zLTUgLjgtNi41IDEuOC0uOS42LTIuNi42LTMuNSAwLS42LS40LTEuMi0xLjMtMS4xLS4xLjUgNC40IDcuOSA0LjkgMTEuMSAyLjF6Ii8+PC9nPjwvc3ZnPg==") no-repeat center;
     }
   }
 }
@@ -130,13 +106,11 @@ code {
   margin-bottom: 1rem;
 }
 
-.ct-chart-pie {
-  .ct-label {
-    font-size: 1em;
+.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
+  font-size: 1em;
 
-    @media #{$small-only} {
-      fill: rgba(255, 255, 255, 0.8);
-    }
+  @media #{$small-only} {
+    fill: rgba(255, 255, 255, 0.8);
   }
 }
 

site/templates/accessibility.hbs

@@ -1,86 +0,0 @@
----
-page-class: examples
-title: Chartist Accessibility Test
-description: Demos and examples of Chartist.js with live editing functionality
----
-<h2>Accessibility in Chartist</h2>
-<p>Dies ist eine einfache Seite um die Accessibility Erweiterung von Chartist zu testen.</p>
-<h3>Mitarbeiter Kaffeekonsum</h3>
-<div id="chart-1" class="ct-chart"></div>
-<h3>Umsatzzahlen 2015</h3>
-<div id="chart-2" class="ct-chart"></div>
-<h3>Lebensmittel</h3>
-<div id="chart-3" class="ct-chart"></div>
-<p>Ende des Dokuments</p>
-<script>
-  setTimeout(function() {
-
-    var chart1 = new Chartist.Bar('#chart-1', {
-      labels: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'],
-      series: [
-        {name: 'Martin', data: [6, 4, 3, 4, 3]},
-        {name: 'Anna', data: [4, 3, 3, 3, 2]}
-      ]
-    }, {
-      width: '640px',
-      height: '240px',
-      plugins: [
-        Chartist.plugins.ctAccessibility({
-          caption: 'Kaffeekonsum unter der Woche',
-          seriesHeader: 'Mitarbeiter',
-          summary: 'Eine simple Tabelle welche den Kaffeekonsum von Martin und Anna unter der Woche aufzeigt',
-          valueTransform: function(value) {
-            return value + ' Kaffee pro Tag';
-          }
-        })
-      ]
-    });
-
-    var chart2 = new Chartist.Line('#chart-2', {
-      labels: ['Januar', 'Februar', 'März', 'April', 'May', 'Juni', 'July', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-      series: [
-        {name: 'Umsatz', data: [20000, 30000, 35000, 32000, 40000, 42000, 50000, 62000, 80000, 94000, 100000, 120000]},
-        {name: 'Ausgaben', data: [10000, 15000, 12000, 14000, 20000, 23000, 22000, 24000, 21000, 18000, 30000, 32000]}
-      ]
-    }, {
-      width: '640px',
-      height: '240px',
-      axisX: {
-        labelInterpolationFnc: function(value) {
-          return value.split('').slice(0, 3).join('');
-        }
-      },
-      plugins: [
-        Chartist.plugins.ctAccessibility({
-          caption: 'Geschäftsjahr 2015',
-          seriesHeader: 'Geschäftszahlen',
-          summary: 'Eine Tabelle mit den Geschäftszahlen 2015',
-          valueTransform: function(value) {
-            return value + '$$';
-          }
-        })
-      ]
-    });
-
-    var chart3 = new Chartist.Pie('#chart-3', {
-      labels: ['Kohlenhydrate', 'Protein', 'Fett'],
-      series: [24, 8, 12]
-    }, {
-      width: '240px',
-      height: '240px',
-      plugins: [
-        Chartist.plugins.ctAccessibility({
-          caption: 'Nährstofftabelle Bananen',
-          summary: 'Eine Tabelle mit den Nährstoffangaben für Bananen',
-          valueTransform: function(value) {
-            var total = chart3.data.series.reduce(function(prev, current) {
-              return prev + current;
-            }, 0);
-            return Math.round(value / total * 100) + '%' + ' mit ' + value + ' Gramm';
-          }
-        })
-      ]
-    });
-
-  }, 1000);
-</script>

site/templates/api-documentation.hbs

@@ -4,7 +4,8 @@ side-nav: api-side-navigation
 page-class: api-documentation
 title: Chartist - API Documentation
 description: Detailed documentation of the Chartist.js code and API
+preventIndent: true
 ---
 {{#each (doxTransform apidox)}}
   {{>dox-section}}
-{{/each}}
+{{/each}}

site/templates/examples.hbs

@@ -3,7 +3,8 @@ layout: content
 page-class: examples
 title: Chartist - Examples
 description: Demos and examples of Chartist.js with live editing functionality
+preventIndent: true
 ---
 {{#each page.sections}}
   {{>section}}
-{{/each}}
+{{/each}}

site/templates/getting-started.hbs

@@ -3,7 +3,8 @@ layout: content
 page-class: getting-started
 title: Chartist - Getting started
 description: Learn how to use Chartist.js
+preventIndent: true
 ---
 {{#each page.sections}}
   {{>section}}
-{{/each}}
+{{/each}}

site/templates/index.hbs

@@ -3,12 +3,21 @@ layout: landing
 page-class: full
 title: Chartist - Simple responsive charts
 description: Create responsive, scalable and good looking charts with chartist.js.
+preventIndent: true
 ---
 <p>You may think that this is just yet an other charting library. But Chartist.js is the product of
 a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds
 of other great charting libraries but after using them there were always tweaks you would have wished for that were not
   included.</p>
 
+<h3>Get awesome Dashboard Templates by Creative Tim</h3>
+<p>Are you planning to use Chartist to create a nice Dashboard or Admin UI? Don't loose any time and kickstart your development using the awesome templates by Creative Tim. They include Chartist and come with awesome chart styles!</p>
+<div class="affiliate-projects">
+{{#each page.affiliate-projects}}
+    {{> affiliate-project }}
+{{/each}}
+</div>
+
 <h3>Highly customizable responsive charts</h3>
 <ul class="example-gallery">
   {{#each page.gallery-examples}}

site/templates/plugins.hbs

@@ -3,6 +3,7 @@ layout: content
 page-class: plugins
 title: Chartist - Plugins
 description: Use plugins to extend the functionality of your charts
+preventIndent: true
 ---
 {{#each page.sections}}
   {{>section}}

src/scripts/axes/auto-scale-axis.js

@@ -0,0 +1,54 @@
+/**
+ * The auto scale axis uses standard linear scale projection of values along an axis. It uses order of magnitude to find a scale automatically and evaluates the available space in order to find the perfect amount of ticks for your chart.
+ * **Options**
+ * The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.
+ * ```javascript
+ * var options = {
+ *   // If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored
+ *   high: 100,
+ *   // If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored
+ *   low: 0,
+ *   // This option will be used when finding the right scale division settings. The amount of ticks on the scale will be determined so that as many ticks as possible will be displayed, while not violating this minimum required space (in pixel).
+ *   scaleMinSpace: 20,
+ *   // Can be set to true or false. If set to true, the scale will be generated with whole numbers only.
+ *   onlyInteger: true,
+ *   // The reference value can be used to make sure that this value will always be on the chart. This is especially useful on bipolar charts where the bipolar center always needs to be part of the chart.
+ *   referenceValue: 5
+ * };
+ * ```
+ *
+ * @module Chartist.AutoScaleAxis
+ */
+/* global Chartist */
+(function (globalRoot, Chartist) {
+  'use strict';
+
+  var window = globalRoot.window;
+  var document = globalRoot.document;
+
+  function AutoScaleAxis(axisUnit, data, chartRect, options) {
+    // Usually we calculate highLow based on the data but this can be overriden by a highLow object in the options
+    var highLow = options.highLow || Chartist.getHighLow(data, options, axisUnit.pos);
+    this.bounds = Chartist.getBounds(chartRect[axisUnit.rectEnd] - chartRect[axisUnit.rectStart], highLow, options.scaleMinSpace || 20, options.onlyInteger);
+    this.range = {
+      min: this.bounds.min,
+      max: this.bounds.max
+    };
+
+    Chartist.AutoScaleAxis.super.constructor.call(this,
+      axisUnit,
+      chartRect,
+      this.bounds.values,
+      options);
+  }
+
+  function projectValue(value) {
+    return this.axisLength * (+Chartist.getMultiValue(value, this.units.pos) - this.bounds.min) / this.bounds.range;
+  }
+
+  Chartist.AutoScaleAxis = Chartist.Axis.extend({
+    constructor: AutoScaleAxis,
+    projectValue: projectValue
+  });
+
+}(this || global, Chartist));

src/scripts/axes/axis.js

@@ -1,12 +1,10 @@
-/**
- * Axis base class used to implement different axis types
- *
- * @module Chartist.Axis
- */
 /* global Chartist */
-(function (window, document, Chartist) {
+(function (globalRoot, Chartist) {
   'use strict';
 
+  var window = globalRoot.window;
+  var document = globalRoot.document;
+
   var axisUnits = {
     x: {
       pos: 'x',
@@ -26,19 +24,91 @@
     }
   };
 
-  function Axis(units, chartRect, transform, labelOffset, options) {
+  function Axis(units, chartRect, ticks, options) {
     this.units = units;
     this.counterUnits = units === axisUnits.x ? axisUnits.y : axisUnits.x;
     this.chartRect = chartRect;
     this.axisLength = chartRect[units.rectEnd] - chartRect[units.rectStart];
     this.gridOffset = chartRect[units.rectOffset];
-    this.transform = transform;
-    this.labelOffset = labelOffset;
+    this.ticks = ticks;
     this.options = options;
   }
 
+  function createGridAndLabels(gridGroup, labelGroup, useForeignObject, chartOptions, eventEmitter) {
+    var axisOptions = chartOptions['axis' + this.units.pos.toUpperCase()];
+    var projectedValues = this.ticks.map(this.projectValue.bind(this));
+    var labelValues = this.ticks.map(axisOptions.labelInterpolationFnc);
+
+    projectedValues.forEach(function(projectedValue, index) {
+      var labelOffset = {
+        x: 0,
+        y: 0
+      };
+
+      // TODO: Find better solution for solving this problem
+      // Calculate how much space we have available for the label
+      var labelLength;
+      if(projectedValues[index + 1]) {
+        // If we still have one label ahead, we can calculate the distance to the next tick / label
+        labelLength = projectedValues[index + 1] - projectedValue;
+      } else {
+        // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to
+        // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will
+        // still be visible inside of the chart padding.
+        labelLength = Math.max(this.axisLength - projectedValue, 30);
+      }
+
+      // Skip grid lines and labels where interpolated label values are falsey (execpt for 0)
+      if(Chartist.isFalseyButZero(labelValues[index]) && labelValues[index] !== '') {
+        return;
+      }
+
+      // Transform to global coordinates using the chartRect
+      // We also need to set the label offset for the createLabel function
+      if(this.units.pos === 'x') {
+        projectedValue = this.chartRect.x1 + projectedValue;
+        labelOffset.x = chartOptions.axisX.labelOffset.x;
+
+        // If the labels should be positioned in start position (top side for vertical axis) we need to set a
+        // different offset as for positioned with end (bottom)
+        if(chartOptions.axisX.position === 'start') {
+          labelOffset.y = this.chartRect.padding.top + chartOptions.axisX.labelOffset.y + (useForeignObject ? 5 : 20);
+        } else {
+          labelOffset.y = this.chartRect.y1 + chartOptions.axisX.labelOffset.y + (useForeignObject ? 5 : 20);
+        }
+      } else {
+        projectedValue = this.chartRect.y1 - projectedValue;
+        labelOffset.y = chartOptions.axisY.labelOffset.y - (useForeignObject ? labelLength : 0);
+
+        // If the labels should be positioned in start position (left side for horizontal axis) we need to set a
+        // different offset as for positioned with end (right side)
+        if(chartOptions.axisY.position === 'start') {
+          labelOffset.x = useForeignObject ? this.chartRect.padding.left + chartOptions.axisY.labelOffset.x : this.chartRect.x1 - 10;
+        } else {
+          labelOffset.x = this.chartRect.x2 + chartOptions.axisY.labelOffset.x + 10;
+        }
+      }
+
+      if(axisOptions.showGrid) {
+        Chartist.createGrid(projectedValue, index, this, this.gridOffset, this.chartRect[this.counterUnits.len](), gridGroup, [
+          chartOptions.classNames.grid,
+          chartOptions.classNames[this.units.dir]
+        ], eventEmitter);
+      }
+
+      if(axisOptions.showLabel) {
+        Chartist.createLabel(projectedValue, labelLength, index, labelValues, this, axisOptions.offset, labelOffset, labelGroup, [
+          chartOptions.classNames.label,
+          chartOptions.classNames[this.units.dir],
+          (axisOptions.position === 'start' ? chartOptions.classNames[axisOptions.position] : chartOptions.classNames['end'])
+        ], useForeignObject, eventEmitter);
+      }
+    }.bind(this));
+  }
+
   Chartist.Axis = Chartist.Class.extend({
     constructor: Axis,
+    createGridAndLabels: createGridAndLabels,
     projectValue: function(value, index, data) {
       throw new Error('Base axis can\'t be instantiated!');
     }
@@ -46,4 +116,4 @@
 
   Chartist.Axis.units = axisUnits;
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/axes/fixed-scale-axis.js

@@ -0,0 +1,59 @@
+/**
+ * The fixed scale axis uses standard linear projection of values along an axis. It makes use of a divisor option to divide the range provided from the minimum and maximum value or the options high and low that will override the computed minimum and maximum.
+ * **Options**
+ * The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.
+ * ```javascript
+ * var options = {
+ *   // If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored
+ *   high: 100,
+ *   // If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored
+ *   low: 0,
+ *   // If specified then the value range determined from minimum to maximum (or low and high) will be divided by this number and ticks will be generated at those division points. The default divisor is 1.
+ *   divisor: 4,
+ *   // If ticks is explicitly set, then the axis will not compute the ticks with the divisor, but directly use the data in ticks to determine at what points on the axis a tick need to be generated.
+ *   ticks: [1, 10, 20, 30]
+ * };
+ * ```
+ *
+ * @module Chartist.FixedScaleAxis
+ */
+/* global Chartist */
+(function (globalRoot, Chartist) {
+  'use strict';
+
+  var window = globalRoot.window;
+  var document = globalRoot.document;
+
+  function FixedScaleAxis(axisUnit, data, chartRect, options) {
+    var highLow = options.highLow || Chartist.getHighLow(data, options, axisUnit.pos);
+    this.divisor = options.divisor || 1;
+    this.ticks = options.ticks || Chartist.times(this.divisor).map(function(value, index) {
+      return highLow.low + (highLow.high - highLow.low) / this.divisor * index;
+    }.bind(this));
+    this.ticks.sort(function(a, b) {
+      return a - b;
+    });
+    this.range = {
+      min: highLow.low,
+      max: highLow.high
+    };
+
+    Chartist.FixedScaleAxis.super.constructor.call(this,
+      axisUnit,
+      chartRect,
+      this.ticks,
+      options);
+
+    this.stepLength = this.axisLength / this.divisor;
+  }
+
+  function projectValue(value) {
+    return this.axisLength * (+Chartist.getMultiValue(value, this.units.pos) - this.range.min) / (this.range.max - this.range.min);
+  }
+
+  Chartist.FixedScaleAxis = Chartist.Axis.extend({
+    constructor: FixedScaleAxis,
+    projectValue: projectValue
+  });
+
+}(this || global, Chartist));

src/scripts/axes/linear-scale-axis.js

@@ -1,33 +0,0 @@
-/**
- * The linear scale axis uses standard linear scale projection of values along an axis.
- *
- * @module Chartist.LinearScaleAxis
- */
-/* global Chartist */
-(function (window, document, Chartist) {
-  'use strict';
-
-  function LinearScaleAxis(axisUnit, chartRect, transform, labelOffset, options) {
-    Chartist.LinearScaleAxis.super.constructor.call(this,
-      axisUnit,
-      chartRect,
-      transform,
-      labelOffset,
-      options);
-
-    this.bounds = Chartist.getBounds(this.axisLength, options.highLow, options.scaleMinSpace, options.referenceValue);
-  }
-
-  function projectValue(value) {
-    return {
-      pos: this.axisLength * (value - this.bounds.min) / (this.bounds.range + this.bounds.step),
-      len: Chartist.projectLength(this.axisLength, this.bounds.step, this.bounds)
-    };
-  }
-
-  Chartist.LinearScaleAxis = Chartist.Axis.extend({
-    constructor: LinearScaleAxis,
-    projectValue: projectValue
-  });
-
-}(window, document, Chartist));

src/scripts/axes/step-axis.js

@@ -1,28 +1,38 @@
 /**
- * Step axis for step based charts like bar chart or step based line chart
+ * The step axis for step based charts like bar chart or step based line charts. It uses a fixed amount of ticks that will be equally distributed across the whole axis length. The projection is done using the index of the data value rather than the value itself and therefore it's only useful for distribution purpose.
+ * **Options**
+ * The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings.
+ * ```javascript
+ * var options = {
+ *   // Ticks to be used to distribute across the axis length. As this axis type relies on the index of the value rather than the value, arbitrary data that can be converted to a string can be used as ticks.
+ *   ticks: ['One', 'Two', 'Three'],
+ *   // If set to true the full width will be used to distribute the values where the last value will be at the maximum of the axis length. If false the spaces between the ticks will be evenly distributed instead.
+ *   stretch: true
+ * };
+ * ```
  *
  * @module Chartist.StepAxis
  */
 /* global Chartist */
-(function (window, document, Chartist) {
+(function (globalRoot, Chartist) {
   'use strict';
 
-  function StepAxis(axisUnit, chartRect, transform, labelOffset, options) {
+  var window = globalRoot.window;
+  var document = globalRoot.document;
+
+  function StepAxis(axisUnit, data, chartRect, options) {
     Chartist.StepAxis.super.constructor.call(this,
       axisUnit,
       chartRect,
-      transform,
-      labelOffset,
+      options.ticks,
       options);
 
-    this.stepLength = this.axisLength / (options.stepCount - (options.stretch ? 1 : 0));
+    var calc = Math.max(1, options.ticks.length - (options.stretch ? 1 : 0));
+    this.stepLength = this.axisLength / calc;
   }
 
   function projectValue(value, index) {
-    return {
-      pos: this.stepLength * index,
-      len: this.stepLength
-    };
+    return this.stepLength * index;
   }
 
   Chartist.StepAxis = Chartist.Axis.extend({
@@ -30,4 +40,4 @@
     projectValue: projectValue
   });
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/base.js

@@ -4,9 +4,11 @@
  * @module Chartist.Base
  */
 /* global Chartist */
-(function(window, document, Chartist) {
+(function(globalRoot, Chartist) {
   'use strict';
 
+  var window = globalRoot.window;
+
   // TODO: Currently we need to re-draw the chart on window resize. This is usually very bad and will affect performance.
   // This is done because we can't work with relative coordinates when drawing the chart because SVG Path does not
   // work with relative positions yet. We need to check if we can do a viewBox hack to switch to percentage.
@@ -23,7 +25,9 @@
    */
   function update(data, options, override) {
     if(data) {
-      this.data = data;
+      this.data = data || {};
+      this.data.labels = this.data.labels || [];
+      this.data.series = this.data.series || [];
       // Event for data transformation that allows to manipulate the data before it gets rendered in the charts
       this.eventEmitter.emit('data', {
         type: 'update',
@@ -44,7 +48,7 @@
 
     // Only re-created the chart if it has been initialized yet
     if(!this.initializeTimeoutId) {
-      this.createChart(this.optionsProvider.currentOptions);
+      this.createChart(this.optionsProvider.getCurrentOptions());
     }
 
     // Return a reference to the chart object to chain up calls
@@ -57,8 +61,15 @@
    * @memberof Chartist.Base
    */
   function detach() {
-    window.removeEventListener('resize', this.resizeListener);
-    this.optionsProvider.removeMediaQueryListeners();
+    // Only detach if initialization already occurred on this chart. If this chart still hasn't initialized (therefore
+    // the initializationTimeoutId is still a valid timeout reference, we will clear the timeout
+    if(!this.initializeTimeoutId) {
+      window.removeEventListener('resize', this.resizeListener);
+      this.optionsProvider.removeMediaQueryListeners();
+    } else {
+      window.clearTimeout(this.initializeTimeoutId);
+    }
+
     return this;
   }
 
@@ -117,7 +128,7 @@
     });
 
     // Create the first chart
-    this.createChart(this.optionsProvider.currentOptions);
+    this.createChart(this.optionsProvider.getCurrentOptions());
 
     // As chart is initialized from the event loop now we can reset our timeout reference
     // This is important if the chart gets initialized on the same element twice
@@ -136,7 +147,9 @@
    */
   function Base(query, data, defaultOptions, options, responsiveOptions) {
     this.container = Chartist.querySelector(query);
-    this.data = data;
+    this.data = data || {};
+    this.data.labels = this.data.labels || [];
+    this.data.series = this.data.series || [];
     this.defaultOptions = defaultOptions;
     this.options = options;
     this.responsiveOptions = responsiveOptions;
@@ -150,14 +163,7 @@
     if(this.container) {
       // If chartist was already initialized in this container we are detaching all event listeners first
       if(this.container.__chartist__) {
-        if(this.container.__chartist__.initializeTimeoutId) {
-          // If the initializeTimeoutId is still set we can safely assume that the initialization function has not
-          // been called yet from the event loop. Therefore we should cancel the timeout and don't need to detach
-          window.clearTimeout(this.container.__chartist__.initializeTimeoutId);
-        } else {
-          // The timeout reference has already been reset which means we need to detach the old chart first
-          this.container.__chartist__.detach();
-        }
+        this.container.__chartist__.detach();
       }
 
       this.container.__chartist__ = this;
@@ -186,4 +192,4 @@
     supportsForeignObject: false
   });
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/chartist-plugin-accessibility.js

@@ -1,156 +0,0 @@
-/**
- * Chartist.js plugin that generates visually hidden tables for better accessibility. It's also possible to initialize a Chart with data from an existing table.
- *
- */
-/* global Chartist */
-(function (window, document, Chartist) {
-  'use strict';
-
-  function Element(name, attrs, parent) {
-    return {
-      elem: function (name, attrs) {
-        var e = Element(name, attrs, this);
-        this.children.push(e);
-        return e;
-      },
-      children: [],
-      name: name,
-      _attrs: attrs || {},
-      _parent: parent,
-      parent: function () {
-        return this._parent;
-      },
-      attrs: function (attrs) {
-        this._attrs = attrs;
-        return this;
-      },
-      text: function (text, after) {
-        if (after) {
-          this._textAfter = text;
-        } else {
-          this._textBefore = text;
-        }
-        return this;
-      },
-      toString: function () {
-        var attrs = Object.keys(this._attrs).filter(function (attrName) {
-          return this._attrs[attrName] || this._attrs[attrName] === 0;
-        }.bind(this)).map(function (attrName) {
-          return [attrName, '="', this._attrs[attrName], '"'].join('');
-        }.bind(this)).join(' ');
-
-        return ['<', this.name, attrs ? ' ' + attrs : '', '>', this._textBefore].concat(this.children.map(function (child) {
-          return child.toString();
-        })).concat([this._textAfter, '</', this.name, '>']).join('');
-      }
-    };
-  }
-
-  var defaultOptions = {
-    caption: 'A graphical chart',
-    seriesHeader: 'Series name',
-    valueTransform: Chartist.noop,
-    summary: undefined,
-    elementId: function () {
-      return 'ct-accessibility-table-' + (+new Date());
-    },
-    visuallyHiddenStyles: 'position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;'
-  };
-
-
-  Chartist.plugins = Chartist.plugins || {};
-  Chartist.plugins.ctAccessibility = function (options) {
-
-    options = Chartist.extend({}, defaultOptions, options);
-
-    return function ctAccessibility(chart) {
-      var wrapper,
-        elementId = typeof options.elementId === 'function' ? options.elementId() : options.elementId;
-
-      chart.on('created', function (data) {
-        if (wrapper) {
-          wrapper.parentNode.removeChild(wrapper);
-        }
-
-        // As we are now compensating the SVG graphic with the chart with an accessibility table, we hide it for ARIA
-        data.svg.attr({
-          'aria-hidden': 'true'
-        });
-
-        // Create wrapper element
-        var element = Element('div', {
-          style: options.visuallyHiddenStyles,
-          id: elementId
-        });
-
-        // Create table body with caption
-        var tBody = element.elem('table', {
-          summary: options.summary
-        }).elem('caption')
-          .text(options.caption)
-          .elem('tbody');
-
-        var firstRow = tBody.elem('tr');
-
-        if (chart instanceof Chartist.Pie) {
-          // For pie charts we have only column headers and one series
-          var dataArray = Chartist.getDataArray(chart.data, chart.optionsProvider.currentOptions.reverseData);
-
-          // First render the column headers with our pie chart labels
-          chart.data.labels.forEach(function (text) {
-            firstRow
-              .elem('th', {
-                scope: 'col',
-                role: 'columnheader'
-              })
-              .text(text);
-          });
-
-          var row = tBody.elem('tr');
-
-          // Add all data fields of our pie chart to the row
-          dataArray.forEach(function (dataValue) {
-            row.elem('td').text(options.valueTransform(dataValue));
-          });
-
-        } else {
-          // For line and bar charts we have multiple series and therefore also row headers
-          var normalizedData = Chartist.normalizeDataArray(
-            Chartist.getDataArray(
-              chart.data, chart.optionsProvider.currentOptions.reverseData), chart.data.labels.length);
-
-          // Add column headers inclusing the series column header for the row headers
-          [options.seriesHeader].concat(chart.data.labels).forEach(function (text) {
-            firstRow
-              .elem('th', {
-                scope: 'col',
-                role: 'columnheader'
-              })
-              .text(text);
-          });
-
-          // Add all data rows including their row headers
-          chart.data.series.forEach(function (series, index) {
-            var seriesName = series.name || [index + 1, '. Series'].join('');
-
-            var row = tBody.elem('tr');
-
-            row.elem('th', {
-              scope: 'row',
-              role: 'rowheader'
-            }).text(seriesName);
-
-            normalizedData[index].forEach(function (dataValue) {
-              row.elem('td').text(options.valueTransform(dataValue));
-            });
-          });
-        }
-
-        // Update invisible table in DOM and update table element with newly created table
-        chart.container.innerHTML += element.toString();
-        wrapper = chart.container.querySelector('#' + elementId);
-      });
-    };
-  };
-
-}(window, document, Chartist));

src/scripts/charts/bar.js

@@ -4,9 +4,12 @@
  * @module Chartist.Bar
  */
 /* global Chartist */
-(function(window, document, Chartist){
+(function(globalRoot, Chartist){
   'use strict';
 
+  var window = globalRoot.window;
+  var document = globalRoot.document;
+
   /**
    * Default options in bar charts. Expand the code view to see a detailed list of options with comments.
    *
@@ -17,6 +20,8 @@
     axisX: {
       // The offset of the chart drawing area to the border of the container
       offset: 30,
+      // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
+      position: 'end',
       // Allows you to correct label positioning on this axis by positive or negative x and y offset.
       labelOffset: {
         x: 0,
@@ -29,12 +34,16 @@
       // Interpolation function that allows you to intercept the value from the axis label
       labelInterpolationFnc: Chartist.noop,
       // This value specifies the minimum width in pixel of the scale steps
-      scaleMinSpace: 40
+      scaleMinSpace: 30,
+      // Use only integer values (whole numbers) for the scale steps
+      onlyInteger: false
     },
     // Options for Y-Axis
     axisY: {
       // The offset of the chart drawing area to the border of the container
       offset: 40,
+      // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
+      position: 'start',
       // Allows you to correct label positioning on this axis by positive or negative x and y offset.
       labelOffset: {
         x: 0,
@@ -47,7 +56,9 @@
       // Interpolation function that allows you to intercept the value from the axis label
       labelInterpolationFnc: Chartist.noop,
       // This value specifies the minimum height in pixel of the scale steps
-      scaleMinSpace: 20
+      scaleMinSpace: 20,
+      // Use only integer values (whole numbers) for the scale steps
+      onlyInteger: false
     },
     // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
     width: undefined,
@@ -57,27 +68,45 @@
     high: undefined,
     // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
     low: undefined,
+    // Unless low/high are explicitly set, bar chart will be centered at zero by default. Set referenceValue to null to auto scale.
+    referenceValue: 0,
     // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
-    chartPadding: 5,
+    chartPadding: {
+      top: 15,
+      right: 15,
+      bottom: 5,
+      left: 10
+    },
     // Specify the distance in pixel of bars in a group
     seriesBarDistance: 15,
-    // If set to true this property will cause the series bars to be stacked and form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
+    // If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options.
     stackBars: false,
+    // If set to 'overlap' this property will force the stacked bars to draw from the zero line.
+    // If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
+    stackMode: 'accumulate',
     // Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
     horizontalBars: false,
+    // If set to true then each bar will represent a series and the data array is expected to be a one dimensional array of data values rather than a series array of series. This is useful if the bar chart should represent a profile rather than some data over time.
+    distributeSeries: false,
     // If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
     reverseData: false,
+    // If the bar chart should add a background fill to the .ct-grids group.
+    showGridBackground: false,
     // Override the class names that get used to generate the SVG structure of the chart
     classNames: {
       chart: 'ct-chart-bar',
+      horizontalBars: 'ct-horizontal-bars',
       label: 'ct-label',
       labelGroup: 'ct-labels',
       series: 'ct-series',
       bar: 'ct-bar',
       grid: 'ct-grid',
       gridGroup: 'ct-grids',
+      gridBackground: 'ct-grid-background',
       vertical: 'ct-vertical',
-      horizontal: 'ct-horizontal'
+      horizontal: 'ct-horizontal',
+      start: 'ct-start',
+      end: 'ct-end'
     }
   };
 
@@ -86,24 +115,52 @@
    *
    */
   function createChart(options) {
-    var seriesGroups = [],
-      normalizedData = Chartist.normalizeDataArray(Chartist.getDataArray(this.data, options.reverseData), this.data.labels.length),
-      normalizedPadding = Chartist.normalizePadding(options.chartPadding, defaultOptions.padding),
-      highLow;
+    var data;
+    var highLow;
+
+    if(options.distributeSeries) {
+      data = Chartist.normalizeData(this.data, options.reverseData, options.horizontalBars ? 'x' : 'y');
+      data.normalized.series = data.normalized.series.map(function(value) {
+        return [value];
+      });
+    } else {
+      data = Chartist.normalizeData(this.data, options.reverseData, options.horizontalBars ? 'x' : 'y');
+    }
 
     // Create new svg element
-    this.svg = Chartist.createSvg(this.container, options.width, options.height, options.classNames.chart);
+    this.svg = Chartist.createSvg(
+      this.container,
+      options.width,
+      options.height,
+      options.classNames.chart + (options.horizontalBars ? ' ' + options.classNames.horizontalBars : '')
+    );
+
+    // Drawing groups in correct order
+    var gridGroup = this.svg.elem('g').addClass(options.classNames.gridGroup);
+    var seriesGroup = this.svg.elem('g');
+    var labelGroup = this.svg.elem('g').addClass(options.classNames.labelGroup);
+
+    if(options.stackBars && data.normalized.series.length !== 0) {
 
-    if(options.stackBars) {
       // If stacked bars we need to calculate the high low from stacked values from each series
-      var serialSums = Chartist.serialMap(normalizedData, function serialSums() {
-        return Array.prototype.slice.call(arguments).reduce(Chartist.sum, 0);
+      var serialSums = Chartist.serialMap(data.normalized.series, function serialSums() {
+        return Array.prototype.slice.call(arguments).map(function(value) {
+          return value;
+        }).reduce(function(prev, curr) {
+          return {
+            x: prev.x + (curr && curr.x) || 0,
+            y: prev.y + (curr && curr.y) || 0
+          };
+        }, {x: 0, y: 0});
       });
 
-      highLow = Chartist.getHighLow([serialSums]);
+      highLow = Chartist.getHighLow([serialSums], options, options.horizontalBars ? 'x' : 'y');
+
     } else {
-      highLow = Chartist.getHighLow(normalizedData);
+
+      highLow = Chartist.getHighLow(data.normalized.series, options, options.horizontalBars ? 'x' : 'y');
     }
+
     // Overrides of high / low from settings
     highLow.high = +options.high || (options.high === 0 ? 0 : highLow.high);
     highLow.low = +options.low || (options.low === 0 ? 0 : highLow.low);
@@ -111,165 +168,214 @@
     var chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
 
     var valueAxis,
-      labelAxis;
+      labelAxisTicks,
+      labelAxis,
+      axisX,
+      axisY;
 
-    if(options.horizontalBars) {
-      labelAxis = new Chartist.StepAxis(
-        Chartist.Axis.units.y,
-        chartRect,
-        function timeAxisTransform(projectedValue) {
-          projectedValue.pos = chartRect.y1 - projectedValue.pos;
-          return projectedValue;
-        },
-        {
-          x: normalizedPadding.left + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
-          y: options.axisY.labelOffset.y - chartRect.height() / this.data.labels.length
-        },
-        {
-          stepCount: this.data.labels.length,
-          stretch: options.fullHeight
-        }
-      );
-
-      valueAxis = new Chartist.LinearScaleAxis(
-        Chartist.Axis.units.x,
-        chartRect,
-        function valueAxisTransform(projectedValue) {
-          projectedValue.pos = chartRect.x1 + projectedValue.pos;
-          return projectedValue;
-        },
-        {
-          x: options.axisX.labelOffset.x,
-          y: chartRect.y1 + options.axisX.labelOffset.y + (this.supportsForeignObject ? 5 : 20)
-        },
-        {
-          highLow: highLow,
-          scaleMinSpace: options.axisX.scaleMinSpace,
-          referenceValue: 0
-        }
-      );
+    // We need to set step count based on some options combinations
+    if(options.distributeSeries && options.stackBars) {
+      // If distributed series are enabled and bars need to be stacked, we'll only have one bar and therefore should
+      // use only the first label for the step axis
+      labelAxisTicks = data.normalized.labels.slice(0, 1);
     } else {
-      labelAxis = new Chartist.StepAxis(
-        Chartist.Axis.units.x,
-        chartRect,
-        function timeAxisTransform(projectedValue) {
-          projectedValue.pos = chartRect.x1 + projectedValue.pos;
-          return projectedValue;
-        },
-        {
-          x: options.axisX.labelOffset.x,
-          y: chartRect.y1 + options.axisX.labelOffset.y + (this.supportsForeignObject ? 5 : 20)
-        },
-        {
-          stepCount: this.data.labels.length
-        }
-      );
-
-      valueAxis = new Chartist.LinearScaleAxis(
-        Chartist.Axis.units.y,
-        chartRect,
-        function valueAxisTransform(projectedValue) {
-          projectedValue.pos = chartRect.y1 - projectedValue.pos;
-          return projectedValue;
-        },
-        {
-          x: normalizedPadding.left + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
-          y: options.axisY.labelOffset.y + (this.supportsForeignObject ? -15 : 0)
-        },
-        {
-          highLow: highLow,
-          scaleMinSpace: options.axisY.scaleMinSpace,
-          referenceValue: 0
-        }
-      );
+      // If distributed series are enabled but stacked bars aren't, we should use the series labels
+      // If we are drawing a regular bar chart with two dimensional series data, we just use the labels array
+      // as the bars are normalized
+      labelAxisTicks = data.normalized.labels;
     }
 
-    // Start drawing
-    var labelGroup = this.svg.elem('g').addClass(options.classNames.labelGroup),
-      gridGroup = this.svg.elem('g').addClass(options.classNames.gridGroup),
-      // Projected 0 point
-      zeroPoint = options.horizontalBars ? (chartRect.x1 + valueAxis.projectValue(0).pos) : (chartRect.y1 - valueAxis.projectValue(0).pos),
-      // Used to track the screen coordinates of stacked bars
-      stackedBarValues = [];
+    // Set labelAxis and valueAxis based on the horizontalBars setting. This setting will flip the axes if necessary.
+    if(options.horizontalBars) {
+      if(options.axisX.type === undefined) {
+        valueAxis = axisX = new Chartist.AutoScaleAxis(Chartist.Axis.units.x, data.normalized.series, chartRect, Chartist.extend({}, options.axisX, {
+          highLow: highLow,
+          referenceValue: 0
+        }));
+      } else {
+        valueAxis = axisX = options.axisX.type.call(Chartist, Chartist.Axis.units.x, data.normalized.series, chartRect, Chartist.extend({}, options.axisX, {
+          highLow: highLow,
+          referenceValue: 0
+        }));
+      }
 
-    Chartist.createAxis(
-      labelAxis,
-      this.data.labels,
-      chartRect,
-      gridGroup,
-      labelGroup,
-      this.supportsForeignObject,
-      options,
-      this.eventEmitter
-    );
+      if(options.axisY.type === undefined) {
+        labelAxis = axisY = new Chartist.StepAxis(Chartist.Axis.units.y, data.normalized.series, chartRect, {
+          ticks: labelAxisTicks
+        });
+      } else {
+        labelAxis = axisY = options.axisY.type.call(Chartist, Chartist.Axis.units.y, data.normalized.series, chartRect, options.axisY);
+      }
+    } else {
+      if(options.axisX.type === undefined) {
+        labelAxis = axisX = new Chartist.StepAxis(Chartist.Axis.units.x, data.normalized.series, chartRect, {
+          ticks: labelAxisTicks
+        });
+      } else {
+        labelAxis = axisX = options.axisX.type.call(Chartist, Chartist.Axis.units.x, data.normalized.series, chartRect, options.axisX);
+      }
 
-    Chartist.createAxis(
-      valueAxis,
-      valueAxis.bounds.values,
-      chartRect,
-      gridGroup,
-      labelGroup,
-      this.supportsForeignObject,
-      options,
-      this.eventEmitter
-    );
+      if(options.axisY.type === undefined) {
+        valueAxis = axisY = new Chartist.AutoScaleAxis(Chartist.Axis.units.y, data.normalized.series, chartRect, Chartist.extend({}, options.axisY, {
+          highLow: highLow,
+          referenceValue: 0
+        }));
+      } else {
+        valueAxis = axisY = options.axisY.type.call(Chartist, Chartist.Axis.units.y, data.normalized.series, chartRect, Chartist.extend({}, options.axisY, {
+          highLow: highLow,
+          referenceValue: 0
+        }));
+      }
+    }
+
+    // Projected 0 point
+    var zeroPoint = options.horizontalBars ? (chartRect.x1 + valueAxis.projectValue(0)) : (chartRect.y1 - valueAxis.projectValue(0));
+    // Used to track the screen coordinates of stacked bars
+    var stackedBarValues = [];
+
+    labelAxis.createGridAndLabels(gridGroup, labelGroup, this.supportsForeignObject, options, this.eventEmitter);
+    valueAxis.createGridAndLabels(gridGroup, labelGroup, this.supportsForeignObject, options, this.eventEmitter);
+
+    if (options.showGridBackground) {
+      Chartist.createGridBackground(gridGroup, chartRect, options.classNames.gridBackground, this.eventEmitter);
+    }
 
     // Draw the series
-    this.data.series.forEach(function(series, seriesIndex) {
+    data.raw.series.forEach(function(series, seriesIndex) {
       // Calculating bi-polar value of index for seriesOffset. For i = 0..4 biPol will be -1.5, -0.5, 0.5, 1.5 etc.
-      var biPol = seriesIndex - (this.data.series.length - 1) / 2,
+      var biPol = seriesIndex - (data.raw.series.length - 1) / 2;
       // Half of the period width between vertical grid lines used to position bars
-        periodHalfLength = chartRect[labelAxis.units.len]() / normalizedData[seriesIndex].length / 2;
+      var periodHalfLength;
+      // Current series SVG element
+      var seriesElement;
 
-      seriesGroups[seriesIndex] = this.svg.elem('g');
+      // We need to set periodHalfLength based on some options combinations
+      if(options.distributeSeries && !options.stackBars) {
+        // If distributed series are enabled but stacked bars aren't, we need to use the length of the normaizedData array
+        // which is the series count and divide by 2
+        periodHalfLength = labelAxis.axisLength / data.normalized.series.length / 2;
+      } else if(options.distributeSeries && options.stackBars) {
+        // If distributed series and stacked bars are enabled we'll only get one bar so we should just divide the axis
+        // length by 2
+        periodHalfLength = labelAxis.axisLength / 2;
+      } else {
+        // On regular bar charts we should just use the series length
+        periodHalfLength = labelAxis.axisLength / data.normalized.series[seriesIndex].length / 2;
+      }
+
+      // Adding the series group to the series element
+      seriesElement = seriesGroup.elem('g');
 
       // Write attributes to series group element. If series name or meta is undefined the attributes will not be written
-      seriesGroups[seriesIndex].attr({
-        'series-name': series.name,
-        'meta': Chartist.serialize(series.meta)
-      }, Chartist.xmlNs.uri);
+      seriesElement.attr({
+        'ct:series-name': series.name,
+        'ct:meta': Chartist.serialize(series.meta)
+      });
 
       // Use series class from series data or if not set generate one
-      seriesGroups[seriesIndex].addClass([
+      seriesElement.addClass([
         options.classNames.series,
         (series.className || options.classNames.series + '-' + Chartist.alphaNumerate(seriesIndex))
       ].join(' '));
 
-      normalizedData[seriesIndex].forEach(function(value, valueIndex) {
-        var projected = {
-            x: chartRect.x1 + (options.horizontalBars ? valueAxis : labelAxis).projectValue(value, valueIndex, normalizedData[seriesIndex]).pos,
-            y: chartRect.y1 - (options.horizontalBars ? labelAxis : valueAxis).projectValue(value, valueIndex, normalizedData[seriesIndex]).pos
-          },
+      data.normalized.series[seriesIndex].forEach(function(value, valueIndex) {
+        var projected,
           bar,
-          previousStack;
+          previousStack,
+          labelAxisValueIndex;
 
-        // Offset to center bar between grid lines
-        projected[labelAxis.units.pos] += periodHalfLength * (options.horizontalBars ? -1 : 1);
-        // Using bi-polar offset for multiple series if no stacked bars are used
-        projected[labelAxis.units.pos] += options.stackBars ? 0 : biPol * options.seriesBarDistance * (options.horizontalBars ? -1 : 1);
+        // We need to set labelAxisValueIndex based on some options combinations
+        if(options.distributeSeries && !options.stackBars) {
+          // If distributed series are enabled but stacked bars aren't, we can use the seriesIndex for later projection
+          // on the step axis for label positioning
+          labelAxisValueIndex = seriesIndex;
+        } else if(options.distributeSeries && options.stackBars) {
+          // If distributed series and stacked bars are enabled, we will only get one bar and therefore always use
+          // 0 for projection on the label step axis
+          labelAxisValueIndex = 0;
+        } else {
+          // On regular bar charts we just use the value index to project on the label step axis
+          labelAxisValueIndex = valueIndex;
+        }
+
+        // We need to transform coordinates differently based on the chart layout
+        if(options.horizontalBars) {
+          projected = {
+            x: chartRect.x1 + valueAxis.projectValue(value && value.x ? value.x : 0, valueIndex, data.normalized.series[seriesIndex]),
+            y: chartRect.y1 - labelAxis.projectValue(value && value.y ? value.y : 0, labelAxisValueIndex, data.normalized.series[seriesIndex])
+          };
+        } else {
+          projected = {
+            x: chartRect.x1 + labelAxis.projectValue(value && value.x ? value.x : 0, labelAxisValueIndex, data.normalized.series[seriesIndex]),
+            y: chartRect.y1 - valueAxis.projectValue(value && value.y ? value.y : 0, valueIndex, data.normalized.series[seriesIndex])
+          }
+        }
+
+        // If the label axis is a step based axis we will offset the bar into the middle of between two steps using
+        // the periodHalfLength value. Also we do arrange the different series so that they align up to each other using
+        // the seriesBarDistance. If we don't have a step axis, the bar positions can be chosen freely so we should not
+        // add any automated positioning.
+        if(labelAxis instanceof Chartist.StepAxis) {
+          // Offset to center bar between grid lines, but only if the step axis is not stretched
+          if(!labelAxis.options.stretch) {
+            projected[labelAxis.units.pos] += periodHalfLength * (options.horizontalBars ? -1 : 1);
+          }
+          // Using bi-polar offset for multiple series if no stacked bars or series distribution is used
+          projected[labelAxis.units.pos] += (options.stackBars || options.distributeSeries) ? 0 : biPol * options.seriesBarDistance * (options.horizontalBars ? -1 : 1);
+        }
 
         // Enter value in stacked bar values used to remember previous screen value for stacking up bars
         previousStack = stackedBarValues[valueIndex] || zeroPoint;
         stackedBarValues[valueIndex] = previousStack - (zeroPoint - projected[labelAxis.counterUnits.pos]);
 
+        // Skip if value is undefined
+        if(value === undefined) {
+          return;
+        }
+
         var positions = {};
         positions[labelAxis.units.pos + '1'] = projected[labelAxis.units.pos];
         positions[labelAxis.units.pos + '2'] = projected[labelAxis.units.pos];
-        // If bars are stacked we use the stackedBarValues reference and otherwise base all bars off the zero line
-        positions[labelAxis.counterUnits.pos + '1'] = options.stackBars ? previousStack : zeroPoint;
-        positions[labelAxis.counterUnits.pos + '2'] = options.stackBars ? stackedBarValues[valueIndex] : projected[labelAxis.counterUnits.pos];
 
-        bar = seriesGroups[seriesIndex].elem('line', positions, options.classNames.bar).attr({
-          'value': value,
-          'meta': Chartist.getMetaData(series, valueIndex)
-        }, Chartist.xmlNs.uri);
+        if(options.stackBars && (options.stackMode === 'accumulate' || !options.stackMode)) {
+          // Stack mode: accumulate (default)
+          // If bars are stacked we use the stackedBarValues reference and otherwise base all bars off the zero line
+          // We want backwards compatibility, so the expected fallback without the 'stackMode' option
+          // to be the original behaviour (accumulate)
+          positions[labelAxis.counterUnits.pos + '1'] = previousStack;
+          positions[labelAxis.counterUnits.pos + '2'] = stackedBarValues[valueIndex];
+        } else {
+          // Draw from the zero line normally
+          // This is also the same code for Stack mode: overlap
+          positions[labelAxis.counterUnits.pos + '1'] = zeroPoint;
+          positions[labelAxis.counterUnits.pos + '2'] = projected[labelAxis.counterUnits.pos];
+        }
+
+        // Limit x and y so that they are within the chart rect
+        positions.x1 = Math.min(Math.max(positions.x1, chartRect.x1), chartRect.x2);
+        positions.x2 = Math.min(Math.max(positions.x2, chartRect.x1), chartRect.x2);
+        positions.y1 = Math.min(Math.max(positions.y1, chartRect.y2), chartRect.y1);
+        positions.y2 = Math.min(Math.max(positions.y2, chartRect.y2), chartRect.y1);
+
+        var metaData = Chartist.getMetaData(series, valueIndex);
+
+        // Create bar element
+        bar = seriesElement.elem('line', positions, options.classNames.bar).attr({
+          'ct:value': [value.x, value.y].filter(Chartist.isNumeric).join(','),
+          'ct:meta': Chartist.serialize(metaData)
+        });
 
         this.eventEmitter.emit('draw', Chartist.extend({
           type: 'bar',
           value: value,
           index: valueIndex,
+          meta: metaData,
+          series: series,
+          seriesIndex: seriesIndex,
+          axisX: axisX,
+          axisY: axisY,
           chartRect: chartRect,
-          group: seriesGroups[seriesIndex],
+          group: seriesElement,
           element: bar
         }, positions));
       }.bind(this));
@@ -278,6 +384,8 @@
     this.eventEmitter.emit('created', {
       bounds: valueAxis.bounds,
       chartRect: chartRect,
+      axisX: axisX,
+      axisY: axisY,
       svg: this.svg,
       options: options
     });
@@ -335,4 +443,4 @@
     createChart: createChart
   });
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/charts/line.js

@@ -6,9 +6,12 @@
  * @module Chartist.Line
  */
 /* global Chartist */
-(function(window, document, Chartist){
+(function(globalRoot, Chartist){
   'use strict';
 
+  var window = globalRoot.window;
+  var document = globalRoot.document;
+
   /**
    * Default options in line charts. Expand the code view to see a detailed list of options with comments.
    *
@@ -19,22 +22,8 @@
     axisX: {
       // The offset of the labels to the chart area
       offset: 30,
-      // Allows you to correct label positioning on this axis by positive or negative x and y offset.
-      labelOffset: {
-        x: 0,
-        y: 0
-      },
-      // If labels should be shown or not
-      showLabel: true,
-      // If the axis grid should be drawn or not
-      showGrid: true,
-      // Interpolation function that allows you to intercept the value from the axis label
-      labelInterpolationFnc: Chartist.noop
-    },
-    // Options for Y-Axis
-    axisY: {
-      // The offset of the labels to the chart area
-      offset: 40,
+      // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
+      position: 'end',
       // Allows you to correct label positioning on this axis by positive or negative x and y offset.
       labelOffset: {
         x: 0,
@@ -46,8 +35,32 @@
       showGrid: true,
       // Interpolation function that allows you to intercept the value from the axis label
       labelInterpolationFnc: Chartist.noop,
+      // Set the axis type to be used to project values on this axis. If not defined, Chartist.StepAxis will be used for the X-Axis, where the ticks option will be set to the labels in the data and the stretch option will be set to the global fullWidth option. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.
+      type: undefined
+    },
+    // Options for Y-Axis
+    axisY: {
+      // The offset of the labels to the chart area
+      offset: 40,
+      // Position where labels are placed. Can be set to `start` or `end` where `start` is equivalent to left or top on vertical axis and `end` is equivalent to right or bottom on horizontal axis.
+      position: 'start',
+      // Allows you to correct label positioning on this axis by positive or negative x and y offset.
+      labelOffset: {
+        x: 0,
+        y: 0
+      },
+      // If labels should be shown or not
+      showLabel: true,
+      // If the axis grid should be drawn or not
+      showGrid: true,
+      // Interpolation function that allows you to intercept the value from the axis label
+      labelInterpolationFnc: Chartist.noop,
+      // Set the axis type to be used to project values on this axis. If not defined, Chartist.AutoScaleAxis will be used for the Y-Axis, where the high and low options will be set to the global high and low options. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.
+      type: undefined,
       // This value specifies the minimum height in pixel of the scale steps
-      scaleMinSpace: 20
+      scaleMinSpace: 20,
+      // Use only integer values (whole numbers) for the scale steps
+      onlyInteger: false
     },
     // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
     width: undefined,
@@ -63,12 +76,19 @@
     areaBase: 0,
     // Specify if the lines should be smoothed. This value can be true or false where true will result in smoothing using the default smoothing interpolation function Chartist.Interpolation.cardinal and false results in Chartist.Interpolation.none. You can also choose other smoothing / interpolation functions available in the Chartist.Interpolation module, or write your own interpolation function. Check the examples for a brief description.
     lineSmooth: true,
+    // If the line chart should add a background fill to the .ct-grids group.
+    showGridBackground: false,
     // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
     low: undefined,
     // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
     high: undefined,
     // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
-    chartPadding: 5,
+    chartPadding: {
+      top: 15,
+      right: 15,
+      bottom: 5,
+      left: 10
+    },
     // When set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. For the last label to be drawn correctly you might need to add chart padding or offset the last label with a draw event handler.
     fullWidth: false,
     // If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
@@ -84,8 +104,11 @@
       area: 'ct-area',
       grid: 'ct-grid',
       gridGroup: 'ct-grids',
+      gridBackground: 'ct-grid-background',
       vertical: 'ct-vertical',
-      horizontal: 'ct-horizontal'
+      horizontal: 'ct-horizontal',
+      start: 'ct-start',
+      end: 'ct-end'
     }
   };
 
@@ -94,195 +117,203 @@
    *
    */
   function createChart(options) {
-    var seriesGroups = [],
-      normalizedData = Chartist.normalizeDataArray(Chartist.getDataArray(this.data, options.reverseData), this.data.labels.length),
-      normalizedPadding = Chartist.normalizePadding(options.chartPadding, defaultOptions.padding);
+    var data = Chartist.normalizeData(this.data, options.reverseData, true);
 
     // Create new svg object
     this.svg = Chartist.createSvg(this.container, options.width, options.height, options.classNames.chart);
+    // Create groups for labels, grid and series
+    var gridGroup = this.svg.elem('g').addClass(options.classNames.gridGroup);
+    var seriesGroup = this.svg.elem('g');
+    var labelGroup = this.svg.elem('g').addClass(options.classNames.labelGroup);
 
     var chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
+    var axisX, axisY;
 
-    var highLow = Chartist.getHighLow(normalizedData);
-    // Overrides of high / low from settings
-    highLow.high = +options.high || (options.high === 0 ? 0 : highLow.high);
-    highLow.low = +options.low || (options.low === 0 ? 0 : highLow.low);
-
-    var axisX = new Chartist.StepAxis(
-      Chartist.Axis.units.x,
-      chartRect,
-      function xAxisTransform(projectedValue) {
-        projectedValue.pos = chartRect.x1 + projectedValue.pos;
-        return projectedValue;
-      },
-      {
-        x: options.axisX.labelOffset.x,
-        y: chartRect.y1 + options.axisX.labelOffset.y + (this.supportsForeignObject ? 5 : 20)
-      },
-      {
-        stepCount: this.data.labels.length,
+    if(options.axisX.type === undefined) {
+      axisX = new Chartist.StepAxis(Chartist.Axis.units.x, data.normalized.series, chartRect, Chartist.extend({}, options.axisX, {
+        ticks: data.normalized.labels,
         stretch: options.fullWidth
-      }
-    );
+      }));
+    } else {
+      axisX = options.axisX.type.call(Chartist, Chartist.Axis.units.x, data.normalized.series, chartRect, options.axisX);
+    }
 
-    var axisY = new Chartist.LinearScaleAxis(
-      Chartist.Axis.units.y,
-      chartRect,
-      function yAxisTransform(projectedValue) {
-        projectedValue.pos = chartRect.y1 - projectedValue.pos;
-        return projectedValue;
-      },
-      {
-        x: normalizedPadding.left + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
-        y: options.axisY.labelOffset.y + (this.supportsForeignObject ? -15 : 0)
-      },
-      {
-        highLow: highLow,
-        scaleMinSpace: options.axisY.scaleMinSpace
-      }
-    );
+    if(options.axisY.type === undefined) {
+      axisY = new Chartist.AutoScaleAxis(Chartist.Axis.units.y, data.normalized.series, chartRect, Chartist.extend({}, options.axisY, {
+        high: Chartist.isNumeric(options.high) ? options.high : options.axisY.high,
+        low: Chartist.isNumeric(options.low) ? options.low : options.axisY.low
+      }));
+    } else {
+      axisY = options.axisY.type.call(Chartist, Chartist.Axis.units.y, data.normalized.series, chartRect, options.axisY);
+    }
 
-    // Start drawing
-    var labelGroup = this.svg.elem('g').addClass(options.classNames.labelGroup),
-      gridGroup = this.svg.elem('g').addClass(options.classNames.gridGroup);
+    axisX.createGridAndLabels(gridGroup, labelGroup, this.supportsForeignObject, options, this.eventEmitter);
+    axisY.createGridAndLabels(gridGroup, labelGroup, this.supportsForeignObject, options, this.eventEmitter);
 
-    Chartist.createAxis(
-      axisX,
-      this.data.labels,
-      chartRect,
-      gridGroup,
-      labelGroup,
-      this.supportsForeignObject,
-      options,
-      this.eventEmitter
-    );
-
-    Chartist.createAxis(
-      axisY,
-      axisY.bounds.values,
-      chartRect,
-      gridGroup,
-      labelGroup,
-      this.supportsForeignObject,
-      options,
-      this.eventEmitter
-    );
+    if (options.showGridBackground) {
+      Chartist.createGridBackground(gridGroup, chartRect, options.classNames.gridBackground, this.eventEmitter);
+    }
 
     // Draw the series
-    this.data.series.forEach(function(series, seriesIndex) {
-      seriesGroups[seriesIndex] = this.svg.elem('g');
+    data.raw.series.forEach(function(series, seriesIndex) {
+      var seriesElement = seriesGroup.elem('g');
 
       // Write attributes to series group element. If series name or meta is undefined the attributes will not be written
-      seriesGroups[seriesIndex].attr({
-        'series-name': series.name,
-        'meta': Chartist.serialize(series.meta)
-      }, Chartist.xmlNs.uri);
+      seriesElement.attr({
+        'ct:series-name': series.name,
+        'ct:meta': Chartist.serialize(series.meta)
+      });
 
       // Use series class from series data or if not set generate one
-      seriesGroups[seriesIndex].addClass([
+      seriesElement.addClass([
         options.classNames.series,
         (series.className || options.classNames.series + '-' + Chartist.alphaNumerate(seriesIndex))
       ].join(' '));
 
-      var pathCoordinates = [];
+      var pathCoordinates = [],
+        pathData = [];
 
-      normalizedData[seriesIndex].forEach(function(value, valueIndex) {
+      data.normalized.series[seriesIndex].forEach(function(value, valueIndex) {
         var p = {
-          x: chartRect.x1 + axisX.projectValue(value, valueIndex,  normalizedData[seriesIndex]).pos,
-          y: chartRect.y1 - axisY.projectValue(value, valueIndex,  normalizedData[seriesIndex]).pos
+          x: chartRect.x1 + axisX.projectValue(value, valueIndex, data.normalized.series[seriesIndex]),
+          y: chartRect.y1 - axisY.projectValue(value, valueIndex, data.normalized.series[seriesIndex])
         };
         pathCoordinates.push(p.x, p.y);
+        pathData.push({
+          value: value,
+          valueIndex: valueIndex,
+          meta: Chartist.getMetaData(series, valueIndex)
+        });
+      }.bind(this));
 
-        //If we should show points we need to create them now to avoid secondary loop
-        // Small offset for Firefox to render squares correctly
-        if (options.showPoint) {
-          var point = seriesGroups[seriesIndex].elem('line', {
-            x1: p.x,
-            y1: p.y,
-            x2: p.x + 0.01,
-            y2: p.y
+      var seriesOptions = {
+        lineSmooth: Chartist.getSeriesOption(series, options, 'lineSmooth'),
+        showPoint: Chartist.getSeriesOption(series, options, 'showPoint'),
+        showLine: Chartist.getSeriesOption(series, options, 'showLine'),
+        showArea: Chartist.getSeriesOption(series, options, 'showArea'),
+        areaBase: Chartist.getSeriesOption(series, options, 'areaBase')
+      };
+
+      var smoothing = typeof seriesOptions.lineSmooth === 'function' ?
+        seriesOptions.lineSmooth : (seriesOptions.lineSmooth ? Chartist.Interpolation.monotoneCubic() : Chartist.Interpolation.none());
+      // Interpolating path where pathData will be used to annotate each path element so we can trace back the original
+      // index, value and meta data
+      var path = smoothing(pathCoordinates, pathData);
+
+      // If we should show points we need to create them now to avoid secondary loop
+      // Points are drawn from the pathElements returned by the interpolation function
+      // Small offset for Firefox to render squares correctly
+      if (seriesOptions.showPoint) {
+
+        path.pathElements.forEach(function(pathElement) {
+          var point = seriesElement.elem('line', {
+            x1: pathElement.x,
+            y1: pathElement.y,
+            x2: pathElement.x + 0.01,
+            y2: pathElement.y
           }, options.classNames.point).attr({
-            'value': value,
-            'meta': Chartist.getMetaData(series, valueIndex)
-          }, Chartist.xmlNs.uri);
+            'ct:value': [pathElement.data.value.x, pathElement.data.value.y].filter(Chartist.isNumeric).join(','),
+            'ct:meta': Chartist.serialize(pathElement.data.meta)
+          });
 
           this.eventEmitter.emit('draw', {
             type: 'point',
-            value: value,
-            index: valueIndex,
-            group: seriesGroups[seriesIndex],
+            value: pathElement.data.value,
+            index: pathElement.data.valueIndex,
+            meta: pathElement.data.meta,
+            series: series,
+            seriesIndex: seriesIndex,
+            axisX: axisX,
+            axisY: axisY,
+            group: seriesElement,
             element: point,
-            x: p.x,
-            y: p.y
+            x: pathElement.x,
+            y: pathElement.y
           });
-        }
-      }.bind(this));
+        }.bind(this));
+      }
 
-      // TODO: Nicer handling of conditions, maybe composition?
-      if (options.showLine || options.showArea) {
-        var smoothing = typeof options.lineSmooth === 'function' ?
-          options.lineSmooth : (options.lineSmooth ? Chartist.Interpolation.cardinal() : Chartist.Interpolation.none()),
-          path = smoothing(pathCoordinates);
+      if(seriesOptions.showLine) {
+        var line = seriesElement.elem('path', {
+          d: path.stringify()
+        }, options.classNames.line, true);
 
-        if(options.showLine) {
-          var line = seriesGroups[seriesIndex].elem('path', {
-            d: path.stringify()
-          }, options.classNames.line, true).attr({
-            'values': normalizedData[seriesIndex]
-          }, Chartist.xmlNs.uri);
+        this.eventEmitter.emit('draw', {
+          type: 'line',
+          values: data.normalized.series[seriesIndex],
+          path: path.clone(),
+          chartRect: chartRect,
+          index: seriesIndex,
+          series: series,
+          seriesIndex: seriesIndex,
+          seriesMeta: series.meta,
+          axisX: axisX,
+          axisY: axisY,
+          group: seriesElement,
+          element: line
+        });
+      }
 
-          this.eventEmitter.emit('draw', {
-            type: 'line',
-            values: normalizedData[seriesIndex],
-            path: path.clone(),
-            chartRect: chartRect,
-            index: seriesIndex,
-            group: seriesGroups[seriesIndex],
-            element: line
-          });
-        }
+      // Area currently only works with axes that support a range!
+      if(seriesOptions.showArea && axisY.range) {
+        // If areaBase is outside the chart area (< min or > max) we need to set it respectively so that
+        // the area is not drawn outside the chart area.
+        var areaBase = Math.max(Math.min(seriesOptions.areaBase, axisY.range.max), axisY.range.min);
 
-        if(options.showArea) {
-          // If areaBase is outside the chart area (< low or > high) we need to set it respectively so that
-          // the area is not drawn outside the chart area.
-          var areaBase = Math.max(Math.min(options.areaBase, axisY.bounds.max), axisY.bounds.min);
+        // We project the areaBase value into screen coordinates
+        var areaBaseProjected = chartRect.y1 - axisY.projectValue(areaBase);
 
-          // We project the areaBase value into screen coordinates
-          var areaBaseProjected = chartRect.y1 - axisY.projectValue(areaBase).pos;
+        // In order to form the area we'll first split the path by move commands so we can chunk it up into segments
+        path.splitByCommand('M').filter(function onlySolidSegments(pathSegment) {
+          // We filter only "solid" segments that contain more than one point. Otherwise there's no need for an area
+          return pathSegment.pathElements.length > 1;
+        }).map(function convertToArea(solidPathSegments) {
+          // Receiving the filtered solid path segments we can now convert those segments into fill areas
+          var firstElement = solidPathSegments.pathElements[0];
+          var lastElement = solidPathSegments.pathElements[solidPathSegments.pathElements.length - 1];
 
-          // Clone original path and splice our new area path to add the missing path elements to close the area shape
-          var areaPath = path.clone();
-          // Modify line path and add missing elements for area
-          areaPath.position(0)
+          // Cloning the solid path segment with closing option and removing the first move command from the clone
+          // We then insert a new move that should start at the area base and draw a straight line up or down
+          // at the end of the path we add an additional straight line to the projected area base value
+          // As the closing option is set our path will be automatically closed
+          return solidPathSegments.clone(true)
+            .position(0)
             .remove(1)
-            .move(chartRect.x1, areaBaseProjected)
-            .line(pathCoordinates[0], pathCoordinates[1])
-            .position(areaPath.pathElements.length)
-            .line(pathCoordinates[pathCoordinates.length - 2], areaBaseProjected);
+            .move(firstElement.x, areaBaseProjected)
+            .line(firstElement.x, firstElement.y)
+            .position(solidPathSegments.pathElements.length + 1)
+            .line(lastElement.x, areaBaseProjected);
 
-          // Create the new path for the area shape with the area class from the options
-          var area = seriesGroups[seriesIndex].elem('path', {
+        }).forEach(function createArea(areaPath) {
+          // For each of our newly created area paths, we'll now create path elements by stringifying our path objects
+          // and adding the created DOM elements to the correct series group
+          var area = seriesElement.elem('path', {
             d: areaPath.stringify()
-          }, options.classNames.area, true).attr({
-            'values': normalizedData[seriesIndex]
-          }, Chartist.xmlNs.uri);
+          }, options.classNames.area, true);
 
+          // Emit an event for each area that was drawn
           this.eventEmitter.emit('draw', {
             type: 'area',
-            values: normalizedData[seriesIndex],
+            values: data.normalized.series[seriesIndex],
             path: areaPath.clone(),
+            series: series,
+            seriesIndex: seriesIndex,
+            axisX: axisX,
+            axisY: axisY,
             chartRect: chartRect,
             index: seriesIndex,
-            group: seriesGroups[seriesIndex],
+            group: seriesElement,
             element: area
           });
-        }
+        }.bind(this));
       }
     }.bind(this));
 
     this.eventEmitter.emit('created', {
       bounds: axisY.bounds,
       chartRect: chartRect,
+      axisX: axisX,
+      axisY: axisY,
       svg: this.svg,
       options: options
     });
@@ -344,7 +375,7 @@
    *   ]
    * };
    *
-   * // In adition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.
+   * // In addition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.
    * var responsiveOptions = [
    *   ['screen and (min-width: 641px) and (max-width: 1024px)', {
    *     showPoint: false,
@@ -384,4 +415,4 @@
     createChart: createChart
   });
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/charts/pie.js

@@ -4,9 +4,12 @@
  * @module Chartist.Pie
  */
 /* global Chartist */
-(function(window, document, Chartist) {
+(function(globalRoot, Chartist) {
   'use strict';
 
+  var window = globalRoot.window;
+  var document = globalRoot.document;
+
   /**
    * Default options in line charts. Expand the code view to see a detailed list of options with comments.
    *
@@ -19,12 +22,14 @@
     height: undefined,
     // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
     chartPadding: 5,
-    // Override the class names that get used to generate the SVG structure of the chart
+    // Override the class names that are used to generate the SVG structure of the chart
     classNames: {
-      chart: 'ct-chart-pie',
+      chartPie: 'ct-chart-pie',
+      chartDonut: 'ct-chart-donut',
       series: 'ct-series',
-      slice: 'ct-slice',
-      donut: 'ct-donut',
+      slicePie: 'ct-slice-pie',
+      sliceDonut: 'ct-slice-donut',
+      sliceDonutSolid: 'ct-slice-donut-solid',
       label: 'ct-label'
     },
     // The start angle of the pie chart in degrees where 0 points north. A higher value offsets the start angle clockwise.
@@ -33,18 +38,25 @@
     total: undefined,
     // If specified the donut CSS classes will be used and strokes will be drawn instead of pie slices.
     donut: false,
+    // If specified the donut segments will be drawn as shapes instead of strokes.
+    donutSolid: false,
     // Specify the donut stroke width, currently done in javascript for convenience. May move to CSS styles in the future.
+    // This option can be set as number or string to specify a relative width (i.e. 100 or '30%').
     donutWidth: 60,
     // If a label should be shown or not
     showLabel: true,
     // Label position offset from the standard position which is half distance of the radius. This value can be either positive or negative. Positive values will position the label away from the center.
     labelOffset: 0,
+    // This option can be set to 'inside', 'outside' or 'center'. Positioned with 'inside' the labels will be placed on half the distance of the radius to the border of the Pie by respecting the 'labelOffset'. The 'outside' option will place the labels at the border of the pie and 'center' will place the labels in the absolute center point of the chart. The 'center' option only makes sense in conjunction with the 'labelOffset' option.
+    labelPosition: 'inside',
     // An interpolation function for the label value
     labelInterpolationFnc: Chartist.noop,
     // Label direction can be 'neutral', 'explode' or 'implode'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.
     labelDirection: 'neutral',
     // If true the whole data is reversed including labels, the series order as well as the whole series data arrays.
-    reverseData: false
+    reverseData: false,
+    // If true empty values will be ignored to avoid drawing unncessary slices and labels
+    ignoreEmptyValues: false
   };
 
   /**
@@ -75,33 +87,50 @@
    * @param options
    */
   function createChart(options) {
+    var data = Chartist.normalizeData(this.data);
     var seriesGroups = [],
+      labelsGroup,
       chartRect,
       radius,
       labelRadius,
       totalDataSum,
-      startAngle = options.startAngle,
-      dataArray = Chartist.getDataArray(this.data, options.reverseData);
+      startAngle = options.startAngle;
 
     // Create SVG.js draw
-    this.svg = Chartist.createSvg(this.container, options.width, options.height, options.classNames.chart);
+    this.svg = Chartist.createSvg(this.container, options.width, options.height,options.donut ? options.classNames.chartDonut : options.classNames.chartPie);
     // Calculate charting rect
     chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
     // Get biggest circle radius possible within chartRect
     radius = Math.min(chartRect.width() / 2, chartRect.height() / 2);
     // Calculate total of all series to get reference value or use total reference from optional options
-    totalDataSum = options.total || dataArray.reduce(function(previousValue, currentValue) {
+    totalDataSum = options.total || data.normalized.series.reduce(function(previousValue, currentValue) {
       return previousValue + currentValue;
     }, 0);
 
+    var donutWidth = Chartist.quantity(options.donutWidth);
+    if (donutWidth.unit === '%') {
+      donutWidth.value *= radius / 100;
+    }
+
     // If this is a donut chart we need to adjust our radius to enable strokes to be drawn inside
     // Unfortunately this is not possible with the current SVG Spec
     // See this proposal for more details: http://lists.w3.org/Archives/Public/www-svg/2003Oct/0000.html
-    radius -= options.donut ? options.donutWidth / 2  : 0;
+    radius -= options.donut && !options.donutSolid ? donutWidth.value / 2  : 0;
 
-    // If a donut chart then the label position is at the radius, if regular pie chart it's half of the radius
-    // see https://github.com/gionkunz/chartist-js/issues/21
-    labelRadius = options.donut ? radius : radius / 2;
+    // If labelPosition is set to `outside` or a donut chart is drawn then the label position is at the radius,
+    // if regular pie chart it's half of the radius
+    if(options.labelPosition === 'outside' || options.donut && !options.donutSolid) {
+      labelRadius = radius;
+    } else if(options.labelPosition === 'center') {
+      // If labelPosition is center we start with 0 and will later wait for the labelOffset
+      labelRadius = 0;
+    } else if(options.donutSolid) {
+      labelRadius = radius - donutWidth.value / 2;
+    } else {
+      // Default option is 'inside' where we use half the radius so the label will be placed in the center of the pie
+      // slice
+      labelRadius = radius / 2;
+    }
     // Add the offset to the labelRadius where a negative offset means closed to the center of the chart
     labelRadius += options.labelOffset;
 
@@ -112,77 +141,106 @@
     };
 
     // Check if there is only one non-zero value in the series array.
-    var hasSingleValInSeries = this.data.series.filter(function(val) {
-      return val !== 0;
+    var hasSingleValInSeries = data.raw.series.filter(function(val) {
+      return val.hasOwnProperty('value') ? val.value !== 0 : val !== 0;
     }).length === 1;
 
+    // Creating the series groups
+    data.raw.series.forEach(function(series, index) {
+      seriesGroups[index] = this.svg.elem('g', null, null);
+    }.bind(this));
+    //if we need to show labels we create the label group now
+    if(options.showLabel) {
+      labelsGroup = this.svg.elem('g', null, null);
+    }
+
     // Draw the series
     // initialize series groups
-    for (var i = 0; i < this.data.series.length; i++) {
-      seriesGroups[i] = this.svg.elem('g', null, null, true);
+    data.raw.series.forEach(function(series, index) {
+      // If current value is zero and we are ignoring empty values then skip to next value
+      if (data.normalized.series[index] === 0 && options.ignoreEmptyValues) return;
 
-      // If the series is an object and contains a name we add a custom attribute
-      if(this.data.series[i].name) {
-        seriesGroups[i].attr({
-          'series-name': this.data.series[i].name,
-          'meta': Chartist.serialize(this.data.series[i].meta)
-        }, Chartist.xmlNs.uri);
-      }
+      // If the series is an object and contains a name or meta data we add a custom attribute
+      seriesGroups[index].attr({
+        'ct:series-name': series.name
+      });
 
       // Use series class from series data or if not set generate one
-      seriesGroups[i].addClass([
+      seriesGroups[index].addClass([
         options.classNames.series,
-        (this.data.series[i].className || options.classNames.series + '-' + Chartist.alphaNumerate(i))
+        (series.className || options.classNames.series + '-' + Chartist.alphaNumerate(index))
       ].join(' '));
 
-      var endAngle = startAngle + dataArray[i] / totalDataSum * 360;
+      // If the whole dataset is 0 endAngle should be zero. Can't divide by 0.
+      var endAngle = (totalDataSum > 0 ? startAngle + data.normalized.series[index] / totalDataSum * 360 : 0);
+
+      // Use slight offset so there are no transparent hairline issues
+      var overlappigStartAngle = Math.max(0, startAngle - (index === 0 || hasSingleValInSeries ? 0 : 0.2));
+
       // If we need to draw the arc for all 360 degrees we need to add a hack where we close the circle
       // with Z and use 359.99 degrees
-      if(endAngle - startAngle === 360) {
-        endAngle -= 0.01;
+      if(endAngle - overlappigStartAngle >= 359.99) {
+        endAngle = overlappigStartAngle + 359.99;
       }
 
-      var start = Chartist.polarToCartesian(center.x, center.y, radius, startAngle - (i === 0 || hasSingleValInSeries ? 0 : 0.2)),
-        end = Chartist.polarToCartesian(center.x, center.y, radius, endAngle),
-        arcSweep = endAngle - startAngle <= 180 ? '0' : '1',
-        d = [
-          // Start at the end point from the cartesian coordinates
-          'M', end.x, end.y,
-          // Draw arc
-          'A', radius, radius, 0, arcSweep, 0, start.x, start.y
-        ];
+      var start = Chartist.polarToCartesian(center.x, center.y, radius, overlappigStartAngle),
+        end = Chartist.polarToCartesian(center.x, center.y, radius, endAngle);
+
+      var innerStart,
+        innerEnd,
+        donutSolidRadius;
+
+      // Create a new path element for the pie chart. If this isn't a donut chart we should close the path for a correct stroke
+      var path = new Chartist.Svg.Path(!options.donut || options.donutSolid)
+        .move(end.x, end.y)
+        .arc(radius, radius, 0, endAngle - startAngle > 180, 0, start.x, start.y);
 
       // If regular pie chart (no donut) we add a line to the center of the circle for completing the pie
-      if(options.donut === false) {
-        d.push('L', center.x, center.y);
+      if(!options.donut) {
+        path.line(center.x, center.y);
+      } else if (options.donutSolid) {
+        donutSolidRadius = radius - donutWidth.value;
+        innerStart = Chartist.polarToCartesian(center.x, center.y, donutSolidRadius, startAngle - (index === 0 || hasSingleValInSeries ? 0 : 0.2));
+        innerEnd = Chartist.polarToCartesian(center.x, center.y, donutSolidRadius, endAngle);
+        path.line(innerStart.x, innerStart.y);
+        path.arc(donutSolidRadius, donutSolidRadius, 0, endAngle - startAngle  > 180, 1, innerEnd.x, innerEnd.y);
       }
 
       // Create the SVG path
       // If this is a donut chart we add the donut class, otherwise just a regular slice
-      var path = seriesGroups[i].elem('path', {
-        d: d.join(' ')
-      }, options.classNames.slice + (options.donut ? ' ' + options.classNames.donut : ''));
+      var pathClassName = options.classNames.slicePie;
+      if (options.donut) {
+        pathClassName = options.classNames.sliceDonut;
+        if (options.donutSolid) {
+          pathClassName = options.classNames.sliceDonutSolid;
+        }
+      }
+      var pathElement = seriesGroups[index].elem('path', {
+        d: path.stringify()
+      }, pathClassName);
 
       // Adding the pie series value to the path
-      path.attr({
-        'value': dataArray[i]
-      }, Chartist.xmlNs.uri);
+      pathElement.attr({
+        'ct:value': data.normalized.series[index],
+        'ct:meta': Chartist.serialize(series.meta)
+      });
 
       // If this is a donut, we add the stroke-width as style attribute
-      if(options.donut === true) {
-        path.attr({
-          'style': 'stroke-width: ' + (+options.donutWidth) + 'px'
-        });
+      if(options.donut && !options.donutSolid) {
+        pathElement._node.style.strokeWidth = donutWidth.value + 'px';
       }
 
       // Fire off draw event
       this.eventEmitter.emit('draw', {
         type: 'slice',
-        value: dataArray[i],
+        value: data.normalized.series[index],
         totalDataSum: totalDataSum,
-        index: i,
-        group: seriesGroups[i],
-        element: path,
+        index: index,
+        meta: series.meta,
+        series: series,
+        group: seriesGroups[index],
+        element: pathElement,
+        path: path.clone(),
         center: center,
         radius: radius,
         startAngle: startAngle,
@@ -191,32 +249,56 @@
 
       // If we need to show labels we need to add the label for this slice now
       if(options.showLabel) {
-        // Position at the labelRadius distance from center and between start and end angle
-        var labelPosition = Chartist.polarToCartesian(center.x, center.y, labelRadius, startAngle + (endAngle - startAngle) / 2),
-          interpolatedValue = options.labelInterpolationFnc(this.data.labels ? this.data.labels[i] : dataArray[i], i);
+        var labelPosition;
+        if(data.raw.series.length === 1) {
+          // If we have only 1 series, we can position the label in the center of the pie
+          labelPosition = {
+            x: center.x,
+            y: center.y
+          };
+        } else {
+          // Position at the labelRadius distance from center and between start and end angle
+          labelPosition = Chartist.polarToCartesian(
+            center.x,
+            center.y,
+            labelRadius,
+            startAngle + (endAngle - startAngle) / 2
+          );
+        }
 
-        var labelElement = seriesGroups[i].elem('text', {
-          dx: labelPosition.x,
-          dy: labelPosition.y,
-          'text-anchor': determineAnchorPosition(center, labelPosition, options.labelDirection)
-        }, options.classNames.label).text('' + interpolatedValue);
+        var rawValue;
+        if(data.normalized.labels && !Chartist.isFalseyButZero(data.normalized.labels[index])) {
+          rawValue = data.normalized.labels[index];
+        } else {
+          rawValue = data.normalized.series[index];
+        }
 
-        // Fire off draw event
-        this.eventEmitter.emit('draw', {
-          type: 'label',
-          index: i,
-          group: seriesGroups[i],
-          element: labelElement,
-          text: '' + interpolatedValue,
-          x: labelPosition.x,
-          y: labelPosition.y
-        });
+        var interpolatedValue = options.labelInterpolationFnc(rawValue, index);
+
+        if(interpolatedValue || interpolatedValue === 0) {
+          var labelElement = labelsGroup.elem('text', {
+            dx: labelPosition.x,
+            dy: labelPosition.y,
+            'text-anchor': determineAnchorPosition(center, labelPosition, options.labelDirection)
+          }, options.classNames.label).text('' + interpolatedValue);
+
+          // Fire off draw event
+          this.eventEmitter.emit('draw', {
+            type: 'label',
+            index: index,
+            group: labelsGroup,
+            element: labelElement,
+            text: '' + interpolatedValue,
+            x: labelPosition.x,
+            y: labelPosition.y
+          });
+        }
       }
 
-      // Set next startAngle to current endAngle. Use slight offset so there are no transparent hairline issues
+      // Set next startAngle to current endAngle.
       // (except for last slice)
       startAngle = endAngle;
-    }
+    }.bind(this));
 
     this.eventEmitter.emit('created', {
       chartRect: chartRect,
@@ -230,7 +312,7 @@
    *
    * @memberof Chartist.Pie
    * @param {String|Node} query A selector query string or directly a DOM element
-   * @param {Object} data The data object in the pie chart needs to have a series property with a one dimensional data array. The values will be normalized against each other and don't necessarily need to be in percentage. The series property can also be an array of objects that contain a data property with the value and a className property to override the CSS class name for the series group.
+   * @param {Object} data The data object in the pie chart needs to have a series property with a one dimensional data array. The values will be normalized against each other and don't necessarily need to be in percentage. The series property can also be an array of value objects that contain a value property and a className property to override the CSS class name for the series group.
    * @param {Object} [options] The options object with options that override the default options. Check the examples for a detailed list.
    * @param {Array} [responsiveOptions] Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]
    * @return {Object} An object with a version and an update method to manually redraw the chart
@@ -271,17 +353,25 @@
    * });
    *
    * @example
-   * // Overriding the class names for individual series
+   * // Overriding the class names for individual series as well as a name and meta data.
+   * // The name will be written as ct:series-name attribute and the meta data will be serialized and written
+   * // to a ct:meta attribute.
    * new Chartist.Pie('.ct-chart', {
    *   series: [{
-   *     data: 20,
-   *     className: 'my-custom-class-one'
+   *     value: 20,
+   *     name: 'Series 1',
+   *     className: 'my-custom-class-one',
+   *     meta: 'Meta One'
    *   }, {
-   *     data: 10,
-   *     className: 'my-custom-class-two'
+   *     value: 10,
+   *     name: 'Series 2',
+   *     className: 'my-custom-class-two',
+   *     meta: 'Meta Two'
    *   }, {
-   *     data: 70,
-   *     className: 'my-custom-class-three'
+   *     value: 70,
+   *     name: 'Series 3',
+   *     className: 'my-custom-class-three',
+   *     meta: 'Meta Three'
    *   }]
    * });
    */
@@ -301,4 +391,4 @@
     determineAnchorPosition: determineAnchorPosition
   });
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/class.js

@@ -4,7 +4,7 @@
  * @module Chartist.Class
  */
 /* global Chartist */
-(function(window, document, Chartist) {
+(function(globalRoot, Chartist) {
   'use strict';
 
   function listToArray(list) {
@@ -108,4 +108,4 @@
     cloneDefinitions: cloneDefinitions
   };
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/event.js

@@ -4,7 +4,7 @@
  * @module Chartist.Event
  */
 /* global Chartist */
-(function (window, document, Chartist) {
+(function (globalRoot, Chartist) {
   'use strict';
 
   Chartist.EventEmitter = function () {
@@ -75,4 +75,4 @@
     };
   };
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/interpolation.js

@@ -4,7 +4,7 @@
  * @module Chartist.Interpolation
  */
 /* global Chartist */
-(function(window, document, Chartist) {
+(function(globalRoot, Chartist) {
   'use strict';
 
   Chartist.Interpolation = {};
@@ -12,15 +12,46 @@
   /**
    * This interpolation function does not smooth the path and the result is only containing lines and no curves.
    *
+   * @example
+   * var chart = new Chartist.Line('.ct-chart', {
+   *   labels: [1, 2, 3, 4, 5],
+   *   series: [[1, 2, 8, 1, 7]]
+   * }, {
+   *   lineSmooth: Chartist.Interpolation.none({
+   *     fillHoles: false
+   *   })
+   * });
+   *
+   *
    * @memberof Chartist.Interpolation
    * @return {Function}
    */
-  Chartist.Interpolation.none = function() {
-    return function cardinal(pathCoordinates) {
-      var path = new Chartist.Svg.Path().move(pathCoordinates[0], pathCoordinates[1]);
+  Chartist.Interpolation.none = function(options) {
+    var defaultOptions = {
+      fillHoles: false
+    };
+    options = Chartist.extend({}, defaultOptions, options);
+    return function none(pathCoordinates, valueData) {
+      var path = new Chartist.Svg.Path();
+      var hole = true;
 
-      for(var i = 3; i < pathCoordinates.length; i += 2) {
-        path.line(pathCoordinates[i - 1], pathCoordinates[i]);
+      for(var i = 0; i < pathCoordinates.length; i += 2) {
+        var currX = pathCoordinates[i];
+        var currY = pathCoordinates[i + 1];
+        var currData = valueData[i / 2];
+
+        if(Chartist.getMultiValue(currData.value) !== undefined) {
+
+          if(hole) {
+            path.move(currX, currY, false, currData);
+          } else {
+            path.line(currX, currY, false, currData);
+          }
+
+          hole = false;
+        } else if(!options.fillHoles) {
+          hole = true;
+        }
       }
 
       return path;
@@ -40,7 +71,8 @@
    *   series: [[1, 2, 8, 1, 7]]
    * }, {
    *   lineSmooth: Chartist.Interpolation.simple({
-   *     divisor: 2
+   *     divisor: 2,
+   *     fillHoles: false
    *   })
    * });
    *
@@ -51,30 +83,46 @@
    */
   Chartist.Interpolation.simple = function(options) {
     var defaultOptions = {
-      divisor: 2
+      divisor: 2,
+      fillHoles: false
     };
     options = Chartist.extend({}, defaultOptions, options);
 
     var d = 1 / Math.max(1, options.divisor);
 
-    return function simple(pathCoordinates) {
-      var path = new Chartist.Svg.Path().move(pathCoordinates[0], pathCoordinates[1]);
+    return function simple(pathCoordinates, valueData) {
+      var path = new Chartist.Svg.Path();
+      var prevX, prevY, prevData;
 
-      for(var i = 2; i < pathCoordinates.length; i += 2) {
-        var prevX = pathCoordinates[i - 2],
-            prevY = pathCoordinates[i - 1],
-            currX = pathCoordinates[i],
-            currY = pathCoordinates[i + 1],
-            length = (currX - prevX) * d;
+      for(var i = 0; i < pathCoordinates.length; i += 2) {
+        var currX = pathCoordinates[i];
+        var currY = pathCoordinates[i + 1];
+        var length = (currX - prevX) * d;
+        var currData = valueData[i / 2];
 
-        path.curve(
-          prevX + length,
-          prevY,
-          currX - length,
-          currY,
-          currX,
-          currY
-        );
+        if(currData.value !== undefined) {
+
+          if(prevData === undefined) {
+            path.move(currX, currY, false, currData);
+          } else {
+            path.curve(
+              prevX + length,
+              prevY,
+              currX - length,
+              currY,
+              currX,
+              currY,
+              false,
+              currData
+            );
+          }
+
+          prevX = currX;
+          prevY = currY;
+          prevData = currData;
+        } else if(!options.fillHoles) {
+          prevX = currX = prevData = undefined;
+        }
       }
 
       return path;
@@ -94,7 +142,8 @@
    *   series: [[1, 2, 8, 1, 7]]
    * }, {
    *   lineSmooth: Chartist.Interpolation.cardinal({
-   *     tension: 1
+   *     tension: 1,
+   *     fillHoles: false
    *   })
    * });
    *
@@ -104,7 +153,8 @@
    */
   Chartist.Interpolation.cardinal = function(options) {
     var defaultOptions = {
-      tension: 1
+      tension: 1,
+      fillHoles: false
     };
 
     options = Chartist.extend({}, defaultOptions, options);
@@ -112,51 +162,276 @@
     var t = Math.min(1, Math.max(0, options.tension)),
       c = 1 - t;
 
-    return function cardinal(pathCoordinates) {
-      // If less than two points we need to fallback to no smoothing
-      if(pathCoordinates.length <= 4) {
-        return Chartist.Interpolation.none()(pathCoordinates);
-      }
+    return function cardinal(pathCoordinates, valueData) {
+      // First we try to split the coordinates into segments
+      // This is necessary to treat "holes" in line charts
+      var segments = Chartist.splitIntoSegments(pathCoordinates, valueData, {
+        fillHoles: options.fillHoles
+      });
 
-      var path = new Chartist.Svg.Path().move(pathCoordinates[0], pathCoordinates[1]),
-        z;
+      if(!segments.length) {
+        // If there were no segments return 'Chartist.Interpolation.none'
+        return Chartist.Interpolation.none()([]);
+      } else if(segments.length > 1) {
+        // If the split resulted in more that one segment we need to interpolate each segment individually and join them
+        // afterwards together into a single path.
+          var paths = [];
+        // For each segment we will recurse the cardinal function
+        segments.forEach(function(segment) {
+          paths.push(cardinal(segment.pathCoordinates, segment.valueData));
+        });
+        // Join the segment path data into a single path and return
+        return Chartist.Svg.Path.join(paths);
+      } else {
+        // If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first
+        // segment
+        pathCoordinates = segments[0].pathCoordinates;
+        valueData = segments[0].valueData;
 
-      for (var i = 0, iLen = pathCoordinates.length; iLen - 2 * !z > i; i += 2) {
-        var p = [
-          {x: +pathCoordinates[i - 2], y: +pathCoordinates[i - 1]},
-          {x: +pathCoordinates[i], y: +pathCoordinates[i + 1]},
-          {x: +pathCoordinates[i + 2], y: +pathCoordinates[i + 3]},
-          {x: +pathCoordinates[i + 4], y: +pathCoordinates[i + 5]}
-        ];
-        if (z) {
-          if (!i) {
-            p[0] = {x: +pathCoordinates[iLen - 2], y: +pathCoordinates[iLen - 1]};
-          } else if (iLen - 4 === i) {
-            p[3] = {x: +pathCoordinates[0], y: +pathCoordinates[1]};
-          } else if (iLen - 2 === i) {
-            p[2] = {x: +pathCoordinates[0], y: +pathCoordinates[1]};
-            p[3] = {x: +pathCoordinates[2], y: +pathCoordinates[3]};
+        // If less than two points we need to fallback to no smoothing
+        if(pathCoordinates.length <= 4) {
+          return Chartist.Interpolation.none()(pathCoordinates, valueData);
+        }
+
+        var path = new Chartist.Svg.Path().move(pathCoordinates[0], pathCoordinates[1], false, valueData[0]),
+          z;
+
+        for (var i = 0, iLen = pathCoordinates.length; iLen - 2 * !z > i; i += 2) {
+          var p = [
+            {x: +pathCoordinates[i - 2], y: +pathCoordinates[i - 1]},
+            {x: +pathCoordinates[i], y: +pathCoordinates[i + 1]},
+            {x: +pathCoordinates[i + 2], y: +pathCoordinates[i + 3]},
+            {x: +pathCoordinates[i + 4], y: +pathCoordinates[i + 5]}
+          ];
+          if (z) {
+            if (!i) {
+              p[0] = {x: +pathCoordinates[iLen - 2], y: +pathCoordinates[iLen - 1]};
+            } else if (iLen - 4 === i) {
+              p[3] = {x: +pathCoordinates[0], y: +pathCoordinates[1]};
+            } else if (iLen - 2 === i) {
+              p[2] = {x: +pathCoordinates[0], y: +pathCoordinates[1]};
+              p[3] = {x: +pathCoordinates[2], y: +pathCoordinates[3]};
+            }
+          } else {
+            if (iLen - 4 === i) {
+              p[3] = p[2];
+            } else if (!i) {
+              p[0] = {x: +pathCoordinates[i], y: +pathCoordinates[i + 1]};
+            }
           }
-        } else {
-          if (iLen - 4 === i) {
-            p[3] = p[2];
-          } else if (!i) {
-            p[0] = {x: +pathCoordinates[i], y: +pathCoordinates[i + 1]};
+
+          path.curve(
+            (t * (-p[0].x + 6 * p[1].x + p[2].x) / 6) + (c * p[2].x),
+            (t * (-p[0].y + 6 * p[1].y + p[2].y) / 6) + (c * p[2].y),
+            (t * (p[1].x + 6 * p[2].x - p[3].x) / 6) + (c * p[2].x),
+            (t * (p[1].y + 6 * p[2].y - p[3].y) / 6) + (c * p[2].y),
+            p[2].x,
+            p[2].y,
+            false,
+            valueData[(i + 2) / 2]
+          );
+        }
+
+        return path;
+      }
+    };
+  };
+
+  /**
+   * Monotone Cubic spline interpolation produces a smooth curve which preserves monotonicity. Unlike cardinal splines, the curve will not extend beyond the range of y-values of the original data points.
+   *
+   * Monotone Cubic splines can only be created if there are more than two data points. If this is not the case this smoothing will fallback to `Chartist.Smoothing.none`.
+   *
+   * The x-values of subsequent points must be increasing to fit a Monotone Cubic spline. If this condition is not met for a pair of adjacent points, then there will be a break in the curve between those data points.
+   *
+   * All smoothing functions within Chartist are factory functions that accept an options parameter.
+   *
+   * @example
+   * var chart = new Chartist.Line('.ct-chart', {
+   *   labels: [1, 2, 3, 4, 5],
+   *   series: [[1, 2, 8, 1, 7]]
+   * }, {
+   *   lineSmooth: Chartist.Interpolation.monotoneCubic({
+   *     fillHoles: false
+   *   })
+   * });
+   *
+   * @memberof Chartist.Interpolation
+   * @param {Object} options The options of the monotoneCubic factory function.
+   * @return {Function}
+   */
+  Chartist.Interpolation.monotoneCubic = function(options) {
+    var defaultOptions = {
+      fillHoles: false
+    };
+
+    options = Chartist.extend({}, defaultOptions, options);
+
+    return function monotoneCubic(pathCoordinates, valueData) {
+      // First we try to split the coordinates into segments
+      // This is necessary to treat "holes" in line charts
+      var segments = Chartist.splitIntoSegments(pathCoordinates, valueData, {
+        fillHoles: options.fillHoles,
+        increasingX: true
+      });
+
+      if(!segments.length) {
+        // If there were no segments return 'Chartist.Interpolation.none'
+        return Chartist.Interpolation.none()([]);
+      } else if(segments.length > 1) {
+        // If the split resulted in more that one segment we need to interpolate each segment individually and join them
+        // afterwards together into a single path.
+          var paths = [];
+        // For each segment we will recurse the monotoneCubic fn function
+        segments.forEach(function(segment) {
+          paths.push(monotoneCubic(segment.pathCoordinates, segment.valueData));
+        });
+        // Join the segment path data into a single path and return
+        return Chartist.Svg.Path.join(paths);
+      } else {
+        // If there was only one segment we can proceed regularly by using pathCoordinates and valueData from the first
+        // segment
+        pathCoordinates = segments[0].pathCoordinates;
+        valueData = segments[0].valueData;
+
+        // If less than three points we need to fallback to no smoothing
+        if(pathCoordinates.length <= 4) {
+          return Chartist.Interpolation.none()(pathCoordinates, valueData);
+        }
+
+        var xs = [],
+          ys = [],
+          i,
+          n = pathCoordinates.length / 2,
+          ms = [],
+          ds = [], dys = [], dxs = [],
+          path;
+
+        // Populate x and y coordinates into separate arrays, for readability
+
+        for(i = 0; i < n; i++) {
+          xs[i] = pathCoordinates[i * 2];
+          ys[i] = pathCoordinates[i * 2 + 1];
+        }
+
+        // Calculate deltas and derivative
+
+        for(i = 0; i < n - 1; i++) {
+          dys[i] = ys[i + 1] - ys[i];
+          dxs[i] = xs[i + 1] - xs[i];
+          ds[i] = dys[i] / dxs[i];
+        }
+
+        // Determine desired slope (m) at each point using Fritsch-Carlson method
+        // See: http://math.stackexchange.com/questions/45218/implementation-of-monotone-cubic-interpolation
+
+        ms[0] = ds[0];
+        ms[n - 1] = ds[n - 2];
+
+        for(i = 1; i < n - 1; i++) {
+          if(ds[i] === 0 || ds[i - 1] === 0 || (ds[i - 1] > 0) !== (ds[i] > 0)) {
+            ms[i] = 0;
+          } else {
+            ms[i] = 3 * (dxs[i - 1] + dxs[i]) / (
+              (2 * dxs[i] + dxs[i - 1]) / ds[i - 1] +
+              (dxs[i] + 2 * dxs[i - 1]) / ds[i]);
+
+            if(!isFinite(ms[i])) {
+              ms[i] = 0;
+            }
           }
         }
 
-        path.curve(
-          (t * (-p[0].x + 6 * p[1].x + p[2].x) / 6) + (c * p[2].x),
-          (t * (-p[0].y + 6 * p[1].y + p[2].y) / 6) + (c * p[2].y),
-          (t * (p[1].x + 6 * p[2].x - p[3].x) / 6) + (c * p[2].x),
-          (t * (p[1].y + 6 * p[2].y - p[3].y) / 6) + (c * p[2].y),
-          p[2].x,
-          p[2].y
-        );
+        // Now build a path from the slopes
+
+        path = new Chartist.Svg.Path().move(xs[0], ys[0], false, valueData[0]);
+
+        for(i = 0; i < n - 1; i++) {
+          path.curve(
+            // First control point
+            xs[i] + dxs[i] / 3,
+            ys[i] + ms[i] * dxs[i] / 3,
+            // Second control point
+            xs[i + 1] - dxs[i] / 3,
+            ys[i + 1] - ms[i + 1] * dxs[i] / 3,
+            // End point
+            xs[i + 1],
+            ys[i + 1],
+
+            false,
+            valueData[i + 1]
+          );
+        }
+
+        return path;
+      }
+    };
+  };
+
+  /**
+   * Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the `showPoint` option is enabled.
+   *
+   * All smoothing functions within Chartist are factory functions that accept an options parameter. The step interpolation function accepts one configuration parameter `postpone`, that can be `true` or `false`. The default value is `true` and will cause the step to occur where the value actually changes. If a different behaviour is needed where the step is shifted to the left and happens before the actual value, this option can be set to `false`.
+   *
+   * @example
+   * var chart = new Chartist.Line('.ct-chart', {
+   *   labels: [1, 2, 3, 4, 5],
+   *   series: [[1, 2, 8, 1, 7]]
+   * }, {
+   *   lineSmooth: Chartist.Interpolation.step({
+   *     postpone: true,
+   *     fillHoles: false
+   *   })
+   * });
+   *
+   * @memberof Chartist.Interpolation
+   * @param options
+   * @returns {Function}
+   */
+  Chartist.Interpolation.step = function(options) {
+    var defaultOptions = {
+      postpone: true,
+      fillHoles: false
+    };
+
+    options = Chartist.extend({}, defaultOptions, options);
+
+    return function step(pathCoordinates, valueData) {
+      var path = new Chartist.Svg.Path();
+
+      var prevX, prevY, prevData;
+
+      for (var i = 0; i < pathCoordinates.length; i += 2) {
+        var currX = pathCoordinates[i];
+        var currY = pathCoordinates[i + 1];
+        var currData = valueData[i / 2];
+
+        // If the current point is also not a hole we can draw the step lines
+        if(currData.value !== undefined) {
+          if(prevData === undefined) {
+            path.move(currX, currY, false, currData);
+          } else {
+            if(options.postpone) {
+              // If postponed we should draw the step line with the value of the previous value
+              path.line(currX, prevY, false, prevData);
+            } else {
+              // If not postponed we should draw the step line with the value of the current value
+              path.line(prevX, currY, false, currData);
+            }
+            // Line to the actual point (this should only be a Y-Axis movement
+            path.line(currX, currY, false, currData);
+          }
+
+          prevX = currX;
+          prevY = currY;
+          prevData = currData;
+        } else if(!options.fillHoles) {
+          prevX = prevY = prevData = undefined;
+        }
       }
 
       return path;
     };
   };
 
-}(window, document, Chartist));
+}(this || global, Chartist));

src/scripts/svg-path.js

@@ -4,7 +4,7 @@
  * @module Chartist.Svg.Path
  */
 /* global Chartist */
-(function(window, document, Chartist) {
+(function(globalRoot, Chartist) {
   'use strict';
 
   /**
@@ -16,7 +16,8 @@
   var elementDescriptions = {
     m: ['x', 'y'],
     l: ['x', 'y'],
-    c: ['x1', 'y1', 'x2', 'y2', 'x', 'y']
+    c: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
+    a: ['rx', 'ry', 'xAr', 'lAf', 'sf', 'x', 'y']
   };
 
   /**
@@ -30,10 +31,12 @@
     accuracy: 3
   };
 
-  function element(command, params, pathElements, pos, relative) {
-    pathElements.splice(pos, 0, Chartist.extend({
+  function element(command, params, pathElements, pos, relative, data) {
+    var pathElement = Chartist.extend({
       command: relative ? command.toLowerCase() : command.toUpperCase()
-    }, params));
+    }, params, data ? { data: data } : {} );
+
+    pathElements.splice(pos, 0, pathElement);
   }
 
   function forEachParam(pathElements, cb) {
@@ -63,7 +66,7 @@
    * Gets or sets the current position (cursor) inside of the path. You can move around the cursor freely but limited to 0 or the count of existing elements. All modifications with element functions will insert new elements at the position of this cursor.
    *
    * @memberof Chartist.Svg.Path
-   * @param {Number} [position] If a number is passed then the cursor is set to this position in the path element array.
+   * @param {Number} [pos] If a number is passed then the cursor is set to this position in the path element array.
    * @return {Chartist.Svg.Path|Number} If the position parameter was passed then the return value will be the path object for easy call chaining. If no position parameter was passed then the current position is returned.
    */
   function position(pos) {
@@ -93,14 +96,15 @@
    * @memberof Chartist.Svg.Path
    * @param {Number} x The x coordinate for the move element.
    * @param {Number} y The y coordinate for the move element.
-   * @param {Boolean} relative If set to true the move element will be created with relative coordinates (lowercase letter)
+   * @param {Boolean} [relative] If set to true the move element will be created with relative coordinates (lowercase letter)
+   * @param {*} [data] Any data that should be stored with the element object that will be accessible in pathElement
    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
    */
-  function move(x, y, relative) {
+  function move(x, y, relative, data) {
     element('M', {
       x: +x,
       y: +y
-    }, this.pathElements, this.pos++, relative);
+    }, this.pathElements, this.pos++, relative, data);
     return this;
   }
 
@@ -110,14 +114,15 @@
    * @memberof Chartist.Svg.Path
    * @param {Number} x The x coordinate for the line element.
    * @param {Number} y The y coordinate for the line element.
-   * @param {Boolean} relative If set to true the line element will be created with relative coordinates (lowercase letter)
+   * @param {Boolean} [relative] If set to true the line element will be created with relative coordinates (lowercase letter)
+   * @param {*} [data] Any data that should be stored with the element object that will be accessible in pathElement
    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
    */
-  function line(x, y, relative) {
+  function line(x, y, relative, data) {
     element('L', {
       x: +x,
       y: +y
-    }, this.pathElements, this.pos++, relative);
+    }, this.pathElements, this.pos++, relative, data);
     return this;
   }
 
@@ -131,10 +136,11 @@
    * @param {Number} y2 The y coordinate for the second control point of the bezier curve.
    * @param {Number} x The x coordinate for the target point of the curve element.
    * @param {Number} y The y coordinate for the target point of the curve element.
-   * @param {Boolean} relative If set to true the curve element will be created with relative coordinates (lowercase letter)
+   * @param {Boolean} [relative] If set to true the curve element will be created with relative coordinates (lowercase letter)
+   * @param {*} [data] Any data that should be stored with the element object that will be accessible in pathElement
    * @return {Chartist.Svg.Path} The current path object for easy call chaining.
    */
-  function curve(x1, y1, x2, y2, x, y, relative) {
+  function curve(x1, y1, x2, y2, x, y, relative, data) {
     element('C', {
       x1: +x1,
       y1: +y1,
@@ -142,7 +148,35 @@
       y2: +y2,
       x: +x,
       y: +y
-    }, this.pathElements, this.pos++, relative);
+    }, this.pathElements, this.pos++, relative, data);
+    return this;
+  }
+
+  /**
+   * Use this function to add a new non-bezier curve SVG path element.
+   *
+   * @memberof Chartist.Svg.Path
+   * @param {Number} rx The radius to be used for the x-axis of the arc.
+   * @param {Number} ry The radius to be used for the y-axis of the arc.
+   * @param {Number} xAr Defines the orientation of the arc
+   * @param {Number} lAf Large arc flag
+   * @param {Number} sf Sweep flag
+   * @param {Number} x The x coordinate for the target point of the curve element.
+   * @param {Number} y The y coordinate for the target point of the curve element.
+   * @param {Boolean} [relative] If set to true the curve element will be created with relative coordinates (lowercase letter)
+   * @param {*} [data] Any data that should be stored with the element object that will be accessible in pathElement
+   * @return {Chartist.Svg.Path} The current path object for easy call chaining.
+   */
+  function arc(rx, ry, xAr, lAf, sf, x, y, relative, data) {
+    element('A', {
+      rx: +rx,
+      ry: +ry,
+      xAr: +xAr,
+      lAf: +lAf,
+      sf: +sf,
+      x: +x,
+      y: +y
+    }, this.pathElements, this.pos++, relative, data);
     return this;
   }
 
@@ -272,10 +306,11 @@
    * This function clones a whole path object with all its properties. This is a deep clone and path element objects will also be cloned.
    *
    * @memberof Chartist.Svg.Path
+   * @param {Boolean} [close] Optional option to set the new cloned path to closed. If not specified or false, the original path close option will be used.
    * @return {Chartist.Svg.Path}
    */
-  function clone() {
-    var c = new Chartist.Svg.Path(this.close);
+  function clone(close) {
+    var c = new Chartist.Svg.Path(close || this.close);
     c.pos = this.pos;
     c.pathElements = this.pathElements.slice().map(function cloneElements(pathElement) {
       return Chartist.extend({}, pathElement);
@@ -284,6 +319,50 @@
     return c;
   }
 
+  /**
+   * Split a Svg.Path object by a specific command in the path chain. The path chain will be split and an array of newly created paths objects will be returned. This is useful if you'd like to split an SVG path by it's move commands, for example, in order to isolate chunks of drawings.
+   *
+   * @memberof Chartist.Svg.Path
+   * @param {String} command The command you'd like to use to split the path
+   * @return {Array<Chartist.Svg.Path>}
+   */
+  function splitByCommand(command) {
+    var split = [
+      new Chartist.Svg.Path()
+    ];
+
+    this.pathElements.forEach(function(pathElement) {
+      if(pathElement.command === command.toUpperCase() && split[split.length - 1].pathElements.length !== 0) {
+        split.push(new Chartist.Svg.Path());
+      }
+
+      split[split.length - 1].pathElements.push(pathElement);
+    });
+
+    return split;
+  }
+
+  /**
+   * This static function on `Chartist.Svg.Path` is joining multiple paths together into one paths.
+   *
+   * @memberof Chartist.Svg.Path
+   * @param {Array<Chartist.Svg.Path>} paths A list of paths to be joined together. The order is important.
+   * @param {boolean} close If the newly created path should be a closed path
+   * @param {Object} options Path options for the newly created path.
+   * @return {Chartist.Svg.Path}
+   */
+
+  function join(paths, close, options) {
+    var joinedPath = new Chartist.Svg.Path(close, options);
+    for(var i = 0; i < paths.length; i++) {
+      var path = paths[i];
+      for(var j = 0; j < path.pathElements.length; j++) {
+        joinedPath.pathElements.push(path.pathElements[j]);
+      }
+    }
+    return joinedPath;
+  }
+
   Chartist.Svg.Path = Chartist.Class.extend({
     constructor: SvgPath,
     position: position,
@@ -291,13 +370,16 @@
     move: move,
     line: line,
     curve: curve,
+    arc: arc,
     scale: scale,
     translate: translate,
     transform: transform,
     parse: parse,
     stringify: stringify,
-    clone: clone
+    clone: clone,
+    splitByCommand: splitByCommand
   });
 
   Chartist.Svg.Path.elementDescriptions = elementDescriptions;
-}(window, document, Chartist));
+  Chartist.Svg.Path.join = join;
+}(this || global, Chartist));

src/scripts/svg.js

@@ -4,25 +4,17 @@
  * @module Chartist.Svg
  */
 /* global Chartist */
-(function(window, document, Chartist) {
+(function(globalRoot, Chartist) {
   'use strict';
 
-  var svgNs = 'http://www.w3.org/2000/svg',
-    xmlNs = 'http://www.w3.org/2000/xmlns/',
-    xhtmlNs = 'http://www.w3.org/1999/xhtml';
-
-  Chartist.xmlNs = {
-    qualifiedName: 'xmlns:ct',
-    prefix: 'ct',
-    uri: 'http://gionkunz.github.com/chartist-js/ct'
-  };
+  var document = globalRoot.document;
 
   /**
    * Chartist.Svg creates a new SVG object wrapper with a starting element. You can use the wrapper to fluently create sub-elements and modify them.
    *
    * @memberof Chartist.Svg
    * @constructor
-   * @param {String|SVGElement} name The name of the SVG element to create or an SVG dom element which should be wrapped into Chartist.Svg
+   * @param {String|Element} name The name of the SVG element to create or an SVG dom element which should be wrapped into Chartist.Svg
    * @param {Object} attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added.
    * @param {String} className This class or class list will be added to the SVG element
    * @param {Object} parent The parent SVG wrapper object where this newly created wrapper and it's element will be attached to as child
@@ -30,30 +22,32 @@
    */
   function Svg(name, attributes, className, parent, insertFirst) {
     // If Svg is getting called with an SVG element we just return the wrapper
-    if(name instanceof SVGElement) {
+    if(name instanceof Element) {
       this._node = name;
     } else {
-      this._node = document.createElementNS(svgNs, name);
+      this._node = document.createElementNS(Chartist.namespaces.svg, name);
 
       // If this is an SVG element created then custom namespace
       if(name === 'svg') {
-        this._node.setAttributeNS(xmlNs, Chartist.xmlNs.qualifiedName, Chartist.xmlNs.uri);
+        this.attr({
+          'xmlns:ct': Chartist.namespaces.ct
+        });
       }
+    }
 
-      if(attributes) {
-        this.attr(attributes);
-      }
+    if(attributes) {
+      this.attr(attributes);
+    }
 
-      if(className) {
-        this.addClass(className);
-      }
+    if(className) {
+      this.addClass(className);
+    }
 
-      if(parent) {
-        if (insertFirst && parent._node.firstChild) {
-          parent._node.insertBefore(this._node, parent._node.firstChild);
-        } else {
-          parent._node.appendChild(this._node);
-        }
+    if(parent) {
+      if (insertFirst && parent._node.firstChild) {
+        parent._node.insertBefore(this._node, parent._node.firstChild);
+      } else {
+        parent._node.appendChild(this._node);
       }
     }
   }
@@ -63,7 +57,7 @@
    *
    * @memberof Chartist.Svg
    * @param {Object|String} attributes An object with properties that will be added as attributes to the SVG element that is created. Attributes with undefined values will not be added. If this parameter is a String then the function is used as a getter and will return the attribute value.
-   * @param {String} ns If specified, the attributes will be set as namespace attributes with ns as prefix.
+   * @param {String} [ns] If specified, the attribute will be obtained using getAttributeNs. In order to write namepsaced attributes you can use the namespace:attribute notation within the attributes object.
    * @return {Object|String} The current wrapper object will be returned so it can be used for chaining or the attribute value if used as getter function.
    */
   function attr(attributes, ns) {
@@ -81,8 +75,9 @@
         return;
       }
 
-      if(ns) {
-        this._node.setAttributeNS(ns, [Chartist.xmlNs.prefix, ':', key].join(''), attributes[key]);
+      if (key.indexOf(':') !== -1) {
+        var namespacedAttribute = key.split(':');
+        this._node.setAttributeNS(Chartist.namespaces[namespacedAttribute[0]], key, attributes[key]);
       } else {
         this._node.setAttribute(key, attributes[key]);
       }
@@ -108,6 +103,7 @@
   /**
    * Returns the parent Chartist.SVG wrapper object
    *
+   * @memberof Chartist.Svg
    * @return {Chartist.Svg} Returns a Chartist.Svg wrapper around the parent node of the current node. If the parent node is not existing or it's not an SVG node then this function will return null.
    */
   function parent() {
@@ -117,6 +113,7 @@
   /**
    * This method returns a Chartist.Svg wrapper around the root SVG element of the current tree.
    *
+   * @memberof Chartist.Svg
    * @return {Chartist.Svg} The root SVG element wrapped in a Chartist.Svg element
    */
   function root() {
@@ -130,6 +127,7 @@
   /**
    * Find the first child SVG element of the current element that matches a CSS selector. The returned object is a Chartist.Svg wrapper.
    *
+   * @memberof Chartist.Svg
    * @param {String} selector A CSS selector that is used to query for child SVG elements
    * @return {Chartist.Svg} The SVG wrapper for the element found or null if no element was found
    */
@@ -141,6 +139,7 @@
   /**
    * Find the all child SVG elements of the current element that match a CSS selector. The returned object is a Chartist.Svg.List wrapper.
    *
+   * @memberof Chartist.Svg
    * @param {String} selector A CSS selector that is used to query for child SVG elements
    * @return {Chartist.Svg.List} The SVG wrapper list for the element found or null if no element was found
    */
@@ -149,6 +148,16 @@
     return foundNodes.length ? new Chartist.Svg.List(foundNodes) : null;
   }
 
+  /**
+   * Returns the underlying SVG node for the current element.
+   *
+   * @memberof Chartist.Svg
+   * @returns {Node}
+   */
+  function getNode() {
+    return this._node;
+  }
+
   /**
    * This method creates a foreignObject (see https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) that allows to embed HTML content into a SVG graphic. With the help of foreignObjects you can enable the usage of regular HTML elements inside of SVG where they are subject for SVG positioning and transformation but the Browser will use the HTML rendering capabilities for the containing DOM.
    *
@@ -169,7 +178,7 @@
     }
 
     // Adding namespace to content element
-    content.setAttribute('xmlns', xhtmlNs);
+    content.setAttribute('xmlns', Chartist.namespaces.xmlns);
 
     // Creating the foreignObject without required extension attribute (as described here
     // http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement)
@@ -307,25 +316,23 @@
   }
 
   /**
-   * Get element height with fallback to svg BoundingBox or parent container dimensions:
-   * See [bugzilla.mozilla.org](https://bugzilla.mozilla.org/show_bug.cgi?id=530985)
+   * Get element height using `getBoundingClientRect`
    *
    * @memberof Chartist.Svg
    * @return {Number} The elements height in pixels
    */
   function height() {
-    return this._node.clientHeight || Math.round(this._node.getBBox().height) || this._node.parentNode.clientHeight;
+    return this._node.getBoundingClientRect().height;
   }
 
   /**
-   * Get element width with fallback to svg BoundingBox or parent container dimensions:
-   * See [bugzilla.mozilla.org](https://bugzilla.mozilla.org/show_bug.cgi?id=530985)
+   * Get element width using `getBoundingClientRect`
    *
    * @memberof Chartist.Core
    * @return {Number} The elements width in pixels
    */
   function width() {
-    return this._node.clientWidth || Math.round(this._node.getBBox().width) || this._node.parentNode.clientWidth;
+    return this._node.getBoundingClientRect().width;
   }
 
   /**
@@ -411,7 +418,7 @@
 
           // In guided mode we also set begin to indefinite so we can trigger the start manually and put the begin
           // which needs to be in ms aside
-          timeout = Chartist.stripUnit(animationDefinition.begin || 0);
+          timeout = Chartist.quantity(animationDefinition.begin || 0).value;
           animationDefinition.begin = 'indefinite';
         }
 
@@ -488,6 +495,7 @@
     root: root,
     querySelector: querySelector,
     querySelectorAll: querySelectorAll,
+    getNode: getNode,
     foreignObject: foreignObject,
     text: text,
     empty: empty,
@@ -511,7 +519,7 @@
    * @return {Boolean} True of false if the feature is supported or not
    */
   Chartist.Svg.isSupported = function(feature) {
-    return document.implementation.hasFeature('www.http://w3.org/TR/SVG11/feature#' + feature, '1.1');
+    return document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#' + feature, '1.1');
   };
 
   /**
@@ -589,4 +597,4 @@
   Chartist.Svg.List = Chartist.Class.extend({
     constructor: SvgList
   });
-}(window, document, Chartist));
+}(this || global, Chartist));

src/styles/chartist.scss

@@ -28,14 +28,40 @@
   }
 }
 
-@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-align: $ct-text-align) {
+@mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) {
+  -webkit-box-align: $ct-text-align;
+  -webkit-align-items: $ct-text-align;
+  -ms-flex-align: $ct-text-align;
+  align-items: $ct-text-align;
+  -webkit-box-pack: $ct-text-justify;
+  -webkit-justify-content: $ct-text-justify;
+  -ms-flex-pack: $ct-text-justify;
+  justify-content: $ct-text-justify;
+  // Fallback to text-align for non-flex browsers
+  @if($ct-text-justify == 'flex-start') {
+    text-align: left;
+  } @else if ($ct-text-justify == 'flex-end') {
+    text-align: right;
+  } @else {
+    text-align: center;
+  }
+}
+
+@mixin ct-flex() {
+  // Fallback to block
   display: block;
-  width: 100%;
-  height: 100%;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) {
   fill: $ct-text-color;
   color: $ct-text-color;
   font-size: $ct-text-size;
-  text-align: $ct-text-align;
+  line-height: $ct-text-line-height;
 }
 
 @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) {
@@ -77,32 +103,100 @@
 }
 
 @mixin ct-chart-series-color($color) {
-  .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice}.#{$ct-class-donut} {
+  .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} {
     stroke: $color;
   }
 
-  .#{$ct-class-slice}:not(.#{$ct-class-donut}), .#{$ct-class-area} {
+  .#{$ct-class-slice-pie}, .#{$ct-class-slice-donut-solid}, .#{$ct-class-area} {
     fill: $color;
   }
 }
 
-@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-horizontal-text-align: $ct-horizontal-text-align, $ct-vertical-text-align: $ct-vertical-text-align, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
+@mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) {
+
   .#{$ct-class-label} {
     @include ct-chart-label($ct-text-color, $ct-text-size);
   }
 
-  .#{$ct-class-label}.#{$ct-class-horizontal} {
-    @include ct-chart-label($ct-text-color, $ct-text-size, $ct-horizontal-text-align);
+  .#{$ct-class-chart-line} .#{$ct-class-label},
+  .#{$ct-class-chart-bar} .#{$ct-class-label} {
+    @include ct-flex();
   }
 
-  .#{$ct-class-label}.#{$ct-class-vertical} {
-    @include ct-chart-label($ct-text-color, $ct-text-size, $ct-vertical-text-align);
+  .#{$ct-class-chart-pie} .#{$ct-class-label},
+  .#{$ct-class-chart-donut} .#{$ct-class-label} {
+    dominant-baseline: central;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-end);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, center);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, center);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} {
+    @include ct-align-justify(flex-end, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} {
+    @include ct-align-justify(flex-start, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: start;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} {
+    //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify);
+    @include ct-align-justify(center, flex-end);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
+  }
+
+  .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} {
+    @include ct-align-justify(center, flex-start);
+    // Fallback for browsers that don't support foreignObjects
+    text-anchor: end;
   }
 
   .#{$ct-class-grid} {
     @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray);
   }
 
+  .#{$ct-class-grid-background} {
+    fill: $ct-grid-background-fill;
+  }
+
   .#{$ct-class-point} {
     @include ct-chart-point($ct-point-size, $ct-point-shape);
   }
@@ -119,32 +213,28 @@
     @include ct-chart-bar($ct-bar-width);
   }
 
-  .#{$ct-class-slice}.#{$ct-class-donut} {
+  .#{$ct-class-slice-donut} {
     @include ct-chart-donut($ct-donut-width);
   }
 
   @if $ct-include-colored-series {
-    .#{$ct-class-series} {
-      @for $i from 0 to length($ct-series-names) {
-        &.#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
-          $color: nth($ct-series-colors, $i + 1);
+    @for $i from 0 to length($ct-series-names) {
+      .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} {
+        $color: nth($ct-series-colors, $i + 1);
 
-          @include ct-chart-series-color($color);
-        }
+        @include ct-chart-series-color($color);
       }
     }
   }
 }
 
 @if $ct-include-classes {
-  .#{$ct-class-chart} {
-    @include ct-chart();
+  @include ct-chart();
 
-    @if $ct-include-alternative-responsive-containers {
-      @for $i from 0 to length($ct-scales-names) {
-        &.#{nth($ct-scales-names, $i + 1)} {
-          @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
-        }
+  @if $ct-include-alternative-responsive-containers {
+    @for $i from 0 to length($ct-scales-names) {
+      .#{nth($ct-scales-names, $i + 1)} {
+        @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1));
       }
     }
   }

src/styles/settings/_chartist-settings.scss

@@ -6,18 +6,24 @@ $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third,
 $ct-class-chart: ct-chart !default;
 $ct-class-chart-line: ct-chart-line !default;
 $ct-class-chart-bar: ct-chart-bar !default;
+$ct-class-horizontal-bars: ct-horizontal-bars !default;
 $ct-class-chart-pie: ct-chart-pie !default;
+$ct-class-chart-donut: ct-chart-donut !default;
 $ct-class-label: ct-label !default;
 $ct-class-series: ct-series !default;
 $ct-class-line: ct-line !default;
 $ct-class-point: ct-point !default;
 $ct-class-area: ct-area !default;
 $ct-class-bar: ct-bar !default;
-$ct-class-slice: ct-slice !default;
-$ct-class-donut: ct-donut !default;
+$ct-class-slice-pie: ct-slice-pie !default;
+$ct-class-slice-donut: ct-slice-donut !default;
+$ct-class-slice-donut-solid: ct-slice-donut-solid !default;
 $ct-class-grid: ct-grid !default;
+$ct-class-grid-background: ct-grid-background !default;
 $ct-class-vertical: ct-vertical !default;
 $ct-class-horizontal: ct-horizontal !default;
+$ct-class-start: ct-start !default;
+$ct-class-end: ct-end !default;
 
 // Container ratio
 $ct-container-ratio: (1/1.618) !default;
@@ -25,14 +31,15 @@ $ct-container-ratio: (1/1.618) !default;
 // Text styles for labels
 $ct-text-color: rgba(0, 0, 0, 0.4) !default;
 $ct-text-size: 0.75rem !default;
-$ct-text-align: left !default;
-$ct-horizontal-text-align: left !default;
-$ct-vertical-text-align: right !default;
+$ct-text-align: flex-start !default;
+$ct-text-justify: flex-start !default;
+$ct-text-line-height: 1;
 
 // Grid styles
 $ct-grid-color: rgba(0, 0, 0, 0.2) !default;
 $ct-grid-dasharray: 2px !default;
 $ct-grid-width: 1px !default;
+$ct-grid-background-fill: none !default;
 
 // Line chart properties
 $ct-line-width: 4px !default;