Pages

QuickStart: Your First Chart in under 5 minutes

Ready to create your first chart locally on your system using CanvasJS ?

The above code template can be used to create various types of charts. Follow the steps below to get started.

Copy the code template above and save it locally as HTML file

Run the saved HTML file.
You will see the above chart running on your machine.

Now change the type parameter to “doughnut”.

Save the changes and run it again.
Voilà! You just created a doughnut chart.

Now, try changing the type to various other chart types like “splineArea”, “bar”, etc… and let CanvasJS do its magic.

So easy, right?!
Next Step: Go through the tutorial below to start building incredibly high performance charts easily using CanvasJS. It teaches you the basics of creating HTML5 Javascript Charts with the help of interactive samples.

We encourage you to edit the code as described in the 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

Instantiate a new Chart object by sending the ID of div element where the chart is to be rendered. You can also pass DOM element instead of ID

Pass all the Chart related “options” to the constructor as the second parameter.

Call chart.render() method to render the chart

Chart “options” mainly contains 4 important items.

title object with its text property set.

dataPoints – which is an array of all data items to be rendered

dataSeries – parent of dataPoints that also defines type of chart and other series wide options

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.

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

Show values on y axis with $ as prefix and “K” as suffix. Same on toolTips

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 – like “light1”, “light2”, “dark1”, “dark2”.

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

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.

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.

Thank you very much… CanvasJS takes data in the form of JSON only. You basically need to transform your JSON data into a format supported by CanvasJS. Here is an example where we generate random data in a loop and assign it to the chart. Look at this example.

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.

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!!.

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?

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.

I was unable to give a json format like [{“label”:”First”,”y”:”12″},{“label”:”Second”,”y”:”1″}] in column chart is that a bug or anywere i made mistake in formatting the JSON. But with the same format i can plot pie and doughnut charts. Help me with the issue. Thanking you.

Hi Sir,
We are Developing Our Project. we are Choose canvasjs. Some specification’s are very must for use canvasjs.We want to have using canvasjs spline type chart how to put dynamic data from sql server database on normal Asp.net C# and in display Mouse Cursor point will be shown in any area in the chart ist Possible to show?

We are waiting for more the 20 more days to database connectivity for Normal Asp.net C# Did not get any reference from any Site Please Help Us……

I want to set max level upto 100, The maximum line not below or more than 100 . eg I want to seen % of mark of an student. Which max level 100 and each level of 10 increase value.
100
90
80
70
60
..
..
0

If student have 100% then one more line add in graph which i dont want (150) ..Please help me on that .

I have been working with canvas js recently , its really good plugin , saves a lot of time ,
i wanted to know if in pie chart , when i place the index labels outside , can i change the length of those
line connectors that connects indexlabels to its equivalent area on the on the circle ?

Do you mean to say toolTip(bubbles)? If yes, you can do the same by setting enabled property of toolTip to false. You can disable labels by setting valueFormatString to ” ” as shown in this example – make sure that dataPoints don’t have label property assigned.

I have return on line with live update for every 10 sec and it is working fine. But the problem is when I have open the chart application as background tab and when I try to open that tab the browser getting hanged. Is their any solution for this.

You can instantiate a new Chart object by sending the ID of div element where the chart is to be rendered. You can also pass DOM element instead of ID.
Here is the jsFiddle to render charts based on class name.

Hi,
I am using the column chart, but when there is more than 10 bars in the chart it does not show all the label. it shows all the bars but half of them with no labels. how can i force it to show all the labels.
Thanks.

Absolutely, it is possible with CanvasJS!!
First you take the values into two datapoints from the two files using Ajax, then you can pass the datapoints as elements in the data array for the chart. Simple.

I have looked into this Vishwas, I think, I could use axisT stripLines as a final resort, but it’s tricky, we have dynamic charts, so we can range data from 0-100, to -40k to +40k, so to calculate the size of the stripLine would be really tricky.

So we could have a graph from -10 to 100, and have the stripline as start: -0.5, end: 0.5, then it looks fine, but on a large graph with big numbers, this line isn’t even noticeable. So then the stripLine would need to be like, -100, to 100.

I’m interested in your graphs sir .. I would like to ask for some help on how to incorporate those graphs with a sql database .. i always had problems in fetching the json file and the graph wont show .. please help ..

Using connectionRead As New SqlConnection(ConfigurationManager.ConnectionStrings(“StoreLocationsConnectionString”).ConnectionString)
Dim commandRead As New SqlCommand(queryString, connectionRead)
connectionRead.Open()
Dim reader As SqlDataReader = commandRead.ExecuteReader()
If reader.HasRows Then
Do While reader.Read

I am using it to visualize throughput of web sockets. With CanvasJS I am able to show hundreds of data pints on primary and secondary axis in real time.
Whatever I touch in this application it never cease to amaze me.

Thank you for providing this masterpiece of application and great documentation!

I saved on of the examples as a html file to run on my computer but it doesn’t seem to work. Could someone explain to me why? So that I can know how to run the graphs i create. The code I used is pasted below.

If you are using dynamic chart, by comparing the new dataPoint being added with the last dataPoint, you can change interval and intervalType. Otherwise, you can change intervalType on rangeChanging, here is an example.

I have set viewportMinimum to give some space between axis-X line and the column and it works fine. But now i need to hide the negative value because it misleads the users. Is there any way to fix it. Thanks.

Hi, Its a good js to create any type of graph.
I have a query about bar graph.
I am creating bar graph using to way.
1. number of bar is static.
2. number of bar is dynamic according to value in database

When I am creating by first way, strip lines are working correctly, but when i create graph using second way, and want to add strip line in my code, the code is not working..

Hi,I want to use bar chart to show 200 peoples’ score with attribute ” type: ’stackedBar‘ ” , but there is a problem that 200 peoples’ name cannot show on axisY. I try to make “chartContainer” div more high,so i make the height = 10000px, but the name on axisY also changed to large fontsize . Can u plz help me?
Thanks very much~