getting started

Basics of Creating HTML5 Charts using CanvasJS

This tutorial teaches you the basics of creating HTML5 Charts using CanvasJS with the help of interactive samples. If you know the basics of JavaScript and HTML, you are good to go. Completing this section should make you familiar with the features that are most commonly used. It will take roughly around 10 minutes to complete the tutorial.

Each topic contains explanation and a sample “code” with embedded comments that will let you understand the API better. We encourage you to edit the code as described by those comments and familiarize yourself with the API.



Basic Column Chart

Consider the following tabular data to be rendered in the form of column chart.

Fruit Sales in first Quarter
(thousand dollars)
Banana 18
Orange 29
Apple 40
Mango 34
Grape 24

Below is how a minimal basic Column Chart would look like. Here are important things to remember

  1. Instantiate a new Chart object by sending the ID of div element where the chart is to be rendered.
  2. Pass all the Chart related “options” to the constructor as the second parameter.
  3. Call chart.render() method to render the chart

Chart “options” mainly contains 4 important items.

  1. title object with its text property set.
  2. dataPoints – which is an array of all data items to be rendered
  3. dataSeries – parent of dataPoints that also defines type of chart and other series wide options
  4. data – array element which is collection of one or more dataSeries objects. Here we have only one dataSeries.

Checkout the code below – experiment and make yourself familiar with the API.

Note

Though we are going to use Column Charts to learn various concepts, it should be easy to change them into any kind of chart that you wish! Just change the type property of dataSeries to any chart type that you need – bar, area, line, scatter, stackedColum, etc.

Checkout (later) all supported chart types

Try it Yourself by Editing the Code below.


Multi Series Column Chart

Now, if you want to say compare sales of various fruits in first and second quarter of the year, you need to add one more dataSeries (with second quarter values) to the data array. Below is how it can be done.

Fruit Sales in first Quarter
(thousand dollars)
Sales in second Quarter
(thousand dollars)
Banana 18 23
Orange 29 33
Apple 40 48
Mango 34 37
Grape 24 20
Try it Yourself by Editing the Code below.


Customizing Chart

In the above chart we can do couple of customization to improve the visualization of data like

  1. Show values on y axis with $ as prefix and “K” as suffix. Same on toolTips
  2. Display Legend indicating Q1 and Q2

Adding Prefix & Suffix to values is quite simple. You can do so by adding axisY object with prefix and suffix properties set.

Legend can be displayed by setting showInLegend property in dataSeries to true

Below is how it would look like with above properties set. Intentionally the Title has not been set in Axis X and Axis Y. You can do so by setting the title property of axisY or axisX objects.

Try it Yourself by Editing the Code below.


Changing Chart Theme

CanvasJS comes with built in themes that change the look and feel of charts. Current version supports two different themes – “theme1″ and “theme2″. We’ll be adding more themes soon.

You change theme by setting theme property of chart option to any of the available themes. Below is an example

Try it Yourself by Editing the Code below.


Alternate way of setting / updating data (Available since v1.3)

Above examples show how you can pass data to the constructor while instantiating a chart object. But you can also set these options after creating the object – sometimes it is easier this way.

Options object that you pass to the constructor in the above method can be accessed via options property of chart. Using the same object you can set or update various properties of chart as below.

chart.option.title.text = "Chart Title";
chart.options.data = [array];
chart.options.data[0] = {object};
chart.options.data[0].dataPoints = [array];
Try it Yourself by Editing the Code below.


More Customization

In case you have to do any more customization, below is a table that lists important objects and properties that allow you to do so. Do try out all these options on the above chart.

Customization Object Property
Set Chart Title Size title fontSize – 12,13,14, etc.
Set Chart Title Color title fontColor – red, blue, green, etc
Show Axis Y line axisY lineThickness – 0, 1, 2, etc.
Show value (indexLabels)
on top of Column / Bar
dataSeries indexLabel – “{y}”, “${y}K”, “any text”
Set Axis X label angle axisX labelAngle – 30, 45, 90, etc


Comments 37

  1. Hi Team,

    Many congratulation on achieving this milestone. My query is, how can I load data or provide the input values for graph from a JSON object or a XML file because I will never like to create an array of data and when i speak about data I am referring to many many (dynamic) values generated on various calculation based on my metrics dashboard formulas.

    Regards,
    Rahul Khanna

  2. Pingback: Beautiful HTML5 Charts

    • It is not possible to change the label itself into links. But you can use click event of dataPoint to take user to the corresponding page when clicked.

      In that case you might also want to use “cursor” property of dataSeries/dataPoint to change mouse pointer type.

  3. My requirement is the same as Rahul Khanna, want to see an example that reads a JSON file and the values ​​are plotted. thanks

    • As of now CanvasJS doesn’t have a way to directly plot from the data inside a file. As such you need to read those values and assign the same to the chart.

    • CanvasJS is just a rendering library that draws charts on the client side. Hence you will have to write server side code to connect with any database and use CanvasJS on the client side and it’ll work fine.

  4. In the code I attached the problem is that column 1 and column 3 is not plotted. As if the value of these variables are not considered numeric by CANVASJS. For that reason handle it like this:

    stnetomax var = parseFloat (VPSs [6]);

    but it did not work

    I would appreciate your help.

    MY CODE

    window.onload = function() {
    ///////////////////////////////////////////////////
    CODE……………………………………….
    …………………………………………..

    var psañomax = vpss[1];
    var strecibomax = parseFloat(vpss[2]);
    var stimportemax = parseFloat(vpss[3]);
    var stimpmax = parseFloat(vpss[4]);
    var stbonmax = 12385583;
    var stnetomax = parseFloat(vpss[6]);
    //////////////////////////////////////////////

    var chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “Concepto:” + psconnom + ” ” + psconnum // SHOW OK
    },

    data: [
    {

    type: "column",
    name: "Año Mayor " + psañomax, // SHOW OK
    showInLegend: true,
    dataPoints: [
    { label: "Columna 1 ", y: stimpmax }, // NO SHOW << Here is the problem
    { label: "Columna 2 ", y: stbonmax }, // SHOW OK
    { label: "Columna 3 ", y: stnetomax },// NO SHOW << Here is the problem
    { label: "Columna 4 ", y: 101558923 } // SHOW OK
    ]
    },

    • I discovered that I had an error.
      In my code in the object chart I have several DataSeries and only the first DataSeries variables was turning to float with parseFloat. Replace all variables with parseFloat and work.
      It works and looks good!!.

    • Chart requires x & y values to be numbers – enclosing them in quotes creates prolems while doing calculations internally. Glad you figured it out.

  5. Hi Sunil.

    Newbie perspective here for an already great tutorial. The following sentences need to be described (also) in plain English:

    “Above examples show how you can pass data to the constructor while instantiating a chart object. But you can also set these options after creating the object – sometimes it is easier this way. Options object that you pass to the constructor in the above method can be accessed via options property of chart. Using the same object you can set or update various properties of chart as below.”

    What is a constructor?… What is the benefit of the one approach vs the other?… the “easier this way” part?… Easier in what regard?

    Keep up the great work!

    Bowo

  6. Pingback: CanvasJS Charts v1.3 goes GA

  7. Hi is possible change width of existing chart? Do you plan to add some option like conditionaly hide legend depending on width? Parent container follows resize event so i can simply set width/height option.

  8. I pasted the HTML code and tried to open the file in my browser…But the chart is not displayed on the Browser.

    Do I have to make any changes to the code to run in Chrome

    Thanks
    Manoj Shetty

  9. Hey – this looks great. Could you put the initial code somewhere else than in between the tags?

    For example, if I wanted to create a chart within a blog post I may not have access to the , could I put all the code I need within the post itself?

    Thanks!

  10. Pingback: AngularJS Charts with CanvasJS | Matt Smith Blog

  11. Mine is basic question how can i run file normally means where to save file with what extension and what libraries i’ll need for execution?

Leave a Reply