Chart.js – A Sleek, Simple, clean and engaging HTML5 based charts for designers and developers

Feb 14, 2015 | jQuery Charts / Graphs Plotting, UI/UX Designs & Layout, Utilities & Plug-ins | 0 comments

Chart.js – A Sleek, Simple, clean and engaging HTML5 based charts for designers and developers

Chart.js | Open source HTML5 Charts for your website

Everything you need to know to build great looking charts using Chart.js

Six chart types

  1. Bar Chart
  2. Radar Chart
  3. Polar Area Chart
  4. Pie Chart
  5. Doughnut Chart

Visualize your data in 6 different ways. Each of them animated, with a load of customisation options and interactivity extensions.

HTML5 based

<canvas>

Chart.js uses the HTML5 canvas element. It’s supported in all modern browsers, and polyfills support for IE7/8.

Simple and flexible

Chart.js is dependency free and super lightweight. All six core chart types are only 11.01kb when minified, concatenated and served gzipped.

Responsive new

Artboard 1

Chart.js will resize your chart if the browser changes size, along with providing the perfect scale granularity for that size

Modular new

  • Core
  • Bar
  • Doughnut
  • Radar
  • Line
  • Polar Area

Chart.js is modular, and each of the chart types have been split up, so you can load only which chart types you need for your project

Interactive new

Chart.js provides default simple support for canvas tooltips on hover/touch, but you can extend chart interactions to trigger events in your application

 

Chart.js | Documentation//

Creating a chart

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.

<canvas id="myChart" width="400" height="400"></canvas>
// Get the context of the canvas element we want to selectvar ctx = document.getElementById("myChart").getContext("2d");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.var ctx = $("#myChart").get(0).getContext("2d");// This will get the first returned node in the jQuery collection.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.

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.

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 global defaults with chart type specific defaults, then merge any options passed in as a second argument after data.

Global chart configuration

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.

Chart.defaults.global = {    // Boolean - Whether to animate the chart    animation: true,    // Number - Number of animation steps    animationSteps: 60,    // String - Animation easing effect    animationEasing: "easeOutQuart",    // Boolean - If we should show the scale at all    showScale: true,    // Boolean - If we want to override with a hard coded scale    scaleOverride: false,    // ** Required if scaleOverride is true **    // Number - The number of steps in a hard coded scale    scaleSteps: null,    // Number - The value jump in the hard coded scale    scaleStepWidth: null,    // Number - The scale starting value    scaleStartValue: null,    // String - Colour of the scale line    scaleLineColor: "rgba(0,0,0,.1)",    // Number - Pixel width of the scale line    scaleLineWidth: 1,    // Boolean - Whether to show labels on the scale    scaleShowLabels: true,    // Interpolated JS string - can access value    scaleLabel: "<%=value%>",    // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there    scaleIntegersOnly: true,    // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value    scaleBeginAtZero: false,    // String - Scale label font declaration for the scale label    scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",    // Number - Scale label font size in pixels    scaleFontSize: 12,    // String - Scale label font weight style    scaleFontStyle: "normal",    // String - Scale label font colour    scaleFontColor: "#666",    // Boolean - whether or not the chart should be responsive and resize when the browser does.    responsive: false,    // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container    maintainAspectRatio: true,    // Boolean - Determines whether to draw tooltips on the canvas or not    showTooltips: true,    // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))    customTooltips: false,    // Array - Array of string names to attach tooltip events    tooltipEvents: ["mousemove", "touchstart", "touchmove"],    // String - Tooltip background colour    tooltipFillColor: "rgba(0,0,0,0.8)",    // String - Tooltip label font declaration for the scale label    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",    // Number - Tooltip label font size in pixels    tooltipFontSize: 14,    // String - Tooltip font weight style    tooltipFontStyle: "normal",    // String - Tooltip label font colour    tooltipFontColor: "#fff",    // String - Tooltip title font declaration for the scale label    tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",    // Number - Tooltip title font size in pixels    tooltipTitleFontSize: 14,    // String - Tooltip title font weight style    tooltipTitleFontStyle: "bold",    // String - Tooltip title font colour    tooltipTitleFontColor: "#fff",    // Number - pixel width of padding around tooltip text    tooltipYPadding: 6,    // Number - pixel width of padding around tooltip text    tooltipXPadding: 6,    // Number - Size of the caret on the tooltip    tooltipCaretSize: 8,    // Number - Pixel radius of the tooltip border    tooltipCornerRadius: 6,    // Number - Pixel offset from point x to tooltip edge    tooltipXOffset: 10,    // String - Template string for single tooltips    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",    // String - Template string for multiple tooltips    multiTooltipTemplate: "<%= value %>",    // Function - Will fire on animation progression.    onAnimationProgress: function(){},    // Function - Will fire on animation completion.    onAnimationComplete: function(){}}

If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:

Chart.defaults.global.responsive = true;

Now, every time we create a chart, options.responsive will be true.

 

 

 

Source: https://github.com/nnnick/Chart.js

Documentation: http://www.chartjs.org/docs/#getting-started-creating-a-chart

 

 

Thanks,
NabeelShahid.com

Submit a Comment

Your email address will not be published. Required fields are marked *