3 anchor: getting-started
8 First we need to include the Chart.js library on the page. The library occupies a global variable of `Chart`.
11 <script src="Chart.js"></script>
14 Alternatively, if you're using an AMD loader for JavaScript modules, that is also supported in the Chart.js core. Please note: the library will still occupy a global variable of `Chart`, even if it detects `define` and `define.amd`. If this is a problem, you can call `noConflict` to restore the global Chart variable to it's previous owner.
18 require(['path/to/Chartjs'], function(Chart){
19 // Use Chart.js as normal here.
21 // Chart.noConflict restores the Chart global variable to it's previous owner
22 // The function returns what was previously Chart, allowing you to reassign.
23 var Chartjs = Chart.noConflict();
28 You can also grab Chart.js using bower:
31 bower install Chart.js --save
34 Also, Chart.js is available from CDN:
36 https://cdnjs.com/libraries/chart.js
40 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.
43 <canvas id="myChart" width="400" height="400"></canvas>
47 // Get the context of the canvas element we want to select
48 var ctx = document.getElementById("myChart").getContext("2d");
49 var myNewChart = new Chart(ctx).PolarArea(data);
52 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.
55 // Get context with jQuery - using jQuery's .get() method.
56 var ctx = $("#myChart").get(0).getContext("2d");
57 // This will get the first returned node in the jQuery collection.
58 var myNewChart = new Chart(ctx);
61 After we've instantiated the Chart class on the canvas we want to draw on, Chart.js will handle the scaling for retina displays.
63 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.
66 new Chart(ctx).PolarArea(data, options);
69 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 global defaults with chart type specific defaults, then merge any options passed in as a second argument after data.
71 ###Global chart configuration
73 This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.
76 Chart.defaults.global = {
77 // Boolean - Whether to animate the chart
80 // Number - Number of animation steps
83 // String - Animation easing effect
84 // Possible effects are:
85 // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
86 // easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
87 // easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
88 // easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
89 // easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
90 // easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
91 // easeOutElastic, easeInCubic]
92 animationEasing: "easeOutQuart",
94 // Boolean - If we should show the scale at all
97 // Boolean - If we want to override with a hard coded scale
100 // ** Required if scaleOverride is true **
101 // Number - The number of steps in a hard coded scale
103 // Number - The value jump in the hard coded scale
104 scaleStepWidth: null,
105 // Number - The scale starting value
106 scaleStartValue: null,
108 // String - Colour of the scale line
109 scaleLineColor: "rgba(0,0,0,.1)",
111 // Number - Pixel width of the scale line
114 // Boolean - Whether to show labels on the scale
115 scaleShowLabels: true,
117 // Interpolated JS string - can access value
118 scaleLabel: "<%=value%>",
120 // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
121 scaleIntegersOnly: true,
123 // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
124 scaleBeginAtZero: false,
126 // String - Scale label font declaration for the scale label
127 scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
129 // Number - Scale label font size in pixels
132 // String - Scale label font weight style
133 scaleFontStyle: "normal",
135 // String - Scale label font colour
136 scaleFontColor: "#666",
138 // Boolean - whether or not the chart should be responsive and resize when the browser does.
141 // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
142 maintainAspectRatio: true,
144 // Boolean - Determines whether to draw tooltips on the canvas or not
147 // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
148 customTooltips: false,
150 // Array - Array of string names to attach tooltip events
151 tooltipEvents: ["mousemove", "touchstart", "touchmove"],
153 // String - Tooltip background colour
154 tooltipFillColor: "rgba(0,0,0,0.8)",
156 // String - Tooltip label font declaration for the scale label
157 tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
159 // Number - Tooltip label font size in pixels
162 // String - Tooltip font weight style
163 tooltipFontStyle: "normal",
165 // String - Tooltip label font colour
166 tooltipFontColor: "#fff",
168 // String - Tooltip title font declaration for the scale label
169 tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
171 // Number - Tooltip title font size in pixels
172 tooltipTitleFontSize: 14,
174 // String - Tooltip title font weight style
175 tooltipTitleFontStyle: "bold",
177 // String - Tooltip title font colour
178 tooltipTitleFontColor: "#fff",
180 // Number - pixel width of padding around tooltip text
183 // Number - pixel width of padding around tooltip text
186 // Number - Size of the caret on the tooltip
189 // Number - Pixel radius of the tooltip border
190 tooltipCornerRadius: 6,
192 // Number - Pixel offset from point x to tooltip edge
195 // String - Template string for single tooltips
196 tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
198 // String - Template string for multiple tooltips
199 multiTooltipTemplate: "<%= value %>",
201 // Function - Will fire on animation progression.
202 onAnimationProgress: function(){},
204 // Function - Will fire on animation completion.
205 onAnimationComplete: function(){}
209 If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:
212 Chart.defaults.global.responsive = true;
215 Now, every time we create a chart, `options.responsive` will be `true`.