A Beginner’s Guide to Dojo Charting, Part 2 of 2

By on June 16, 2008 12:06 am

Part 1 of this guide on Dojo charting covered a basic charting example and the options available in defining our chart type. Today we will examine the options for defining our axes and data sets.

Accessing the Axis

The addAxis() call on a chart has several options for defining axes. Similar to addPlot(), this call takes 2 parameters, a name and an options array. You will need to use “x” and “y” as your axes names unless you gave them custom names in your addPlot() call. Additionally, you don’t have to define the axes if you wish to create charts with 1 or zero axes, you can also make charts with more than 2 axes by adding a second plot and attaching axes to it. Using this approach, you can display up to 4 different axes, 2 vertical and 2 horizontal, using 2 to 4 plots. Also, a single axis can be shared by more than 1 plot, meaning you could have 2 plots that use the same horizontal axis, but have different vertical axes. Let’s look at all the addPlot() options that make this and more possible.

The first option is vertical, this determines if the axis is vertical or horizontal, it defaults to false for a horizontal axis. Make sure that your alignment matches with values set for hAxis and vAxis, which are “x” and “y” by default, on your plot or your chart will not render.

chart1.addPlot("default", {type: "Lines", hAxis: "x", vAxis: "y"});
chart1.addAxis("y", {vertical: true});

Next we have the fixUpper and fixLower options, which align the ticks and have 4 available options; major, minor, micro, and none. These default to none, and when set will force the end bounds to align to the corresponding tick division. If none is chosen, the end bounds will be the highest and lowest values in your data set. Another related option is the includeZero option, which will make your lower bound be zero. If your lowest data value is negative the includeZero option has no effect.

chart1.addAxis("x", {fixUpper: "major", fixLower:"minor"});
chart1.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});

Now let’s examine the leftBottom option. This option defaults to true, and along with the vertical option determines the side of the chart the axis is placed. At the end of Part 1 we examined adding a second plot to our chart. Let’s use that sample and give the second plot its own set of axes and anchor them on the top and right using leftBottom.

var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {type: "Lines"});
chart1.addPlot("other", {type: "Areas", hAxis: "other x", vAxis: "other y"});
chart1.addAxis("y", {vertical: true});
chart1.addAxis("other x", {leftBottom: false});
chart1.addAxis("other y", {vertical: true, leftBottom: false});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3], 
        {plot: "other", stroke: {color:"blue"}, fill: "lightblue"}

Multiple Axes

The one thing you may have noticed is that this changes the perspective because the second data set is now charted against a different axis. You are in luck because you have full control to adjust the axis in almost every way possible. For example, you can set min and max options.

min: 0
max: 7

You can turn on and off the tick marks at the minor and micro level, and turn labels on and off for the major and minor levels

majorLabels: true
minorTicks: true
minorLabels: true
microTicks: false

There’s natural, which forces all ticks to be on natural numbers, and fixed which will fix the precision on your labels.

natural: false		
fixed: true 

If you want you can define the step between the ticks.

majorTickStep: 4
minorTickStep: 2
microTickStep: 1

You can control the color of the axis, the color and length of your tick marks and the font and color of your labels.

chart1.addAxis("other y", {vertical: true, 
	leftBottom: false, 
	max: 7,
	stroke: "green",
	font: "normal normal bold 14pt Tahoma", 
	fontColor: "red",
	majorTick: {color: "red", length: 6},
	minorTick: {stroke: "black", length: 3}

When added to our previous example, the result is:

Multiple Axes

You can also add a grid at your tick marks to your entire chart by adding a Grid plot. The grid plot allows you to turn the grid on and off for major and minor ticks in both directions, and you can assign axes names if you have multiple axes. Let’s add a grid to the other axes in our above example.

chart1.addPlot("Grid", {type: "Grid",
	hAxis: "other x",
	vAxis: "other y",
	hMajorLines: true,	
	hMinorLines: false,	
	vMajorLines: true,	
	vMinorLines: false,	

Grid Plot

Last, but not least you have the ability to assign custom labels to your axis. Make sure to allow sufficient space in your div for the text to display properly. Here is an example using abbreviated month names with a Columns plot.

chart1.addAxis("x", { 
	labels: [{value: 1, text: "Jan"}, {value: 2, text: "Feb"}, 
		{value: 3, text: "Mar"}, {value: 4, text: "Apr"}, 
		{value: 5, text: "May"}, {value: 6, text: "Jun"},
		{value: 7, text: "Jul"}, {value: 8, text: "Aug"},
		{value: 9, text: "Sep"}, {value: 10, text: "Oct"},
		{value: 11, text: "Nov"}, {value: 12, text: "Dec"}]

Month Labels

Data, it’s Series(ous) Business

Finally, we get to addSeries(), where we define the data sets that will be displayed on our chart. addSeries() accepts 3 parameters, a name, a data array and an options array. There is also an updateSeries() call that takes a name and data array for when you want to refresh your data. Let’s run through the options available in the addSeries() call, then look at the data array.

There are only a few options to cover for the addSeries() call. First up is stroke, which covers the color and width of your line or the border of your bar and column type graphs.Along with stroke we have fill, and it determines the color of the fill area under the line in area type line graphs and determines the bar fill color for bar and column type graphs. If you are familiar with SVG or dojox.gfx, stroke and fill should be very familiar.

chart1.addSeries("Series 1", [1, 2, 4, 5, 5, 7], {stroke: {color: "blue", width: 2}, 
	fill: "lightblue"});

The other option is marker and it allows you to define custom markers using SVG path segments. Here are some of marker types as defined in the Dojo Charting source code. Note that each is just defined internally as an SVG path:

CIRCLE:		"m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0", 
SQUARE:		"m-3,-3 l0,6 6,0 0,-6 z", 
DIAMOND:	"m0,-3 l3,3 -3,3 -3,-3 z", 
CROSS:		"m0,-3 l0,6 m-3,-3 l6,0", 
X:		"m-3,-3 l6,6 m0,-6 l-6,6", 
TRIANGLE:	"m-3,3 l3,-6 3,6 z", 
TRIANGLE_INVERTED:"m-3,-3 l3,6 3,-6 z"

Now take a look at these options in action using our above example:

Series Options

The only thing we have left is the data array, and it’s just that, an array of data. All plot types can accept a one dimensional array, but there are some additional format options available based on the type of chart. With a 1 dimensional array for line type graphs the X axis will be integers; 1,2,3… and the data will be the Y axis. For bar type plots the data is the length of the bar and the choice between column or bar type determines the orientation. And for pie type charts the sum of the array is your whole pie. All the plot types except pie can have multiple series.

chart1.addSeries("Series A", [1, 2, 3, 4, 5]);

For any non “stacked” line plot type you can specify coordinate pairs. You need to use keys that correspond to the hAxis and vAxis parameters defined in the addPlot() call. These default to x and y.

chart1.addSeries("Series A", [{x: 1, y: 5}, {x: 1.5, y: 1.7}, 
	{x: 2, y: 9}, {x: 5, y: 3}]);
chart1.addSeries("Series B", [{x: 3, y: 8.5}, {x: 4.2, y: 6}, {x: 5.4, y: 2}]);

Here is an example of using coordinate pairs with a scatter plot:

Coordinate Pairs

With any of the stacked plot types each data set added with addSeries() is placed relative to the previous set. Here is a simple example that shows this concept. Instead of the second data set being a straight line across at 1, all the points are 1 above the point from the first data set.

chart1.addSeries("Series 1", [1, 2, 3, 4, 5]);
chart1.addSeries("Series 2", [1, 1, 1, 1, 1], {stroke: {color: "red"}});

Stacked Data Series

For pie type charts you can specify additional information: the text label for each slice, the color of the slice and even a font color that overrides the font color definable in the addPlot() call.

chart1.addSeries("Series A", [
	{y: 4, color: "red"},
	{y: 2, color: "green"},
	{y: 1, color: "blue"},
	{y: 1, text: "Other", color: "white", fontColor: "red"}


Charting your own course

That’s it! You now know all the basics of Dojo Charting. Congratulations! If you are wondering where to go from here, I have a few suggestions. First if you are as bad with colors as I am, you will want to check out charting themes. They are simple to use with your charts, just call setTheme(). There are a handful available and pretty straight forward if you want to make your own.


You’ll also want to check out Eugene’s posts on the new Dojo 1.2 Charting features, including scrolling and zooming, charting events and widgets, tooltips, and legend.

Have fun!


  • farouk

    Can you show an example of how json from the server can be used as the series or how to get the series from a server

    also is the tutorial on this page good? looks outdated but i’m not sure since it kind of seem to do what i want to do


  • Bill Spornitz

    The series values are simply data in an array.

    str = “{values: [1,2,3,4,5]}”;

    //using prototype
    obj = str.evalJSON();

    //the array is then referenced by:
    chart1.addSeries(“Series 1”, obj.values);

  • Joe

    Hi this article is a good start for the beginners;
    I am facing a problem when trying to use StackedColumns ,I can see only vertical columns but not stacked ones with StackedColumns.

  • Hello.

    I’m working with dojo 1.2 release, and the tick color and length options doesnot seem to work anymore. I tried it on the test_chart2D example.I will fill a ticket against it, but could you confirm it to me ?


  • @rdunklau: please open a defect ticket against Charting, and attach a minimalistic test case demonstrating the problem.

  • lbarlow

    Hi –

    Thanks for these great articles.

    I have a question about the example graph on tutorial 7 (the bar graph with the months on the x-axis) – when you click on it to take you to the actual graph, none of the labels except “Oct” show up.

    Is this happening with everyone? I’m currently using dojo v1.2.0, and am experiencing the same thing in my code. Once the number of major ticks on the x-axis is greater than 10, I lose all of my labels except for the 10th one and all minor tick marks.

    (increasing the width of the graph has no affect)

    I experience this in both IE and FF.


  • Stacy

    I have a question on markers. Currently they are displaying as the same color as the line (on a line chart). Is it possible to change the color of the marker? I’m looking to use black markers with colored lines.

  • @lbarlow: it depends on font metrics on your local computer. Basically algorithm works like this: major ticks are always labeled, minor ticks can be labeled if possible (not possible in your case, because they will overlap), micro ticks are never labeled. In order to always show labels (like in this example) you should specify major tick steps go with interval 1, otherwise they will be selected automatically (10 in this particular case, that’s why you see “Oct” — the 10th month). You can specify stepping by adding “majorTickStep: 1” to the parameters of an axis when you create it.

  • @Stacy: currently it is not supported. If you feel strongly that we need it, please file an enhancement ticket against Charting for that (all info is here: http://dojotoolkit.org/community, go to Forums to register there, after that go to the Trac and enter you ticket).

  • May


    I’m just new in using dojo. I’ve already tried what you’ve said to add majorTickStep: 1 to show all the labels but it still doesn’t work.

    Your help would be greatly appreciated.


  • lbarlow


    I had actually tried assigning all kinds of attributes (like majorTickStep:1, as you suggested) but whenever I added the extra attributes, my labels always disappeared.

    I just now realized that I was adding the labels as an extra parameter.

    So instead of:
    chart1.addAxis(“x”, {majorTickStep:1,
    labels: […]})

    I was doing
    chart1.addAxis(“x”, {majorTickStep:1},
    {labels: […]}) // So third param is ignored

    I noticed this by looking at the code for the monthly graph again. Now everything looks great.


  • May


    I just tried to change the series value to array but I didn’t work because evalJSON is not existing.

    str = “{values: [1,2,3,4,5]}”;

    //using prototype
    obj = str.evalJSON();

    //the array is then referenced by:
    chart1.addSeries(”Series 1″, obj.values);

    Where can I get the evalJSON function? Sorry, I’m not that familiar in javascript.


  • Marty

    Is it possible to set the color of the grid lines in a Grid plot? For example :

    chart1.addPlot( “Grid”, { type: “Grid”,
    stroke: { color: “yellow”, width: 2 }


  • @May: Most probably evalJSON() is the function defined by a different JavaScript toolkit: Prototype (http://www.prototypejs.org/). If you do want to use it, please contact them. Dojo provides its own function to convert JSON strings to objects: obj = dojo.fromJson(str). In your particular case I don’t see the need for the conversion, just assing your literal directly: obj = {values: [1, 2, 3, 4, 5]};

  • @Marty: Grid uses the same settings as the corresponding ticks of the axis it is attached to. If you want to change grid colors, just change axis’ tick colors.

  • May

    Hi Eugene,

    Thanks! i just used this obj = {values: [1, 2, 3, 4, 5]}; and it already worked.

    But I have another problem, when I open the graph in the new window, it doesn’t display the whole graph. Only half of the graph was displayed. I don’t know what’s the cause of this.

    Your help would be greatly appreciated.

    Thanks so much.

  • vikash

    Can I add a single major Label “Month” below Jan, Feb, Mar…… in the bar chart shown above

  • Nicholas

    Is there any chance of a guide on integrating charts inside layout widgets such as the TabContainer? Sishyan also asked for help with this in the first part of the guide.

  • bug

    is there a way to choose only one type of marker for different graphs? by default there is one typ of marker for each line (line 1 -> circel, line 2 -> square, etc) but I want to use circle only?!?!

  • Nicholas

    “Is there any chance of a guide on integrating charts inside layout widgets such as the TabContainer? Sishyan also asked for help with this in the first part of the guide.”

    After more investigation, it seems there is a bug which prevents charts from being drawn in tabs other than the first one.

    In the following, g1 draws but g2 does not..

    html, body, .c {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    #g1, #g2 { width: 90%; height: 90%; }

    dojo.addOnLoad(function() {
    var chart1 = new dojox.charting.Chart2D(“g1”);
    chart1.addSeries(“Series 1”, [1, 2, 3, 4, 5]);
    var chart2 = new dojox.charting.Chart2D(“g2”);
    chart2.addSeries(“Series 1”, [1, 2, 3, 4, 5]);

  • Nicholas

    Ok.. no html allowed here.. I’ll try and file a bug report..

  • JohnG

    I can’t get custom labels to work for my x axis for ClusteredColumns or StackedColumns; simply switching to StackedAreas makes the labels show up. You can see this issue by going to one of the samples above:


    Any workarounds?

  • Christoph

    Hi, it is possible to set more than one plot to a chart an to set some axes to the plots, right? If i do that and define 2 plots, with both an y-axis, the axes are rendered both at the same coordinates. Is it possible to define an offset or something like that, to be able to place two or more series with matching axes in one chart? didnt find anything about that…

  • @JohnG: works for me. Custom labels should work irrespective of the plot type. Must be some recalculations going on. Please file a bug with the minimalistic reproducible case.

  • @Christoph: it is possible to share axes — just specify the same name twice (or more) in different plots. You may want to specify a different placement for axes (like it is done in this blog post by Doug), e.g., left side vs. right side, or top vs. bottom.

  • Christoph

    @Eugene: I´d like to have two or more plots in my chart, these will have different scaling / ranges, but also should have an axis to show these different scalings. It would be possible to do that with for example 2 plots and one y-axis on the right an one on the left, but i´d like to have for example 3 y-axes on the left side with different scaling/ranges. Is that possible? I mean, is it possible to place an axis with some px offset to the left? I tried to solve it by rendering another chart with only the axis left to the actual chart, but this is indeed not a very elegant solution.

  • Anish


    I want to change the grid color, I tried with the majorTick, but the result is negative. Can you please tell me if there is any such method to do so ?

    Thanks in advance.

  • Alan


    I would like to use a Pie chart in one page and it seems that the loading of the charting component by dojo.require(“dojox.charting.Chart2D”);
    loads every charting type and not only the one which interests me, which results with some extra loading time for each page of my webapp.

    Is there a way to load only the pie chart script to use it ?


  • Pingback: Article about Dojo Charting « Rolf Kremer - Weblog()

  • Sara

    Anish: Setting the color of the Grid plot won’t work if you set the major tick color in the axis directly. You should actually change it in the Theme; for example:

    chart.setTheme(new dojox.charting.Theme(
    axis: {
    majorTick: {
    color: “#E0E0E0”,
    width: 1,
    length: 10
    minorTick: {
    color: “#E0E0E0”,
    width: 1,
    length: 5

  • Can I add dynamic Labels for X axis?

    It can vary depends upon the choid selected.

    I.e. monthly, daily, quaterly…

  • Can I display value in the Bar.

    for instance, If it 8 then I can see that value in middle of the Bar.

  • Hao

    Is it possible to add marker lines (a straight line used to indicate some threshold) on the chart?

  • federico

    hello, how do you do to make the percentages shows on pie chart?

  • karnakar thallapalli

    am developing jsp page to draw cahrt of stock market
    i would like to draw charts using dojo.
    i shoould get data (series ) from the server.it would be JSON object.
    how can we draw charts using the JSON.and i need to upadte the cahrt for every time interval

  • David

    I’m also very interested in displaying the value in a bar graph. Either in the middle or on top.

  • Rich

    Is there a recommended way to rotate the labels on the horizontal axis 90 degrees?

    I have a time series plot and the date-oriented (e.g. “Jan 2009”) labels would fit more naturally if I rotated them.

  • Ln

    Is it possible to create a chart without using series? for example I would like to create a chart as follow:
    x = 12 y =2
    x = 12.50 y = 4
    x = 13 y =7
    x = 14 y= 10


  • vasilis

    Hi, i was wondering if i can have patterns in the bar columns (like small dots, lines, etc).

  • jester

    hey mates,

    I am looking for a way to create a chart like the one on the bottom of the picture:

    for a chart which plots filetransfer over time (bar-start is start of a file to a given time, bar-end is of transfering this file) for multiple files. Any ideas how that could work?


  • Kavitha

    Is there anyway to rotate horizontal axis labels to 90 degrees. This was asked, but I did not find the answer.

  • frexville

    Hi all,

    I have this data :
    { “identifier”: “id”, “idAttribute”:”id”, “label”: “date”,
    “items”: [
    { “id”:1,
    “point”:[{“id”:1,”num”:17, “date”:”2009-02-01″},
    {“id”:2,”x”:10, “date”:”2009-06-01″}
    { “id”:2,
    “point”:[{“id”:1,”x”:11, “date”:”2009-01-01″},
    {“id”:2,”x”:19, “date”:”2009-09-01″}
    { “id”:3,
    “point”:[{“id”:1,”x”:14, “date”:”2009-07-01″},
    {“id”:2,”x”:20, “date”:”2009-03-01″}
    I want to display it in this chart.
    Also, I don’t know how can I put the month’s date in the labels.

    dojo.addOnLoad(function() {

    var store = new dojo.data.ItemFileWriteStore({
    url: “exemple_stock.json”
    chart = new dojox.charting.DataChart(“chartDiv” ,{ displayRange:12,
    xaxis:{labels:[“0”, “Janvier”,”Février”,”Mars”,”Avril”,”Mai”,”Juin”,”Juillet”,”Août”,”Septembre”,”Octobre”,”Novembre”,”Décembre”]},
    yaxis:{max:100,min:0, majorTickStep:10, maxLabelSize:30},
    type: dojox.charting.plot2d.Lines

    chart.setStore(store, {symbol:”*”}, “point”); // <– single value property

    Thanks a lot for your help.

  • I could not find any example of Columns charts with custom Category axis, I hope this could help anyone

    function docharts() {
    var chart = new dojox.charting.Chart2D(“chartcontainer”);
    var plot=chart.addPlot(“default”,{type:”Columns”,gap:5});

    if (v == 1) {
    return “one”;
    } else if (v == 2) {
    return “two”;
    } else if (v == 3) {
    return “three”;
    } else {
    return “”;
    var data=[];

  • I am working on a stackedBar chart with a line … it seems to mostly work, however, I find an interesting case where the marker on the line does not really meet at the right place on the vertical stacked bars. My code for the chart itself is:

    var chart1 = new dojox.charting.Chart2D(“simplechart”);
    chart1.addPlot(“goal”, {type: “Lines”, markers: true});
    chart1.addPlot(“default”, {type: “StackedColumns”, gap: 25});
    chart1.addAxis(“x”, { labels: [{value: 1, text: “3/7”}, {value: 2, text: “3/9”}, {value: 3, text: “3/16”}, {value: 4, text: “3/23”}, {value: 5, text: “3/30”}, {value: 6, text: “4/6”}, {value: 7, text: “4/13”}]});
    chart1.addAxis(“y”, {vertical: true, min:0, max:225});
    chart1.addSeries(“Sev1”, [39,38,30,28,0,0,0], {plot: “default”, stroke: {color: “darkred”, width: 1}, fill: “red”});
    chart1.addSeries(“Sev2”, [178,150,110,88,0,0,0], {plot: “default”, stroke: {color: “green”, width: 1}, fill: “lightgreen”});
    chart1.addSeries(“Goal”, [199,189,150,111,70,30,30], {plot: “goal”, stroke: {color: “black”, style: “solid”, width: 2}});

    so what I expected is a bar with 39+178 together (39 in red, 178 in green) and then a marker in the middle of that bar at 199, and then the next bar with 38+150 together and the marker in the middle of that bar at 189.

    However, what I get is not quite that. The 1st marker at 199 is on the Axis itself, and then each of the next ones gets progressively closer but not quite to the bar. The last marker is at the very right-edge of the chart, but that will be past the bars.

    Is there any way to fix this?
    Susan Hanson

  • Kiran

    Hi ,
    Your article is very nice .
    I am using dojox.charting.Chart2D to display Graphs/ Charts in our Application .

    My Timestamp data would be in this format 2005-06-29 08:05:00 .

    I am using dojox.charting.Chart2D to display Charts .

    Could anybody please let me know how to insert this TimeStamp Data into the addSeries Method of Chart2D ??

    Or please let me know what is the appropiate way for inserting Timestamp Data into DOJO Charts ??

    help me , my work has been struck .

  • Pravin


    Great framework . Salutes to the Team.

    I need help on one problem, is there a way to display text in markers ? the tooltip appears on mouse-over, but is it possible to keep the text always displayed?
    Like in a columns chart, the value of the column be displayed at the top of the column?
    or in bar like this ,
    __________________________] 86
    __________________] 75

    Thanks in advance.

  • Anthony

    Tutorial8 fails to load in IE:
    SCRIPT1028: Expected identifier, string or number
    tutorial8.html, line 23 character 17

    Looks as though there is an extra comma OR argument three was intended to be null. IE usually requires you to specify null as a function argument or it errors.

  • Charles

    Hi! I have tried to click on some of the tutorials e.g. Multiple Axis and it redirect me to the home page! The same for most of the tutorial, would it be possible to get it fixed, please?

  • Thanks for catching that Charles, they’re back in place now.

  • Peter

    The example image for Tutorial 10, does not look exactly like the output of Tutorial 10. The line chart output of Tutorial 10 has markers that are cut off at the edge of the chart. Is there anything that can be done to prevent the markers from getting cut off? Thanks.

  • @Peter, This demo is 4 years old and relies on an older version of Dojo. I suggest taking a look at http://dojotoolkit.org/documentation/tutorials/1.7/charting or http://dojotoolkit.org/documentation/tutorials/1.7/charting_advanced for more recent tutorials.