├── .nvmrc
├── .gitattributes
├── site
├── .buildignore
├── partials
│ ├── text.hbs
│ ├── sub-section.hbs
│ ├── hint.hbs
│ ├── heading.hbs
│ ├── code.hbs
│ ├── affiliate-project.hbs
│ ├── dox
│ │ ├── dox-section.hbs
│ │ ├── dox-module.hbs
│ │ └── dox-member.hbs
│ ├── example-chart.hbs
│ ├── code-snippet.hbs
│ ├── api-side-navigation.hbs
│ ├── section.hbs
│ ├── table.hbs
│ ├── browser-support-table.hbs
│ ├── side-navigation.hbs
│ ├── live-example.hbs
│ └── navigation.hbs
├── robots.txt
├── code-snippets
│ ├── plugin-signature.js
│ ├── aspect-ratio-container.html
│ ├── 1-dimension-values.js
│ ├── custom-include.scss
│ ├── 2-dimensions-values.js
│ ├── colour-override-line-chart.css
│ ├── simple-start-cdn.html
│ ├── plugin-include.js
│ ├── simple-start.html
│ ├── custom-style-pie-chart.css
│ ├── custom-style-bar-chart.css
│ ├── simple-start-aspect-ratio-chart.js
│ ├── two-charts.html
│ ├── custom-style-donut-chart.css
│ ├── custom-style-line-chart.css
│ ├── plugin-example.js
│ └── simple-start-fixed-chart.js
├── favicon.ico
├── images
│ ├── chartist-guy.gif
│ └── chartist-icon.svg
├── styles
│ ├── _modules.scss
│ ├── settings
│ │ └── _chartist-docs.scss
│ ├── modules
│ │ ├── _common.scss
│ │ ├── _animation.scss
│ │ ├── _font.scss
│ │ ├── _icon.scss
│ │ └── _scale.scss
│ ├── _affiliate-project.scss
│ ├── _live-example.scss
│ ├── _api-doc.scss
│ ├── _code-mirror-theme.scss
│ ├── _highlight.scss
│ ├── _example-charts.scss
│ ├── _landing.scss
│ ├── _base.scss
│ └── main.scss
├── examples
│ ├── example-line-area.js
│ ├── simple-gauge-chart.js
│ ├── example-bar-distributed-series.js
│ ├── example-donut-solid-chart.js
│ ├── example-gauge-donut-solid-chart.js
│ ├── example-plugin-targetline.js
│ ├── example-plugin-pointlabel.js
│ ├── simple-pie-chart.js
│ ├── example-axis-auto.js
│ ├── simple-line-chart.js
│ ├── example-gallery-two.js
│ ├── example-gallery-one.js
│ ├── example-bar-horizontal.js
│ ├── example-plugin-threshold.js
│ ├── bi-polar-bar-interpolated.js
│ ├── example-bar-label-position.js
│ ├── example-bipolar-line-area.js
│ ├── example-axis-fixed-and-auto.js
│ ├── example-line-only-integer.js
│ ├── example-line-simple-smoothing.js
│ ├── stacked-bar.js
│ ├── example-multiline-bar.js
│ ├── example-plugin-tooltip.js
│ ├── example-line-data-holes.js
│ ├── overlapping-bars.js
│ ├── pie-with-custom-labels.js
│ ├── example-gallery-four.js
│ ├── example-line-data-fill-holes.js
│ ├── example-line-path-animation.js
│ ├── example-simple-bar.js
│ ├── example-plugin-axistitle.js
│ ├── example-line-months-interpolation.js
│ ├── example-gallery-three.js
│ ├── line-scatter-random.js
│ ├── example-plugin-zoom.js
│ ├── example-line-modify-drawing.js
│ ├── example-bar-with-circle-modify-drawing.js
│ ├── example-timeseries-moment.js
│ ├── example-bar-extreme-responsive.js
│ ├── simple-configuration-chart.js
│ ├── example-line-simple-responsive.js
│ ├── example-line-series-override.js
│ ├── example-plugin-accessibility.js
│ ├── example-dynamic-colours.js
│ ├── example-simple-svg-animation.js
│ ├── example-plugin-fill-donut.js
│ ├── example-donut-animation.js
│ └── example-line-svg-animation.js
├── templates
│ ├── getting-started.hbs
│ ├── plugins.hbs
│ ├── examples.hbs
│ ├── api-documentation.hbs
│ └── index.hbs
├── layouts
│ ├── content.hbs
│ ├── landing.hbs
│ └── default.hbs
├── helpers
│ ├── chartist-helpers.js
│ ├── dox-helpers.js
│ ├── common-helpers.js
│ └── lorem-helper.js
├── scripts
│ ├── chartist-guy.js
│ └── main.js
└── 404.html
├── .doclets.yml
├── .bowerrc
├── .travis.yml
├── .gitignore
├── README.md
├── tasks
├── concurrent.js
├── cssmin.js
├── umd.js
├── uglify.js
├── useminPrepare.js
├── imagemin.js
├── template.js
├── critical.js
├── clean.js
├── htmlmin.js
├── jshint.js
├── svgmin.js
├── usemin.js
├── assemble.js
├── aliases.yml
├── connect.js
├── concat.js
├── sass.js
├── watch.js
├── jasmine.js
└── copy.js
├── .editorconfig
├── LICENSE-WTFPL
├── .jshintrc
├── Gruntfile.js
├── test
├── .jshintrc
├── runner.html
└── spec
│ └── spec-axes.js
├── bower.json
├── LICENSE-MIT
├── src
├── scripts
│ ├── axes
│ │ ├── step-axis.js
│ │ ├── fixed-scale-axis.js
│ │ ├── auto-scale-axis.js
│ │ └── axis.js
│ ├── event.js
│ └── class.js
└── styles
│ ├── settings
│ └── _chartist-settings.scss
│ └── chartist.scss
├── package.json
├── CONTRIBUTING.md
└── dist
└── scss
├── settings
└── _chartist-settings.scss
└── chartist.scss
/.nvmrc:
--------------------------------------------------------------------------------
1 | v6.9.0
2 |
3 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
--------------------------------------------------------------------------------
/site/.buildignore:
--------------------------------------------------------------------------------
1 | *.coffee
--------------------------------------------------------------------------------
/.doclets.yml:
--------------------------------------------------------------------------------
1 | dir: src/scripts
2 |
--------------------------------------------------------------------------------
/site/partials/text.hbs:
--------------------------------------------------------------------------------
1 | {{{text}}}
--------------------------------------------------------------------------------
/site/robots.txt:
--------------------------------------------------------------------------------
1 | # robotstxt.org
2 |
3 | User-agent: *
4 |
--------------------------------------------------------------------------------
/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 | "directory": "site/bower_components"
3 | }
4 |
--------------------------------------------------------------------------------
/site/code-snippets/plugin-signature.js:
--------------------------------------------------------------------------------
1 | function myChartistPlugin(chart) {
2 |
3 | }
4 |
--------------------------------------------------------------------------------
/site/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gionkunz/chartist-js/HEAD/site/favicon.ico
--------------------------------------------------------------------------------
/site/code-snippets/aspect-ratio-container.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/site/images/chartist-guy.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gionkunz/chartist-js/HEAD/site/images/chartist-guy.gif
--------------------------------------------------------------------------------
/site/code-snippets/1-dimension-values.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['A', 'B', 'C'],
3 | series: [[10, 8, 14]]
4 | };
5 |
--------------------------------------------------------------------------------
/site/code-snippets/custom-include.scss:
--------------------------------------------------------------------------------
1 | @import "_my-chartist-settings.scss";
2 | @import "chartist/dist/scss/chartist.scss";
3 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - '5.5.0'
4 | before_script:
5 | - 'npm install -g bower grunt-cli'
6 | - 'bower install'
7 |
--------------------------------------------------------------------------------
/site/partials/sub-section.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{>heading}}
3 | {{#each items}}
4 | {{partial type data}}
5 | {{/each}}
6 |
--------------------------------------------------------------------------------
/site/partials/hint.hbs:
--------------------------------------------------------------------------------
1 |
2 |
{{title}}
3 |
{{{text}}}
4 |
{{code}}
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # modules
2 | node_modules/
3 | site/bower_components/
4 |
5 | # build
6 | .tmp/
7 | .public/
8 | # dist/
9 |
10 | # generated
11 | .sass-cache
12 |
13 | # debug
14 | npm-debug.log
15 |
--------------------------------------------------------------------------------
/site/code-snippets/2-dimensions-values.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['A', 'B', 'C'],
3 | series: [[
4 | {x: undefined, y: 10},
5 | {x: undefined, y: 8},
6 | {x: undefined, y: 14}
7 | ]]
8 | };
9 |
--------------------------------------------------------------------------------
/site/examples/example-line-area.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | labels: [1, 2, 3, 4, 5, 6, 7, 8],
3 | series: [
4 | [5, 9, 7, 8, 5, 3, 5, 4]
5 | ]
6 | }, {
7 | low: 0,
8 | showArea: true
9 | });
--------------------------------------------------------------------------------
/site/examples/simple-gauge-chart.js:
--------------------------------------------------------------------------------
1 | new Chartist.Pie('.ct-chart', {
2 | series: [20, 10, 30, 40]
3 | }, {
4 | donut: true,
5 | donutWidth: 60,
6 | startAngle: 270,
7 | total: 200,
8 | showLabel: false
9 | });
--------------------------------------------------------------------------------
/site/code-snippets/colour-override-line-chart.css:
--------------------------------------------------------------------------------
1 | .ct-series-a .ct-line,
2 | .ct-series-a .ct-point {
3 | stroke: blue;
4 | }
5 |
6 | .ct-series-b .ct-line,
7 | .ct-series-b .ct-point {
8 | stroke: green;
9 | }
10 |
--------------------------------------------------------------------------------
/site/examples/example-bar-distributed-series.js:
--------------------------------------------------------------------------------
1 | new Chartist.Bar('.ct-chart', {
2 | labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
3 | series: [20, 60, 120, 200, 180, 20, 10]
4 | }, {
5 | distributeSeries: true
6 | });
7 |
--------------------------------------------------------------------------------
/site/examples/example-donut-solid-chart.js:
--------------------------------------------------------------------------------
1 | new Chartist.Pie('.ct-chart', {
2 | series: [20, 10, 30, 40]
3 | }, {
4 | donut: true,
5 | donutWidth: 60,
6 | donutSolid: true,
7 | startAngle: 270,
8 | showLabel: true
9 | });
10 |
--------------------------------------------------------------------------------
/site/examples/example-gauge-donut-solid-chart.js:
--------------------------------------------------------------------------------
1 | new Chartist.Pie('.ct-chart', {
2 | series: [20, 10, 30, 40]
3 | }, {
4 | donut: true,
5 | donutWidth: 60,
6 | donutSolid: true,
7 | startAngle: 270,
8 | total: 200,
9 | showLabel: true
10 | });
11 |
--------------------------------------------------------------------------------
/site/templates/getting-started.hbs:
--------------------------------------------------------------------------------
1 | ---
2 | layout: content
3 | page-class: getting-started
4 | title: Chartist - Getting started
5 | description: Learn how to use Chartist.js
6 | preventIndent: true
7 | ---
8 | {{#each page.sections}}
9 | {{>section}}
10 | {{/each}}
11 |
--------------------------------------------------------------------------------
/site/code-snippets/simple-start-cdn.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/site/templates/plugins.hbs:
--------------------------------------------------------------------------------
1 | ---
2 | layout: content
3 | page-class: plugins
4 | title: Chartist - Plugins
5 | description: Use plugins to extend the functionality of your charts
6 | preventIndent: true
7 | ---
8 | {{#each page.sections}}
9 | {{>section}}
10 | {{/each}}
11 |
--------------------------------------------------------------------------------
/site/styles/settings/_chartist-docs.scss:
--------------------------------------------------------------------------------
1 | $color-white: #EADBC4;
2 | $color-grapefruit: #F05B4F;
3 | $color-red: #D70206;
4 | $color-green: #67bf26;
5 | $color-yellow: #F4C63D;
6 | $color-gray: #453D3F;
7 | $color-black: $color-gray;
8 |
9 | $font-body: "Oxygen", Helvetica, Arial, sans-serif;
--------------------------------------------------------------------------------
/site/examples/example-plugin-targetline.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | labels: ['M', 'T', 'W', 'T', 'F'],
3 | series: [
4 | [5, 11, 2, 5, 7]
5 | ]
6 | }, {
7 | plugins: [
8 | Chartist.plugins.ctTargetLine({
9 | value: 6
10 | })
11 | ]
12 | });
13 |
--------------------------------------------------------------------------------
/site/templates/examples.hbs:
--------------------------------------------------------------------------------
1 | ---
2 | layout: content
3 | page-class: examples
4 | title: Chartist - Examples
5 | description: Demos and examples of Chartist.js with live editing functionality
6 | preventIndent: true
7 | ---
8 | {{#each page.sections}}
9 | {{>section}}
10 | {{/each}}
11 |
--------------------------------------------------------------------------------
/site/examples/example-plugin-pointlabel.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | labels: ['M', 'T', 'W', 'T', 'F'],
3 | series: [
4 | [12, 9, 7, 8, 5]
5 | ]
6 | }, {
7 | plugins: [
8 | Chartist.plugins.ctPointLabels({
9 | textAnchor: 'middle'
10 | })
11 | ]
12 | });
13 |
--------------------------------------------------------------------------------
/site/partials/affiliate-project.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{title}}
3 | 
4 | Get this Template
5 |
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Chartist Legacy Repository for Chartist 0.x
2 |
3 | This Repository only serves to maintain the Chartist 0.x documentation and for maintenance of dependent packages.
4 |
5 | If you're looking for the current and transferred Chartist repository,
6 | please visit https://github.com/chartist-js/chartist
7 |
--------------------------------------------------------------------------------
/site/examples/simple-pie-chart.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | series: [5, 3, 4]
3 | };
4 |
5 | var sum = function(a, b) { return a + b };
6 |
7 | new Chartist.Pie('.ct-chart', data, {
8 | labelInterpolationFnc: function(value) {
9 | return Math.round(value / data.series.reduce(sum) * 100) + '%';
10 | }
11 | });
--------------------------------------------------------------------------------
/site/code-snippets/plugin-include.js:
--------------------------------------------------------------------------------
1 | var chart = new Chartist.Line('.ct-chart', {
2 | labels: [1, 2, 3, 4, 5, 6, 7],
3 | series: [
4 | [1, 5, 3, 4, 6, 2, 3],
5 | [2, 4, 2, 5, 4, 3, 6]
6 | ]
7 | }, {
8 | plugins: [
9 | ctPointLabels({
10 | textAnchor: 'middle'
11 | })
12 | ]
13 | });
14 |
--------------------------------------------------------------------------------
/site/examples/example-axis-auto.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | series: [[
3 | {x: 1, y: 100},
4 | {x: 2, y: 50},
5 | {x: 3, y: 25},
6 | {x: 5, y: 12.5},
7 | {x: 8, y: 6.25}
8 | ]]
9 | }, {
10 | axisX: {
11 | type: Chartist.AutoScaleAxis,
12 | onlyInteger: true
13 | }
14 | });
15 |
--------------------------------------------------------------------------------
/site/partials/dox/dox-section.hbs:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 | {{#each modules}}
7 | {{>dox-module}}
8 | {{/each}}
9 |
10 |
11 |
14 |
--------------------------------------------------------------------------------
/site/examples/simple-line-chart.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
3 | series: [
4 | [12, 9, 7, 8, 5],
5 | [2, 1, 3.5, 7, 3],
6 | [1, 3, 4, 5, 6]
7 | ]
8 | }, {
9 | fullWidth: true,
10 | chartPadding: {
11 | right: 40
12 | }
13 | });
14 |
--------------------------------------------------------------------------------
/site/partials/example-chart.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{#if show-code-button}}
3 |
4 | {{atob (exampleCode id)}}
5 | {{/if}}
--------------------------------------------------------------------------------
/site/templates/api-documentation.hbs:
--------------------------------------------------------------------------------
1 | ---
2 | layout: content
3 | side-nav: api-side-navigation
4 | page-class: api-documentation
5 | title: Chartist - API Documentation
6 | description: Detailed documentation of the Chartist.js code and API
7 | preventIndent: true
8 | ---
9 | {{#each (doxTransform apidox)}}
10 | {{>dox-section}}
11 | {{/each}}
12 |
--------------------------------------------------------------------------------
/site/examples/example-gallery-two.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['1938', '1939', '1940', '1941', '1942', '1943'],
3 | series: [
4 | [12000, 9000, 7000, 8000, 12000, 10000],
5 | [2000, 1000, 3500, 7000, 5000, 9000]
6 | ]
7 | };
8 |
9 | var options = {
10 | seriesBarDistance: 5
11 | };
12 |
13 | new Chartist.Bar('.ct-chart', data, options);
--------------------------------------------------------------------------------
/site/examples/example-gallery-one.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9'],
3 | series: [
4 | [12, 9, 7, 8, 6, 4, 3, 2, 0],
5 | [2, 1, 3.5, 7, 9, 8, 7.7, 4, 7],
6 | [1, 3, 4, 5, 6, 8, 9, 10, 11],
7 | [11, 7.5, 5.5, 5.5, 4, 3.5, 2, 1, 0]
8 | ]
9 | };
10 |
11 | new Chartist.Line('.ct-chart', data);
--------------------------------------------------------------------------------
/site/partials/code-snippet.hbs:
--------------------------------------------------------------------------------
1 | {{#if button}}{{/if}}
2 | {{! if path is there then we load the file and escape in path otherwise we lookup a file called id.lang (index.html,
3 | test.js etc.) }}
4 | {{#if path}}{{glob path}}{{else}}{{glob (snippetPath id lang)}}{{/if}}
--------------------------------------------------------------------------------
/site/examples/example-bar-horizontal.js:
--------------------------------------------------------------------------------
1 | new Chartist.Bar('.ct-chart', {
2 | labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
3 | series: [
4 | [5, 4, 3, 7, 5, 10, 3],
5 | [3, 2, 9, 5, 4, 6, 4]
6 | ]
7 | }, {
8 | seriesBarDistance: 10,
9 | reverseData: true,
10 | horizontalBars: true,
11 | axisY: {
12 | offset: 70
13 | }
14 | });
15 |
--------------------------------------------------------------------------------
/site/code-snippets/simple-start.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | My first Chartist Tests
5 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/site/partials/dox/dox-module.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/site/code-snippets/custom-style-pie-chart.css:
--------------------------------------------------------------------------------
1 | /* Pie charts consist of solid slices where you can use this selector to override the default style. */
2 | .ct-series-a .ct-slice-pie {
3 | /* fill of the pie slieces */
4 | fill: hsl(120, 40%, 60%);
5 | /* give your pie slices some outline or separate them visually by using the background color here */
6 | stroke: white;
7 | /* outline width */
8 | stroke-width: 4px;
9 | }
10 |
--------------------------------------------------------------------------------
/site/styles/modules/_common.scss:
--------------------------------------------------------------------------------
1 | @function reverse($list, $recursive: false) {
2 | $result: ();
3 |
4 | @for $i from length($list)*-1 through -1 {
5 | @if type-of(nth($list, abs($i))) == list and $recursive {
6 | $result: append($result, reverse(nth($list, abs($i)), $recursive));
7 | }
8 |
9 | @else {
10 | $result: append($result, nth($list, abs($i)));
11 | }
12 | }
13 |
14 | @return $result;
15 | }
--------------------------------------------------------------------------------
/site/examples/example-plugin-threshold.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
3 | series: [
4 | [5, -4, 3, 7, 20, 10, 3, 4, 8, -10, 6, -8]
5 | ]
6 | }, {
7 | showArea: true,
8 | axisY: {
9 | onlyInteger: true
10 | },
11 | plugins: [
12 | Chartist.plugins.ctThreshold({
13 | threshold: 4
14 | })
15 | ]
16 | });
17 |
--------------------------------------------------------------------------------
/site/partials/api-side-navigation.hbs:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/site/code-snippets/custom-style-bar-chart.css:
--------------------------------------------------------------------------------
1 | /* Use this selector to override bar styles on bar charts. Bars are also strokes so you have maximum freedom in styling them. */
2 | .ct-series-a .ct-bar {
3 | /* Colour of your bars */
4 | stroke: red;
5 | /* The width of your bars */
6 | stroke-width: 20px;
7 | /* Yes! Dashed bars! */
8 | stroke-dasharray: 20px;
9 | /* Maybe you like round corners on your bars? */
10 | stroke-linecap: round;
11 | }
12 |
--------------------------------------------------------------------------------
/site/partials/section.hbs:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 | {{#each items}}
7 | {{partial type data}}
8 | {{/each}}
9 |
10 |
11 | {{#if side-notes}}
12 |
17 | {{/if}}
18 |
--------------------------------------------------------------------------------
/site/examples/bi-polar-bar-interpolated.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
3 | series: [
4 | [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
5 | ]
6 | };
7 |
8 | var options = {
9 | high: 10,
10 | low: -10,
11 | axisX: {
12 | labelInterpolationFnc: function(value, index) {
13 | return index % 2 === 0 ? value : null;
14 | }
15 | }
16 | };
17 |
18 | new Chartist.Bar('.ct-chart', data, options);
19 |
--------------------------------------------------------------------------------
/site/examples/example-bar-label-position.js:
--------------------------------------------------------------------------------
1 | new Chartist.Bar('.ct-chart', {
2 | labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
3 | series: [
4 | [5, 4, 3, 7, 5, 10, 3],
5 | [3, 2, 9, 5, 4, 6, 4]
6 | ]
7 | }, {
8 | axisX: {
9 | // On the x-axis start means top and end means bottom
10 | position: 'start'
11 | },
12 | axisY: {
13 | // On the y-axis start means left and end means right
14 | position: 'end'
15 | }
16 | });
17 |
--------------------------------------------------------------------------------
/site/layouts/content.hbs:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 | {{>navigation}}
6 |
7 |
10 |
11 | {{#if page.side-nav}}
12 | {{partial page.side-nav this}}
13 | {{else}}
14 | {{>side-navigation}}
15 | {{/if}}
16 |
17 |
18 | {{>body}}
19 |
20 |
21 |
--------------------------------------------------------------------------------
/tasks/concurrent.js:
--------------------------------------------------------------------------------
1 | /**
2 | * concurrent
3 | * ==========
4 | *
5 | * Run tasks in parallel to speed up the build process.
6 | *
7 | * Link: https://github.com/sindresorhus/grunt-concurrent
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | server: [
15 | 'sass:public'
16 | ],
17 | test: [
18 | 'sass' // tmp
19 | ],
20 | public: [
21 | 'sass:public',
22 | 'imagemin',
23 | 'svgmin'
24 | ]
25 | };
26 | };
27 |
--------------------------------------------------------------------------------
/tasks/cssmin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * cssmin
3 | * ======
4 | *
5 | * CSS min for the library.
6 | *
7 | * Link: https://github.com/gruntjs/grunt-contrib-cssmin
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | dist: {
15 | options: {
16 | 'banner': '<%= pkg.config.banner %>'
17 | },
18 | files: {
19 | '<%= pkg.config.dist %>/chartist.min.css': ['<%= pkg.config.tmp %>/styles/chartist.css']
20 | }
21 | }
22 | };
23 | };
24 |
--------------------------------------------------------------------------------
/tasks/umd.js:
--------------------------------------------------------------------------------
1 | /**
2 | * umd
3 | * ===
4 | *
5 | * Wraps the library into an universal module definition (AMD + CommonJS + Global).
6 | *
7 | * Link: https://github.com/bebraw/grunt-umd
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | dist: {
15 | src: '<%= pkg.config.dist %>/chartist.js',
16 | objectToExport: 'Chartist',
17 | globalAlias: 'Chartist',
18 | amdModuleId: 'Chartist',
19 | indent: 2
20 | }
21 | };
22 | };
23 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 |
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
22 |
--------------------------------------------------------------------------------
/site/examples/example-bipolar-line-area.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | labels: [1, 2, 3, 4, 5, 6, 7, 8],
3 | series: [
4 | [1, 2, 3, 1, -2, 0, 1, 0],
5 | [-2, -1, -2, -1, -2.5, -1, -2, -1],
6 | [0, 0, 0, 1, 2, 2.5, 2, 1],
7 | [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
8 | ]
9 | }, {
10 | high: 3,
11 | low: -3,
12 | showArea: true,
13 | showLine: false,
14 | showPoint: false,
15 | fullWidth: true,
16 | axisX: {
17 | showLabel: false,
18 | showGrid: false
19 | }
20 | });
21 |
--------------------------------------------------------------------------------
/site/examples/example-axis-fixed-and-auto.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | series: [[
3 | {x: 1, y: 100},
4 | {x: 2, y: 50},
5 | {x: 3, y: 25},
6 | {x: 5, y: 12.5},
7 | {x: 8, y: 6.25}
8 | ]]
9 | }, {
10 | axisX: {
11 | type: Chartist.AutoScaleAxis,
12 | onlyInteger: true
13 | },
14 | axisY: {
15 | type: Chartist.FixedScaleAxis,
16 | ticks: [0, 50, 75, 87.5, 100],
17 | low: 0
18 | },
19 | lineSmooth: Chartist.Interpolation.step(),
20 | showPoint: false
21 | });
22 |
--------------------------------------------------------------------------------
/site/examples/example-line-only-integer.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | labels: [1, 2, 3, 4, 5, 6, 7, 8],
3 | series: [
4 | [1, 2, 3, 1, -2, 0, 1, 0],
5 | [-2, -1, -2, -1, -3, -1, -2, -1],
6 | [0, 0, 0, 1, 2, 3, 2, 1],
7 | [3, 2, 1, 0.5, 1, 0, -1, -3]
8 | ]
9 | }, {
10 | high: 3,
11 | low: -3,
12 | fullWidth: true,
13 | // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
14 | axisY: {
15 | onlyInteger: true,
16 | offset: 20
17 | }
18 | });
19 |
--------------------------------------------------------------------------------
/LICENSE-WTFPL:
--------------------------------------------------------------------------------
1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
2 | Version 2, December 2004
3 |
4 | Copyright (C) 2004 Sam Hocevar
5 |
6 | Everyone is permitted to copy and distribute verbatim or modified
7 | copies of this license document, and changing it is allowed as long
8 | as the name is changed.
9 |
10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
12 |
13 | 0. You just DO WHAT THE FUCK YOU WANT TO.
14 |
--------------------------------------------------------------------------------
/site/partials/table.hbs:
--------------------------------------------------------------------------------
1 | {{#if button}}{{button}}{{/if}}
2 |
3 | {{#if header}}
4 |
5 |
6 | {{#each header}}
7 | | {{this}} |
8 | {{/each}}
9 |
10 |
11 | {{/if}}
12 |
13 |
14 | {{#each rows}}
15 |
16 | {{#each this}}
17 | | {{{this}}} |
18 | {{/each}}
19 |
20 | {{/each}}
21 |
22 |
23 |
--------------------------------------------------------------------------------
/site/code-snippets/simple-start-aspect-ratio-chart.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | // A labels array that can contain any sort of values
3 | labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
4 | // Our series array that contains series objects or in this case series data arrays
5 | series: [
6 | [5, 2, 4, 2, 0]
7 | ]
8 | };
9 |
10 | // Create a new line chart object where as first parameter we pass in a selector
11 | // that is resolving to our chart container element. The Second parameter
12 | // is the actual data object.
13 | new Chartist.Line('.ct-chart', data);
--------------------------------------------------------------------------------
/site/code-snippets/two-charts.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
17 |
--------------------------------------------------------------------------------
/site/styles/modules/_animation.scss:
--------------------------------------------------------------------------------
1 | @mixin keyframes($name) {
2 | @-webkit-keyframes #{$name} {
3 | @content;
4 | }
5 | @-moz-keyframes #{$name} {
6 | @content;
7 | }
8 | @-ms-keyframes #{$name} {
9 | @content;
10 | }
11 | @keyframes #{$name} {
12 | @content;
13 | }
14 | }
15 |
16 | @mixin animation($name, $params) {
17 | -webkit-animation: #{$name} $params; /* Safari 4+ */
18 | -moz-animation: #{$name} $params; /* Fx 5+ */
19 | -o-animation: #{$name} $params; /* Opera 12+ */
20 | animation: #{$name} $params; /* IE 10+ */
21 | }
--------------------------------------------------------------------------------
/site/examples/example-line-simple-smoothing.js:
--------------------------------------------------------------------------------
1 | var chart = new Chartist.Line('.ct-chart', {
2 | labels: [1, 2, 3, 4, 5],
3 | series: [
4 | [1, 5, 10, 0, 1],
5 | [10, 15, 0, 1, 2]
6 | ]
7 | }, {
8 | // Remove this configuration to see that chart rendered with cardinal spline interpolation
9 | // Sometimes, on large jumps in data values, it's better to use simple smoothing.
10 | lineSmooth: Chartist.Interpolation.simple({
11 | divisor: 2
12 | }),
13 | fullWidth: true,
14 | chartPadding: {
15 | right: 20
16 | },
17 | low: 0
18 | });
19 |
--------------------------------------------------------------------------------
/site/examples/stacked-bar.js:
--------------------------------------------------------------------------------
1 | new Chartist.Bar('.ct-chart', {
2 | labels: ['Q1', 'Q2', 'Q3', 'Q4'],
3 | series: [
4 | [800000, 1200000, 1400000, 1300000],
5 | [200000, 400000, 500000, 300000],
6 | [100000, 200000, 400000, 600000]
7 | ]
8 | }, {
9 | stackBars: true,
10 | axisY: {
11 | labelInterpolationFnc: function(value) {
12 | return (value / 1000) + 'k';
13 | }
14 | }
15 | }).on('draw', function(data) {
16 | if(data.type === 'bar') {
17 | data.element.attr({
18 | style: 'stroke-width: 30px'
19 | });
20 | }
21 | });
22 |
--------------------------------------------------------------------------------
/tasks/uglify.js:
--------------------------------------------------------------------------------
1 | /**
2 | * uglify
3 | * ======
4 | *
5 | * Minify the library.
6 | *
7 | * Link: https://github.com/gruntjs/grunt-contrib-uglify
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | dist: {
15 | options: {
16 | banner: '<%= pkg.config.banner %>',
17 | sourceMap: true,
18 | sourceMapIncludeSources: true
19 | },
20 | files: {
21 | '<%= pkg.config.dist %>/chartist.min.js': ['<%= pkg.config.dist %>/chartist.js']
22 | }
23 | }
24 | };
25 | };
26 |
--------------------------------------------------------------------------------
/tasks/useminPrepare.js:
--------------------------------------------------------------------------------
1 | /**
2 | * useminPrepare
3 | * =============
4 | *
5 | * Reads HTML for usemin blocks to enable smart builds that automatically
6 | * concat, minify and revision files. Creates configurations in memory so
7 | * additional tasks can operate on them.
8 | *
9 | * Link: https://github.com/yeoman/grunt-usemin
10 | */
11 |
12 | 'use strict';
13 |
14 | module.exports = function (grunt) {
15 | return {
16 | options: {
17 | dest: '<%= pkg.config.public %>'
18 | },
19 | html: '<%= pkg.config.tmp %>/index.html'
20 | }
21 | };
22 |
--------------------------------------------------------------------------------
/site/examples/example-multiline-bar.js:
--------------------------------------------------------------------------------
1 | new Chartist.Bar('.ct-chart', {
2 | labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
3 | series: [
4 | [60000, 40000, 80000, 70000],
5 | [40000, 30000, 70000, 65000],
6 | [8000, 3000, 10000, 6000]
7 | ]
8 | }, {
9 | seriesBarDistance: 10,
10 | axisX: {
11 | offset: 60
12 | },
13 | axisY: {
14 | offset: 80,
15 | labelInterpolationFnc: function(value) {
16 | return value + ' CHF'
17 | },
18 | scaleMinSpace: 15
19 | }
20 | });
--------------------------------------------------------------------------------
/site/examples/example-plugin-tooltip.js:
--------------------------------------------------------------------------------
1 | var chart = new Chartist.Line('.ct-chart', {
2 | labels: [1, 2, 3],
3 | series: [
4 | [
5 | {meta: 'description', value: 1 },
6 | {meta: 'description', value: 5},
7 | {meta: 'description', value: 3}
8 | ],
9 | [
10 | {meta: 'other description', value: 2},
11 | {meta: 'other description', value: 4},
12 | {meta: 'other description', value: 2}
13 | ]
14 | ]
15 | }, {
16 | low: 0,
17 | high: 8,
18 | fullWidth: true,
19 | plugins: [
20 | Chartist.plugins.tooltip()
21 | ]
22 | });
23 |
--------------------------------------------------------------------------------
/site/styles/modules/_font.scss:
--------------------------------------------------------------------------------
1 | $font-path: "/fonts" !default;
2 |
3 | @mixin embed-font($font-name, $font-file, $font-path: $font-path) {
4 | @font-face {
5 | font-family: $font-name;
6 | src: url('#{$font-path}/#{$font-file}.eot');
7 | src: url('#{$font-path}/#{$font-file}.eot?#iefix') format('embedded-opentype'),
8 | url('#{$font-path}/#{$font-file}.woff') format('woff'),
9 | url('#{$font-path}/#{$font-file}.ttf') format('truetype'),
10 | url('#{$font-path}/#{$font-file}.svg') format('svg');
11 | font-weight: normal;
12 | font-style: normal;
13 | }
14 | }
--------------------------------------------------------------------------------
/tasks/imagemin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * imagemin
3 | * ========
4 | *
5 | * The following *-min tasks produce minified files in the dist folder.
6 | *
7 | * Link: https://github.com/gruntjs/grunt-contrib-imagemin
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | dist: {
15 | files: [
16 | {
17 | expand: true,
18 | cwd: '<%= pkg.config.site %>/images',
19 | src: '{,*/}*.{png,jpg,jpeg}',
20 | dest: '<%= pkg.config.public %>/images'
21 | }
22 | ]
23 | }
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/tasks/template.js:
--------------------------------------------------------------------------------
1 | /**
2 | * template
3 | * ===
4 | *
5 | * Replaces template variables inside of files using build stage variables.
6 | *
7 | * Link: https://github.com/mathiasbynens/grunt-template
8 | */
9 |
10 | 'use strict';
11 |
12 | var pkg = require('../package.json');
13 |
14 | module.exports = function (grunt) {
15 | return {
16 | dist: {
17 | options: {
18 | data: {
19 | pkg: pkg
20 | }
21 | },
22 | files: {
23 | '<%= pkg.config.dist %>/chartist.js': '<%= pkg.config.dist %>/chartist.js'
24 | }
25 | }
26 | };
27 | };
28 |
--------------------------------------------------------------------------------
/site/styles/_affiliate-project.scss:
--------------------------------------------------------------------------------
1 | .affiliate-projects {
2 | display: flex;
3 | margin: 0 -10px;
4 | }
5 |
6 | .affiliate-project {
7 | display: block;
8 | margin: 0 10px;
9 | }
10 |
11 | .affiliate-project__title {
12 | display: block;
13 | font-size: 20px;
14 | font-weight: bold;
15 | margin: 10px 0;
16 | line-height: 1.1;
17 | }
18 |
19 | .affiliate-project__image {
20 | margin-bottom: 10px;
21 | }
22 |
23 | @media screen and (max-width: 640px) {
24 | .affiliate-projects {
25 | display: block;
26 | }
27 |
28 | .affiliate-project {
29 | margin: 10px;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/site/partials/browser-support-table.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | |
5 | {{#each browsers}}
6 | {{this}} |
7 | {{/each}}
8 |
9 |
10 |
11 | {{#each features}}
12 |
13 | | {{name}} |
14 | {{#each browsers}}
15 |
16 | {{text}}
17 | |
18 | {{/each}}
19 |
20 | {{/each}}
21 |
22 |
--------------------------------------------------------------------------------
/tasks/critical.js:
--------------------------------------------------------------------------------
1 | /**
2 | * critical
3 | * ========
4 | *
5 | * Use critical to inline above the fold critical CSS during the build process.
6 | *
7 | * Link: https://github.com/bezoerb/grunt-critical
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | public: {
15 | options: {
16 | base: './',
17 | css: '<%= pkg.config.public %>/styles/main.css',
18 | width: 320,
19 | height: 3000
20 | },
21 | src: '<%= pkg.config.public %>/index.html',
22 | dest: '<%= pkg.config.public %>/index.html'
23 | }
24 | };
25 | };
26 |
--------------------------------------------------------------------------------
/site/examples/example-line-data-holes.js:
--------------------------------------------------------------------------------
1 | var chart = new Chartist.Line('.ct-chart', {
2 | labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
3 | series: [
4 | [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
5 | [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null],
6 | [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
7 | [{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}]
8 | ]
9 | }, {
10 | fullWidth: true,
11 | chartPadding: {
12 | right: 10
13 | },
14 | low: 0
15 | });
16 |
--------------------------------------------------------------------------------
/tasks/clean.js:
--------------------------------------------------------------------------------
1 | /**
2 | * clean
3 | * =====
4 | *
5 | * Remove temporary and unused files.
6 | *
7 | * Link: https://github.com/gruntjs/grunt-contrib-clean
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | public: {
15 | files: [
16 | {
17 | dot: true,
18 | src: [
19 | '<%= pkg.config.tmp %>',
20 | '<%= pkg.config.public %>/*',
21 | '!<%= pkg.config.public %>/.git*'
22 | ]
23 | }
24 | ]
25 | },
26 | tmp: '<%= pkg.config.tmp %>',
27 | dist: '<%= pkg.config.dist %>'
28 | };
29 | };
30 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": true,
3 | "browser": true,
4 | "esnext": true,
5 | "bitwise": true,
6 | "camelcase": false,
7 | "curly": true,
8 | "eqeqeq": true,
9 | "immed": true,
10 | "indent": 2,
11 | "latedef": true,
12 | "newcap": false,
13 | "noarg": true,
14 | "quotmark": "single",
15 | "regexp": true,
16 | "undef": true,
17 | "unused": true,
18 | "strict": true,
19 | "validthis": true,
20 | "trailing": true,
21 | "smarttabs": true,
22 | "globals": {
23 | "angular": false,
24 | "jQuery": false,
25 | "$": false,
26 | "SVG": false,
27 | "Snap": false,
28 | "Foundation": false
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/site/examples/overlapping-bars.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
3 | series: [
4 | [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
5 | [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
6 | ]
7 | };
8 |
9 | var options = {
10 | seriesBarDistance: 10
11 | };
12 |
13 | var responsiveOptions = [
14 | ['screen and (max-width: 640px)', {
15 | seriesBarDistance: 5,
16 | axisX: {
17 | labelInterpolationFnc: function (value) {
18 | return value[0];
19 | }
20 | }
21 | }]
22 | ];
23 |
24 | new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
25 |
--------------------------------------------------------------------------------
/site/examples/pie-with-custom-labels.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['Bananas', 'Apples', 'Grapes'],
3 | series: [20, 15, 40]
4 | };
5 |
6 | var options = {
7 | labelInterpolationFnc: function(value) {
8 | return value[0]
9 | }
10 | };
11 |
12 | var responsiveOptions = [
13 | ['screen and (min-width: 640px)', {
14 | chartPadding: 30,
15 | labelOffset: 100,
16 | labelDirection: 'explode',
17 | labelInterpolationFnc: function(value) {
18 | return value;
19 | }
20 | }],
21 | ['screen and (min-width: 1024px)', {
22 | labelOffset: 80,
23 | chartPadding: 20
24 | }]
25 | ];
26 |
27 | new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
--------------------------------------------------------------------------------
/site/partials/side-navigation.hbs:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/tasks/htmlmin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * htmlmin
3 | * =======
4 | *
5 | * Minify HTML of the website.
6 | *
7 | * Link: https://github.com/gruntjs/grunt-contrib-htmlmin
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function(){
13 | return {
14 | public: {
15 | options: {
16 | collapseWhitespace: true,
17 | collapseBooleanAttributes: true,
18 | removeCommentsFromCDATA: true,
19 | removeOptionalTags: true
20 | },
21 | files: [
22 | {
23 | expand: true,
24 | cwd: '<%= pkg.config.public %>',
25 | src: ['*.html'],
26 | dest: '<%= pkg.config.public %>'
27 | }
28 | ]
29 | }
30 | };
31 | };
32 |
--------------------------------------------------------------------------------
/site/examples/example-gallery-four.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | series: [60, 20]
3 | };
4 |
5 | var options = {
6 | donut: true,
7 | donutWidth: 40,
8 | total: 100,
9 | labelInterpolationFnc: function(value) {
10 | return value + '%';
11 | }
12 | };
13 |
14 | var responsiveOptions = [
15 | [
16 | Foundation.media_queries.medium,
17 | {
18 | labelOffset: 30,
19 | chartPadding: 10,
20 | labelDirection: 'explode'
21 | }
22 | ],
23 | [
24 | Foundation.media_queries.large,
25 | {
26 | labelOffset: -30,
27 | chartPadding: 0,
28 | labelDirection: 'implode'
29 | }
30 | ]
31 | ];
32 |
33 | new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
--------------------------------------------------------------------------------
/site/examples/example-line-data-fill-holes.js:
--------------------------------------------------------------------------------
1 | var chart = new Chartist.Line('.ct-chart', {
2 | labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
3 | series: [
4 | [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9],
5 | [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null],
6 | [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
7 | [{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}]
8 | ]
9 | }, {
10 | fullWidth: true,
11 | chartPadding: {
12 | right: 10
13 | },
14 | lineSmooth: Chartist.Interpolation.cardinal({
15 | fillHoles: true,
16 | }),
17 | low: 0
18 | });
19 |
--------------------------------------------------------------------------------
/site/code-snippets/custom-style-donut-chart.css:
--------------------------------------------------------------------------------
1 | /* 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 */
2 | .ct-series-a .ct-slice-donut {
3 | /* give the donut slice a custom colour */
4 | stroke: blue;
5 | /* 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 */
6 | stroke-width: 5px !important;
7 | /* create modern looking rounded donut charts */
8 | stroke-linecap: round;
9 | }
10 |
--------------------------------------------------------------------------------
/tasks/jshint.js:
--------------------------------------------------------------------------------
1 | /**
2 | * jshint
3 | * ======
4 | *
5 | * Make sure code styles are up to par and there are no obvious mistakes.
6 | *
7 | * Link: https://github.com/gruntjs/grunt-contrib-jshint
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | options: {
15 | jshintrc: '.jshintrc',
16 | reporter: require('jshint-stylish')
17 | },
18 | all: [
19 | 'Gruntfile.js',
20 | '<%= pkg.config.src %>/{,*/}*.js',
21 | '<%= pkg.config.site %>/scripts/{,*/}*.js'
22 | ],
23 | test: {
24 | options: {
25 | jshintrc: '<%= pkg.config.test %>/.jshintrc'
26 | },
27 | src: ['<%= pkg.config.test %>/spec/{,*/}*.js']
28 | }
29 | };
30 | };
31 |
--------------------------------------------------------------------------------
/tasks/svgmin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * svgmin
3 | * ======
4 | *
5 | * Minify SVG graphics by removing unnecessary data.
6 | *
7 | * Link: https://github.com/sindresorhus/grunt-svgmin
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | dist: {
15 | files: [
16 | {
17 | expand: true,
18 | cwd: '<%= pkg.config.site %>/images',
19 | src: '{,*/}*.svg',
20 | dest: '<%= pkg.config.public %>/images'
21 | }
22 | ],
23 | options: {
24 | plugins: [
25 | { removeEmptyContainers: true },
26 | { cleanupIDs: false },
27 | { removeUnknownsAndDefaults: false }
28 | ]
29 | }
30 | }
31 | };
32 | };
33 |
--------------------------------------------------------------------------------
/site/partials/live-example.hbs:
--------------------------------------------------------------------------------
1 |
3 | {{#if title}}
4 |
7 | {{/if}}
8 |
11 |
21 |
22 |
--------------------------------------------------------------------------------
/site/code-snippets/custom-style-line-chart.css:
--------------------------------------------------------------------------------
1 | /* Use this selector to override the line style on a given series */
2 | .ct-series-a .ct-line {
3 | /* Set the colour of this series line */
4 | stroke: red;
5 | /* Control the thikness of your lines */
6 | stroke-width: 5px;
7 | /* Create a dashed line with a pattern */
8 | stroke-dasharray: 10px 20px;
9 | }
10 |
11 | /* 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 */
12 | .ct-series-a .ct-point {
13 | /* Colour of your points */
14 | stroke: red;
15 | /* Size of your points */
16 | stroke-width: 20px;
17 | /* Make your points appear as squares */
18 | stroke-linecap: square;
19 | }
20 |
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Grunt Configurations
3 | * ====================
4 | *
5 | * Seperate tasks and configurations are declared in '/tasks'.
6 | *
7 | * Link: https://github.com/firstandthird/load-grunt-config
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 |
14 | // tracks how long a tasks take
15 | require('time-grunt')(grunt);
16 |
17 | // load task and configurations
18 | require('load-grunt-config')(grunt, {
19 | configPath: __dirname + '/tasks',
20 | data: {
21 | pkg: grunt.file.readJSON('package.json'),
22 | year: new Date().getFullYear()
23 | },
24 | jitGrunt: {
25 | staticMappings: {
26 | 'useminPrepare': 'grunt-usemin',
27 | 'assemble': 'assemble'
28 | }
29 | }
30 | });
31 | };
32 |
--------------------------------------------------------------------------------
/site/examples/example-line-path-animation.js:
--------------------------------------------------------------------------------
1 | var chart = new Chartist.Line('.ct-chart', {
2 | labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
3 | series: [
4 | [1, 5, 2, 5, 4, 3],
5 | [2, 3, 4, 8, 1, 2],
6 | [5, 4, 3, 2, 1, 0.5]
7 | ]
8 | }, {
9 | low: 0,
10 | showArea: true,
11 | showPoint: false,
12 | fullWidth: true
13 | });
14 |
15 | chart.on('draw', function(data) {
16 | if(data.type === 'line' || data.type === 'area') {
17 | data.element.animate({
18 | d: {
19 | begin: 2000 * data.index,
20 | dur: 2000,
21 | from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
22 | to: data.path.clone().stringify(),
23 | easing: Chartist.Svg.Easing.easeOutQuint
24 | }
25 | });
26 | }
27 | });
28 |
--------------------------------------------------------------------------------
/site/helpers/chartist-helpers.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var fs = require('fs');
4 |
5 | // Export helpers
6 | module.exports.register = function (Handlebars, opt, params) {
7 | // The helpers to be exported
8 | var helpers = {
9 |
10 | snippetPath: function (snippetId, snippetLang) {
11 | return 'site/code-snippets/' + snippetId + '.' + snippetLang || 'js';
12 | },
13 |
14 | exampleCode: function(exampleId) {
15 | return new Buffer(fs.readFileSync('site/examples/' + exampleId + '.js', {
16 | encoding: 'utf8'
17 | }), 'utf8').toString('base64');
18 | }
19 | };
20 |
21 | opt = opt || {};
22 | for (var helper in helpers) {
23 | if (helpers.hasOwnProperty(helper)) {
24 | Handlebars.registerHelper(helper, helpers[helper]);
25 | }
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/site/code-snippets/plugin-example.js:
--------------------------------------------------------------------------------
1 | function ctPointLabels(options) {
2 | return function ctPointLabels(chart) {
3 | var defaultOptions = {
4 | labelClass: 'ct-label',
5 | labelOffset: {
6 | x: 0,
7 | y: -10
8 | },
9 | textAnchor: 'middle'
10 | };
11 |
12 | options = Chartist.extend({}, defaultOptions, options);
13 |
14 | if(chart instanceof Chartist.Line) {
15 | chart.on('draw', function(data) {
16 | if(data.type === 'point') {
17 | data.group.elem('text', {
18 | x: data.x + options.labelOffset.x,
19 | y: data.y + options.labelOffset.y,
20 | style: 'text-anchor: ' + options.textAnchor
21 | }, options.labelClass).text(data.value);
22 | }
23 | });
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/site/code-snippets/simple-start-fixed-chart.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | // A labels array that can contain any sort of values
3 | labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
4 | // Our series array that contains series objects or in this case series data arrays
5 | series: [
6 | [5, 2, 4, 2, 0]
7 | ]
8 | };
9 |
10 | // As options we currently only set a static size of 300x200 px. We can also omit this and use aspect ratio containers
11 | // as you saw in the previous example
12 | var options = {
13 | width: 300,
14 | height: 200
15 | };
16 |
17 | // Create a new line chart object where as first parameter we pass in a selector
18 | // that is resolving to our chart container element. The Second parameter
19 | // is the actual data object. As a third parameter we pass in our custom options.
20 | new Chartist.Line('.ct-chart', data, options);
21 |
--------------------------------------------------------------------------------
/site/examples/example-simple-bar.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
3 | series: [
4 | [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
5 | [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
6 | ]
7 | };
8 |
9 | var options = {
10 | seriesBarDistance: 15
11 | };
12 |
13 | var responsiveOptions = [
14 | ['screen and (min-width: 641px) and (max-width: 1024px)', {
15 | seriesBarDistance: 10,
16 | axisX: {
17 | labelInterpolationFnc: function (value) {
18 | return value;
19 | }
20 | }
21 | }],
22 | ['screen and (max-width: 640px)', {
23 | seriesBarDistance: 5,
24 | axisX: {
25 | labelInterpolationFnc: function (value) {
26 | return value[0];
27 | }
28 | }
29 | }]
30 | ];
31 |
32 | new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
--------------------------------------------------------------------------------
/test/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": true,
3 | "browser": true,
4 | "esnext": true,
5 | "bitwise": true,
6 | "camelcase": true,
7 | "curly": true,
8 | "eqeqeq": true,
9 | "immed": true,
10 | "indent": 2,
11 | "latedef": true,
12 | "newcap": true,
13 | "noarg": true,
14 | "quotmark": "single",
15 | "regexp": true,
16 | "undef": true,
17 | "unused": true,
18 | "strict": true,
19 | "trailing": true,
20 | "smarttabs": true,
21 | "globals": {
22 | "after": false,
23 | "afterEach": false,
24 | "angular": false,
25 | "before": false,
26 | "beforeEach": false,
27 | "browser": false,
28 | "describe": false,
29 | "fdescribe": false,
30 | "expect": false,
31 | "inject": false,
32 | "it": false,
33 | "fit": false,
34 | "jasmine": false,
35 | "spyOn": false,
36 | "$": false,
37 | "Chartist": false
38 | }
39 | }
40 |
41 |
--------------------------------------------------------------------------------
/site/examples/example-plugin-axistitle.js:
--------------------------------------------------------------------------------
1 | new Chartist.Line('.ct-chart', {
2 | labels: ['0-15', '16-30', '31-45', '46-60', '61-75', '76-90', '91-105', '106-120'],
3 | series: [[1, 3, 7, 12, 1, 2, 1, 0]]
4 | }, {
5 | chartPadding: {
6 | top: 20,
7 | right: 0,
8 | bottom: 30,
9 | left: 0
10 | },
11 | axisY: {
12 | onlyInteger: true
13 | },
14 | plugins: [
15 | Chartist.plugins.ctAxisTitle({
16 | axisX: {
17 | axisTitle: 'Time (mins)',
18 | axisClass: 'ct-axis-title',
19 | offset: {
20 | x: 0,
21 | y: 50
22 | },
23 | textAnchor: 'middle'
24 | },
25 | axisY: {
26 | axisTitle: 'Goals',
27 | axisClass: 'ct-axis-title',
28 | offset: {
29 | x: 0,
30 | y: 0
31 | },
32 | textAnchor: 'middle',
33 | flipTitle: false
34 | }
35 | })
36 | ]
37 | });
38 |
--------------------------------------------------------------------------------
/site/examples/example-line-months-interpolation.js:
--------------------------------------------------------------------------------
1 | var data = {
2 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
3 | series: [
4 | [1, 2, 2.7, 0, 3, 5, 3, 4, 8, 10, 12, 7],
5 | [0, 1.2, 2, 7, 2.5, 9, 5, 8, 9, 11, 14, 4],
6 | [10, 9, 8, 6.5, 6.8, 6, 5.4, 5.3, 4.5, 4.4, 3, 2.8]
7 | ]
8 | };
9 |
10 | var responsiveOptions = [
11 | [
12 | Foundation.media_queries.small,
13 | {
14 | axisX: {
15 | labelInterpolationFnc: function (value, index) {
16 | // Interpolation function causes only every 2nd label to be displayed
17 | if (index % 2 !== 0) {
18 | return false;
19 | } else {
20 | return value;
21 | }
22 | }
23 | }
24 | }
25 | ]
26 | ];
27 |
28 | new Chartist.Line('.ct-chart', data, {
29 | chartPadding: {
30 | top: 30
31 | }
32 | }, responsiveOptions);
33 |
--------------------------------------------------------------------------------
/tasks/usemin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * usemin
3 | * ======
4 | *
5 | * Performs rewrites based on rev and the useminPrepare configuration.
6 | *
7 | * Link: https://github.com/yeoman/grunt-usemin
8 | */
9 |
10 | 'use strict';
11 |
12 | module.exports = function (grunt) {
13 | return {
14 | html: ['<%= pkg.config.public %>/{,*/}*.html'],
15 | css: ['<%= pkg.config.public %>/styles/{,*/}*.css'],
16 | options: {
17 | assetsDirs: ['<%= pkg.config.public %>'],
18 | blockReplacements: {
19 | js: function (block) {
20 |
21 | var asyncScripts = [
22 | 'scripts/all.js'
23 | ];
24 |
25 | var isAsync = block.async || asyncScripts.indexOf(block.dest) > -1;
26 |
27 | return isAsync ?
28 | '
154 |
155 |
156 |
157 |