HTML5 & JS Column Charts

Column charts are rectangular bars with lengths proportional to the values that they represent. A column chart is useful to compare dataPoints in one or more dataSeries.

In column charts, axisX is the horizontal Axis and axisY is the vertical Axis.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.

Column Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries bevelEnabled Boolean false true,false
dataSeries/ dataPoint indexLabelPlacement String “outside” “inside”,”outside”
dataSeries/ dataPoint indexLabelOrientation String “horizontal” “horizontal”,”vertical”
dataSeries fillOpacity Number 1 .2,.4,1 etc

Basic Column Chart

Try Editing The Code

Column Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

79 Comments

  5. MadhanKumar says:

    axisX:{
    internalMaximum: 1500
    },
    I tried using this to increase the X-Axis limit but it is not working can u guide me in it….

  6. hoon says:

    to make column charts attached to negative values
    add this code to canvasjs

    under : Chart.prototype.renderColumn

    …

    if (dataSeries._options.minimumBound = 0), (dataPoints[i].y < 0) && bevelEnabled, false, false);

    …

    and
    make options like this
    axisY : {
    minimum : -130,
    maximum : 0
    },
    data : [{
    type: 'column',
    minimumBound : -130,
    …

  9. Yuk Liu says:

    I’m almost sold on canvas.js because it appeals to me visually. Are there plans to include the option to add error bars on the columns? I know this feature is also not available in most other charting js libraries but this is important for academic visual presentations.

  10. Kim says:

    Hi, thank you for great work.

    On the doughnut chart i can use php string inside the y axis like this (y: “” label: “test”).

    But in many of the others charts and the column chart this does not work.

    Is there a workaround in the js file or something?

  11. kaushal says:

    Hi,
    can you please help me in my below query?
    how to set margin between 2 bars(column) or reduce size of bar ?

  12. kaushal patel says:

    HI i am facing issue in setting up this canvas in jquery mobile Popup.
    can you help hence the graph is going out of this box(popup box).

    or you can suggest any best supportive js.
    Thanks in Advance

  13. Amit says:

    Hi Sunil,
    Is is possible with canvasjs to plot a (column) chart with all values and also the labels hidden?
    And can we override the styling of the canvas element (position:absolute doesn’t let me add it to the hero-unit in twitter-bootstrap 2)

  14. Amit says:

    It worked with the twitter bootstrap (height was missing in the main div, my fault :P)
    So now the only question is can i hide values and labels (on x and/or y axis)?

    Thanks

  17. Hareesh Mohan says:

    I want to place 2 graphs one by one with different values . but it shows only one graph or the latest graph. Why
    ? Can i show 2 graph in same page?

  19. sand says:

    how to display the names vertically instead of horizontal. becasue when i check this chart in mobile view if the names are lenghty i wont displaying correctly. please advice ? any fixes for mobile reponsive .

  20. mobiq says:

    Hi,

    I have tried using canvas.min.js – and have couple of queries

    1) can I fix column widths?
    2) I want to add an additional ‘average’ line to chart to show comparison against columns. How can add this line?

    thanks

    • Anjali says:

      mobiq,

      1) Sorry, it is not possible to set fixed width of column because when the number of dataPoints increase, we cannot fit/display all of them without reducing their width.

      2) Automatically, it is not possible. As a workaround you can calculate the averages and add it to the chart.

  21. mobiq says:

    Anjali, Thanks for your prompt response.

    for point 1) Have you put any implicit restriction on no. of columns as if give more than 10 data points I don’t see more 8 columns.
    2) Could please post a small example of how to achieve this?

    Thanks

  22. mobiq says:

    Thanks Anjali. I was able to solve (2) by simple adding more data points.

    chart = new CanvasJS.Chart(id, {
    title : {
    text : “Usage history”,
    fontSize: 25,
    fontColor: “black”,
    },
    axisY : {
    title : “Usage”
    },
    axisX : {
    title : “Time”
    },
    legend : {
    verticalAlign : “bottom”,
    horizontalAlign : “center”
    },
    data : [
    {
    dataPoints : dps
    },
    {
    dataPoints : dpsAvg
    }
    ]
    });

    chart.render()

  26. Hitesh says:

    Hi,
    Is it possible to give indexLabel inside the column-chart with having it’s percentage?

    • Anjali says:

      hitesh,

      You can do so by setting indexLabelPlacement property to “inside”. But you will have to calculate percentage values yourself except for when it is a stacked chart or a pie / doughnut chart where you can use #percent keyword.

  27. Matthijs says:

    Is there a way to break the y-as values? I have very high and low values (5 to 10k). I would love to have a bar graph that goes from 0 to 100 and then 2500 – 10000. Because now the low values are hardly to see / interact with.

    Is that possible?

  28. Ram says:

    how i can add new column in column bar chart.I required 2 to 5 column in a chart for different data showing. plz reply me how it is possible. thanxs

    • Rishabh Rajgarhia says:

      Sreekanth,

      Can you please explain the issue further in detail. A pictorial representation would be very helpful.

  34. info2scs says:

    Hi,
    I’am trying an example where I have to place 2 column chart side by side (inside its own divs container). The charts are being rendered properly.

    I have following questions
    1. When I mouse hover on of the left side chart’s column, the tool tip is being rendered correctly. However when I mouse hover the column on the ride side chart, the tool tip is rendered near the left side column chart. I was wondering if there is any example of rendering 2 column charts side by side?
    2. What is the option do i need to use (in column chart) to place the value of the column at the top of the column.

    Thanks

  36. Ali says:

    I need To display the Account related all contacts display in Y- axis and Date of Month display in X-axis Using Visual force page and Controller.

  37. Ali says:

    follow above requirement is, can u please display the X-axis Display date of month how many Contacts are logged in a Day. Example today I,m logged in One Contact Based on Account, Using Bar-chart displaying y-axis upto 1 contact and Xaxis Dispaly Today Date….

  38. ed van der velden says:

    Reading & learing about CanvasJS for a personal project at home i used and modified the basic column chart to mu needs and looks great. I put in some static data to make is show what i need. The thing is that i have a csv file that is updated every 5 minutes, and i want to have that data show in the chart. my csv file has only 1 row of data with 7 data fields in it “16/01/31,17.401,0,0,0,7.192,0”
    My script looks like this:

    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”, {
    title:{
    text: “Dagverbruik voorbeeld”
    },
    data: [
    {
    // Change type to “doughnut”, “line”, “splineArea”, etc.
    type: “column”,
    dataPoints: [
    { label: “Dal gebr.”, y: 6.709 },
    { label: “Piek gebr.”, y: 12.128 },
    { label: “Dal gelev.”, y: 0 },
    { label: “Piek gelev.”, y: 4.400 },
    { label: “Gas verb.”, y: 8.051 },
    { label: “Prod. Kwh”, y: 0 }
    ]
    }
    ]
    });
    chart.render();
    }

    Please advice how to get that CSV data into the chart?
    any help is appreciated

    cheers Eddy

  39. Mark says:

    Hi

    Is there a way to set the width of the columns in the chart?

    I really wanna make ’em thinner while maintaining current width.

  40. mahendra says:

    It is not working with asp.net(VB 2005), Nothing is displaying, works fine with .html format. why?

  41. Vernon says:

    Hmm it seems like your blog ate my first comment (it was super
    long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog.
    I as well amm an aspiring blog writer but I’m still new to the whole thing.
    Do you hae any suggyestions for beginner blog writers?
    I’d really appreciate it.

  42. Ravichandra says:

    sir, I want a canvas semidougnut chart with click event,can i make this chart in canvas please help me.

  45. gsm phones says:

    Fantastic site. Lots of helpful nfo here. I’m sending it to some
    pals ans also sharing in delicious. And certainly, hanks on your sweat!

If you have any questions, please feel free to ask in our forums. Ask Question