40 | 6 Chart types
41 |Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.
42 |Chart.js
30 |Easy, object oriented client side graphs for designers and developers
31 | 32 | 33 | 34 | 35 | DocumentationDownload 36 |
40 | 
45 | HTML5 Based
46 |Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.
47 |
50 | Simple and flexible
51 |Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation options.
52 |
57 |
61 | Line charts
58 |Line graphs are probably the most widely used graph for showing trends.
59 |Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.
60 |
62 |
63 |
64 |
68 |
69 |
70 |
71 |
75 | Bar charts
72 |Bar graphs are also great at showing trend data.
73 |Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.
74 |
79 |
83 | Radar charts
80 |Radar charts are good for comparing a selection of different pieces of data.
81 |Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you'd expect.
82 |
84 |
85 |
86 |
90 |
91 |
92 |
93 |
97 | Pie charts
94 |Pie charts are great at comparing proportions within a single data set.
95 |Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.
96 |
101 |
105 | Polar area charts
102 |Polar area charts are similar to pie charts, but the variable isn't the circumference of the segment, but the radius of it.
103 |Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.
104 |
106 |
107 |
108 |
112 |
113 |
114 |
115 |
119 | Doughnut charts
116 |Similar to pie charts, doughnut charts are great for showing proportional data.
117 |Chart.js offers the same customisation options as for pie charts, but with a custom sized inner cutout to turn your pies into doughnuts.
118 |Like what you see? Download Chart.js on Github or read detailed documentation
121 |
17 |
21 |
22 |
682 |
683 |
753 |
766 |
767 |
--------------------------------------------------------------------------------
/site/assets/excanvas.js:
--------------------------------------------------------------------------------
1 | // Copyright 2006 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 |
16 | // Known Issues:
17 | //
18 | // * Patterns only support repeat.
19 | // * Radial gradient are not implemented. The VML version of these look very
20 | // different from the canvas one.
21 | // * Clipping paths are not implemented.
22 | // * Coordsize. The width and height attribute have higher priority than the
23 | // width and height style values which isn't correct.
24 | // * Painting mode isn't implemented.
25 | // * Canvas width/height should is using content-box by default. IE in
26 | // Quirks mode will draw the canvas using border-box. Either change your
27 | // doctype to HTML5
28 | // (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
29 | // or use Box Sizing Behavior from WebFX
30 | // (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
31 | // * Non uniform scaling does not correctly scale strokes.
32 | // * Optimize. There is always room for speed improvements.
33 |
34 | // Only add this code if we do not already have a canvas implementation
35 | if (!document.createElement('canvas').getContext) {
36 |
37 | (function() {
38 |
39 | // alias some functions to make (compiled) code shorter
40 | var m = Math;
41 | var mr = m.round;
42 | var ms = m.sin;
43 | var mc = m.cos;
44 | var abs = m.abs;
45 | var sqrt = m.sqrt;
46 |
47 | // this is used for sub pixel precision
48 | var Z = 10;
49 | var Z2 = Z / 2;
50 |
51 | var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
52 |
53 | /**
54 | * This funtion is assigned to the
23 |
26 |
46 |
47 |
48 |
163 |
164 |
165 |
267 |
268 |
269 |
408 |
409 |
410 |
530 |
531 |
585 |
586 |
652 |
653 |
680 |
681 | Chart.js Documentation
24 |Everything you need to know to create great looking charts using Chart.js
25 |Getting started
27 |Include Chart.js
28 |First we need to include the Chart.js library on the page. The library occupies a global variable of Chart.
<script src="Chart.js"></script>Creating a chart
31 |To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the 2d context of where we want to draw the chart. Here's an example.
32 |<canvas id="myChart" width="400" height="400"></canvas>//Get the context of the canvas element we want to select
34 | var ctx = document.getElementById("myChart").getContext("2d");
35 | var myNewChart = new Chart(ctx).PolarArea(data);We can also get the context of our canvas with jQuery. To do this, we need to get the DOM node out of the jQuery collection, and call the getContext("2d") method on that.
//Get context with jQuery - using jQuery's .get() method.
38 | var ctx = $("#myChart").get(0).getContext("2d");
39 | //This will get the first returned node in the jQuery collection.
40 | var myNewChart = new Chart(ctx);After we've instantiated the Chart class on the canvas we want to draw on, Chart.js will handle the scaling for retina displays.
42 |With the Chart class set up, we can go on to create one of the charts Chart.js has available. In the example below, we would be drawing a Polar area chart.
43 |new Chart(ctx).PolarArea(data,options);We call a method of the name of the chart we want to create. We pass in the data for that chart type, and the options for that chart as parameters. Chart.js will merge the options you pass in with the default options for that chart type.
45 |Line chart
49 |Introduction
50 |A line chart is a way of plotting data points on a line.
51 |Often, it is used to show trend data, and the comparison of two data sets.
52 |Example usage
53 | 54 |new Chart(ctx).Line(data,options);Data structure
56 |var data = {
57 | labels : ["January","February","March","April","May","June","July"],
58 | datasets : [
59 | {
60 | fillColor : "rgba(220,220,220,0.5)",
61 | strokeColor : "rgba(220,220,220,1)",
62 | pointColor : "rgba(220,220,220,1)",
63 | pointStrokeColor : "#fff",
64 | data : [65,59,90,81,56,55,40]
65 | },
66 | {
67 | fillColor : "rgba(151,187,205,0.5)",
68 | strokeColor : "rgba(151,187,205,1)",
69 | pointColor : "rgba(151,187,205,1)",
70 | pointStrokeColor : "#fff",
71 | data : [28,48,40,19,96,27,100]
72 | }
73 | ]
74 | }The line chart requires an array of labels for each of the data points. This is show on the X axis.
76 |The data for line charts is broken up into an array of datasets. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points. These colours are strings just like CSS. You can use RGBA, RGB, HEX or HSL notation.
77 | 78 |Chart options
79 |Line.defaults = {
80 |
81 | //Boolean - If we show the scale above the chart data
82 | scaleOverlay : false,
83 |
84 | //Boolean - If we want to override with a hard coded scale
85 | scaleOverride : false,
86 |
87 | //** Required if scaleOverride is true **
88 | //Number - The number of steps in a hard coded scale
89 | scaleSteps : null,
90 | //Number - The value jump in the hard coded scale
91 | scaleStepWidth : null,
92 | //Number - The scale starting value
93 | scaleStartValue : null,
94 |
95 | //String - Colour of the scale line
96 | scaleLineColor : "rgba(0,0,0,.1)",
97 |
98 | //Number - Pixel width of the scale line
99 | scaleLineWidth : 1,
100 |
101 | //Boolean - Whether to show labels on the scale
102 | scaleShowLabels : true,
103 |
104 | //Interpolated JS string - can access value
105 | scaleLabel : "<%=value%>",
106 |
107 | //String - Scale label font declaration for the scale label
108 | scaleFontFamily : "'Arial'",
109 |
110 | //Number - Scale label font size in pixels
111 | scaleFontSize : 12,
112 |
113 | //String - Scale label font weight style
114 | scaleFontStyle : "normal",
115 |
116 | //String - Scale label font colour
117 | scaleFontColor : "#666",
118 |
119 | ///Boolean - Whether grid lines are shown across the chart
120 | scaleShowGridLines : true,
121 |
122 | //String - Colour of the grid lines
123 | scaleGridLineColor : "rgba(0,0,0,.05)",
124 |
125 | //Number - Width of the grid lines
126 | scaleGridLineWidth : 1,
127 |
128 | //Boolean - Whether the line is curved between points
129 | bezierCurve : true,
130 |
131 | //Boolean - Whether to show a dot for each point
132 | pointDot : true,
133 |
134 | //Number - Radius of each point dot in pixels
135 | pointDotRadius : 3,
136 |
137 | //Number - Pixel width of point dot stroke
138 | pointDotStrokeWidth : 1,
139 |
140 | //Boolean - Whether to show a stroke for datasets
141 | datasetStroke : true,
142 |
143 | //Number - Pixel width of dataset stroke
144 | datasetStrokeWidth : 2,
145 |
146 | //Boolean - Whether to fill the dataset with a colour
147 | datasetFill : true,
148 |
149 | //Boolean - Whether to animate the chart
150 | animation : true,
151 |
152 | //Number - Number of animation steps
153 | animationSteps : 60,
154 |
155 | //String - Animation easing effect
156 | animationEasing : "easeOutQuart",
157 |
158 | //Function - Fires when the animation is complete
159 | onAnimationComplete : null
160 |
161 | }Bar chart
166 |Introduction
167 |A bar chart is a way of showing data as bars.
168 |It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
169 |Example usage
170 | 171 |new Chart(ctx).Bar(data,options);Data structure
173 |var data = {
174 | labels : ["January","February","March","April","May","June","July"],
175 | datasets : [
176 | {
177 | fillColor : "rgba(220,220,220,0.5)",
178 | strokeColor : "rgba(220,220,220,1)",
179 | data : [65,59,90,81,56,55,40]
180 | },
181 | {
182 | fillColor : "rgba(151,187,205,0.5)",
183 | strokeColor : "rgba(151,187,205,1)",
184 | data : [28,48,40,19,96,27,100]
185 | }
186 | ]
187 | }The bar chart has the a very similar data structure to the line chart, and has an array of datasets, each with colours and an array of data. Again, colours are in CSS format.
189 |We have an array of labels too for display. In the example, we are showing the same data as the previous line chart example.
190 | 191 |Chart options
192 |Bar.defaults = {
193 |
194 | //Boolean - If we show the scale above the chart data
195 | scaleOverlay : false,
196 |
197 | //Boolean - If we want to override with a hard coded scale
198 | scaleOverride : false,
199 |
200 | //** Required if scaleOverride is true **
201 | //Number - The number of steps in a hard coded scale
202 | scaleSteps : null,
203 | //Number - The value jump in the hard coded scale
204 | scaleStepWidth : null,
205 | //Number - The scale starting value
206 | scaleStartValue : null,
207 |
208 | //String - Colour of the scale line
209 | scaleLineColor : "rgba(0,0,0,.1)",
210 |
211 | //Number - Pixel width of the scale line
212 | scaleLineWidth : 1,
213 |
214 | //Boolean - Whether to show labels on the scale
215 | scaleShowLabels : true,
216 |
217 | //Interpolated JS string - can access value
218 | scaleLabel : "<%=value%>",
219 |
220 | //String - Scale label font declaration for the scale label
221 | scaleFontFamily : "'Arial'",
222 |
223 | //Number - Scale label font size in pixels
224 | scaleFontSize : 12,
225 |
226 | //String - Scale label font weight style
227 | scaleFontStyle : "normal",
228 |
229 | //String - Scale label font colour
230 | scaleFontColor : "#666",
231 |
232 | ///Boolean - Whether grid lines are shown across the chart
233 | scaleShowGridLines : true,
234 |
235 | //String - Colour of the grid lines
236 | scaleGridLineColor : "rgba(0,0,0,.05)",
237 |
238 | //Number - Width of the grid lines
239 | scaleGridLineWidth : 1,
240 |
241 | //Boolean - If there is a stroke on each bar
242 | barShowStroke : true,
243 |
244 | //Number - Pixel width of the bar stroke
245 | barStrokeWidth : 2,
246 |
247 | //Number - Spacing between each of the X value sets
248 | barValueSpacing : 5,
249 |
250 | //Number - Spacing between data sets within X values
251 | barDatasetSpacing : 1,
252 |
253 | //Boolean - Whether to animate the chart
254 | animation : true,
255 |
256 | //Number - Number of animation steps
257 | animationSteps : 60,
258 |
259 | //String - Animation easing effect
260 | animationEasing : "easeOutQuart",
261 |
262 | //Function - Fires when the animation is complete
263 | onAnimationComplete : null
264 |
265 | }Radar chart
270 |Introduction
271 |A radar chart is a way of showing multiple data points and the variation between them.
272 |They are often useful for comparing the points of two or more different data sets
273 |Example usage
274 | 275 |new Chart(ctx).Radar(data,options);Data structure
277 |var data = {
278 | labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
279 | datasets : [
280 | {
281 | fillColor : "rgba(220,220,220,0.5)",
282 | strokeColor : "rgba(220,220,220,1)",
283 | pointColor : "rgba(220,220,220,1)",
284 | pointStrokeColor : "#fff",
285 | data : [65,59,90,81,56,55,40]
286 | },
287 | {
288 | fillColor : "rgba(151,187,205,0.5)",
289 | strokeColor : "rgba(151,187,205,1)",
290 | pointColor : "rgba(151,187,205,1)",
291 | pointStrokeColor : "#fff",
292 | data : [28,48,40,19,96,27,100]
293 | }
294 | ]
295 | }For a radar chart, usually you will want to show a label on each point of the chart, so we include an array of strings that we show around each point in the chart. If you do not want this, you can either not include the array of labels, or choose to hide them in the chart options.
297 |For the radar chart data, we have an array of datasets. Each of these is an object, with a fill colour, a stroke colour, a colour for the fill of each point, and a colour for the stroke of each point. We also have an array of data values.
298 | 299 |Chart options
300 |Radar.defaults = {
301 |
302 | //Boolean - If we show the scale above the chart data
303 | scaleOverlay : false,
304 |
305 | //Boolean - If we want to override with a hard coded scale
306 | scaleOverride : false,
307 |
308 | //** Required if scaleOverride is true **
309 | //Number - The number of steps in a hard coded scale
310 | scaleSteps : null,
311 | //Number - The value jump in the hard coded scale
312 | scaleStepWidth : null,
313 | //Number - The centre starting value
314 | scaleStartValue : null,
315 |
316 | //Boolean - Whether to show lines for each scale point
317 | scaleShowLine : true,
318 |
319 | //String - Colour of the scale line
320 | scaleLineColor : "rgba(0,0,0,.1)",
321 |
322 | //Number - Pixel width of the scale line
323 | scaleLineWidth : 1,
324 |
325 | //Boolean - Whether to show labels on the scale
326 | scaleShowLabels : false,
327 |
328 | //Interpolated JS string - can access value
329 | scaleLabel : "<%=value%>",
330 |
331 | //String - Scale label font declaration for the scale label
332 | scaleFontFamily : "'Arial'",
333 |
334 | //Number - Scale label font size in pixels
335 | scaleFontSize : 12,
336 |
337 | //String - Scale label font weight style
338 | scaleFontStyle : "normal",
339 |
340 | //String - Scale label font colour
341 | scaleFontColor : "#666",
342 |
343 | //Boolean - Show a backdrop to the scale label
344 | scaleShowLabelBackdrop : true,
345 |
346 | //String - The colour of the label backdrop
347 | scaleBackdropColor : "rgba(255,255,255,0.75)",
348 |
349 | //Number - The backdrop padding above & below the label in pixels
350 | scaleBackdropPaddingY : 2,
351 |
352 | //Number - The backdrop padding to the side of the label in pixels
353 | scaleBackdropPaddingX : 2,
354 |
355 | //Boolean - Whether we show the angle lines out of the radar
356 | angleShowLineOut : true,
357 |
358 | //String - Colour of the angle line
359 | angleLineColor : "rgba(0,0,0,.1)",
360 |
361 | //Number - Pixel width of the angle line
362 | angleLineWidth : 1,
363 |
364 | //String - Point label font declaration
365 | pointLabelFontFamily : "'Arial'",
366 |
367 | //String - Point label font weight
368 | pointLabelFontStyle : "normal",
369 |
370 | //Number - Point label font size in pixels
371 | pointLabelFontSize : 12,
372 |
373 | //String - Point label font colour
374 | pointLabelFontColor : "#666",
375 |
376 | //Boolean - Whether to show a dot for each point
377 | pointDot : true,
378 |
379 | //Number - Radius of each point dot in pixels
380 | pointDotRadius : 3,
381 |
382 | //Number - Pixel width of point dot stroke
383 | pointDotStrokeWidth : 1,
384 |
385 | //Boolean - Whether to show a stroke for datasets
386 | datasetStroke : true,
387 |
388 | //Number - Pixel width of dataset stroke
389 | datasetStrokeWidth : 2,
390 |
391 | //Boolean - Whether to fill the dataset with a colour
392 | datasetFill : true,
393 |
394 | //Boolean - Whether to animate the chart
395 | animation : true,
396 |
397 | //Number - Number of animation steps
398 | animationSteps : 60,
399 |
400 | //String - Animation easing effect
401 | animationEasing : "easeOutQuart",
402 |
403 | //Function - Fires when the animation is complete
404 | onAnimationComplete : null
405 |
406 | }Polar area chart
411 |Introduction
412 |Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
413 |This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
414 |Example usage
415 | 416 |new Chart(ctx).PolarArea(data,options);Data structure
418 |var data = [
419 | {
420 | value : 30,
421 | color: "#D97041"
422 | },
423 | {
424 | value : 90,
425 | color: "#C7604C"
426 | },
427 | {
428 | value : 24,
429 | color: "#21323D"
430 | },
431 | {
432 | value : 58,
433 | color: "#9D9B7F"
434 | },
435 | {
436 | value : 82,
437 | color: "#7D4F6D"
438 | },
439 | {
440 | value : 8,
441 | color: "#584A5E"
442 | }
443 | ]As you can see, for the chart data you pass in an array of objects, with a value and a colour. The value attribute should be a number, while the color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
Chart options
446 |These are the default chart options. By passing in an object with any of these attributes, Chart.js will merge these objects and the graph accordingly. Explanations of each option are commented in the code below.
447 |PolarArea.defaults = {
448 |
449 | //Boolean - Whether we show the scale above or below the chart segments
450 | scaleOverlay : true,
451 |
452 | //Boolean - If we want to override with a hard coded scale
453 | scaleOverride : false,
454 |
455 | //** Required if scaleOverride is true **
456 | //Number - The number of steps in a hard coded scale
457 | scaleSteps : null,
458 | //Number - The value jump in the hard coded scale
459 | scaleStepWidth : null,
460 | //Number - The centre starting value
461 | scaleStartValue : null,
462 |
463 | //Boolean - Show line for each value in the scale
464 | scaleShowLine : true,
465 |
466 | //String - The colour of the scale line
467 | scaleLineColor : "rgba(0,0,0,.1)",
468 |
469 | //Number - The width of the line - in pixels
470 | scaleLineWidth : 1,
471 |
472 | //Boolean - whether we should show text labels
473 | scaleShowLabels : true,
474 |
475 | //Interpolated JS string - can access value
476 | scaleLabel : "<%=value%>",
477 |
478 | //String - Scale label font declaration for the scale label
479 | scaleFontFamily : "'Arial'",
480 |
481 | //Number - Scale label font size in pixels
482 | scaleFontSize : 12,
483 |
484 | //String - Scale label font weight style
485 | scaleFontStyle : "normal",
486 |
487 | //String - Scale label font colour
488 | scaleFontColor : "#666",
489 |
490 | //Boolean - Show a backdrop to the scale label
491 | scaleShowLabelBackdrop : true,
492 |
493 | //String - The colour of the label backdrop
494 | scaleBackdropColor : "rgba(255,255,255,0.75)",
495 |
496 | //Number - The backdrop padding above & below the label in pixels
497 | scaleBackdropPaddingY : 2,
498 |
499 | //Number - The backdrop padding to the side of the label in pixels
500 | scaleBackdropPaddingX : 2,
501 |
502 | //Boolean - Stroke a line around each segment in the chart
503 | segmentShowStroke : true,
504 |
505 | //String - The colour of the stroke on each segement.
506 | segmentStrokeColor : "#fff",
507 |
508 | //Number - The width of the stroke value in pixels
509 | segmentStrokeWidth : 2,
510 |
511 | //Boolean - Whether to animate the chart or not
512 | animation : true,
513 |
514 | //Number - Amount of animation steps
515 | animationSteps : 100,
516 |
517 | //String - Animation easing effect.
518 | animationEasing : "easeOutBounce",
519 |
520 | //Boolean - Whether to animate the rotation of the chart
521 | animateRotate : true,
522 |
523 | //Boolean - Whether to animate scaling the chart from the centre
524 | animateScale : false,
525 |
526 | //Function - This will fire when the animation of the chart is complete.
527 | onAnimationComplete : null
528 | }Pie chart
532 |Introduction
533 |Pie charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows a the proportional value of each piece of data.
534 |They are excellent at showing the relational proportions between data.
535 |Example usage
536 | 537 |new Chart(ctx).Pie(data,options);Data structure
539 |var data = [
540 | {
541 | value: 30,
542 | color:"#F38630"
543 | },
544 | {
545 | value : 50,
546 | color : "#E0E4CC"
547 | },
548 | {
549 | value : 100,
550 | color : "#69D2E7"
551 | }
552 | ]For a pie chart, you must pass in an array of objects with a value and a color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
Chart options
555 |These are the default options for the Pie chart. Pass in an object with any of these attributes to override them. 556 |
Pie.defaults = {
557 | //Boolean - Whether we should show a stroke on each segment
558 | segmentShowStroke : true,
559 |
560 | //String - The colour of each segment stroke
561 | segmentStrokeColor : "#fff",
562 |
563 | //Number - The width of each segment stroke
564 | segmentStrokeWidth : 2,
565 |
566 | //Boolean - Whether we should animate the chart
567 | animation : true,
568 |
569 | //Number - Amount of animation steps
570 | animationSteps : 100,
571 |
572 | //String - Animation easing effect
573 | animationEasing : "easeOutBounce",
574 |
575 | //Boolean - Whether we animate the rotation of the Pie
576 | animateRotate : true,
577 |
578 | //Boolean - Whether we animate scaling the Pie from the centre
579 | animateScale : false,
580 |
581 | //Function - Will fire on animation completion.
582 | onAnimationComplete : null
583 | }Doughnut chart
587 |Introduction
588 |Doughnut charts are similar to pie charts, however they have the centre cut out, and are therefore shaped more like a doughnut than a pie!
589 |They are aso excellent at showing the relational proportions between data.
590 |Example usage
591 | 592 |new Chart(ctx).Doughnut(data,options);Data structure
594 |var data = [
595 | {
596 | value: 30,
597 | color:"#F7464A"
598 | },
599 | {
600 | value : 50,
601 | color : "#E2EAE9"
602 | },
603 | {
604 | value : 100,
605 | color : "#D4CCC5"
606 | },
607 | {
608 | value : 40,
609 | color : "#949FB1"
610 | },
611 | {
612 | value : 120,
613 | color : "#4D5360"
614 | }
615 |
616 | ]For a doughnut chart, you must pass in an array of objects with a value and a color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
Chart options
619 |These are the default options for the doughnut chart. Pass in an object with any of these attributes to override them. 620 |
Doughnut.defaults = {
621 | //Boolean - Whether we should show a stroke on each segment
622 | segmentShowStroke : true,
623 |
624 | //String - The colour of each segment stroke
625 | segmentStrokeColor : "#fff",
626 |
627 | //Number - The width of each segment stroke
628 | segmentStrokeWidth : 2,
629 |
630 | //The percentage of the chart that we cut out of the middle.
631 | percentageInnerCutout : 50,
632 |
633 | //Boolean - Whether we should animate the chart
634 | animation : true,
635 |
636 | //Number - Amount of animation steps
637 | animationSteps : 100,
638 |
639 | //String - Animation easing effect
640 | animationEasing : "easeOutBounce",
641 |
642 | //Boolean - Whether we animate the rotation of the Doughnut
643 | animateRotate : true,
644 |
645 | //Boolean - Whether we animate scaling the Doughnut from the centre
646 | animateScale : false,
647 |
648 | //Function - Will fire on animation completion.
649 | onAnimationComplete : null
650 | }General issues
654 |Chart interactivity
655 |If you are looking to add interaction as a layer to charts, Chart.js is not the library for you. A better option would be using SVG, as this will let you attach event listeners to any of the elements in the chart, as these are all DOM nodes.
656 |Chart.js uses the canvas element, which is a single DOM node, similar in characteristics to a static image. This does mean that it has a wider scope for compatibility, and less memory implications than SVG based charting solutions. The canvas element also allows for saving the contents as a base 64 string, allowing saving the chart as an image.
657 |In SVG, all of the lines, data points and everything you see is a DOM node. As a result of this, complex charts with a lot of intricacies, or many charts on the page will often see dips in performance when scrolling or generating the chart, especially when there are multiple on the page. SVG also has relatively poor mobile support, with Android not supporting SVG at all before version 3.0, and iOS before 5.0. (caniuse.com/svg-html5).
658 |Browser support
659 |Browser support for the canvas element is available in all modern & major mobile browsers (caniuse.com/canvas).
660 |For IE8 & below, I would recommend using the polyfill ExplorerCanvas - available at https://code.google.com/p/explorercanvas/. It falls back to Internet explorer's format VML when canvas support is not available. Example use:
661 |<head>
662 | <!--[if lte IE 8]>
663 | <script src="excanvas.js"></script>
664 | <![endif]-->
665 | </head>Usually I would recommend feature detection to choose whether or not to load a polyfill, rather than IE conditional comments, however in this case, VML is a Microsoft proprietary format, so it will only work in IE.
667 |Some important points to note in my experience using ExplorerCanvas as a fallback.
668 |-
669 |
- Initialise charts on load rather than DOMContentReady when using the library, as sometimes a race condition will occur, and it will result in an error when trying to get the 2d context of a canvas. 670 |
- New VML DOM elements are being created for each animation frame and there is no hardware acceleration. As a result animation is usually slow and jerky, with flashing text. It is a good idea to dynamically turn off animation based on canvas support. I recommend using the excellent Modernizr to do this. 671 |
- When declaring fonts, the library explorercanvas requires the font name to be in single quotes inside the string. For example, instead of your scaleFontFamily property being simply "Arial", explorercanvas support, use "'Arial'" instead. Chart.js does this for default values. 672 | 673 |
Bugs & issues
675 |Please report these on the Github page - at github.com/nnnick/Chart.js.
676 |New contributions to the library are welcome.
677 |License
678 |Chart.js is open source and available under the MIT license.
679 |