Home › docs › charts › chart types › Column Chart

Pages

open all | close all

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 it Yourself by Editing the Code below.

Column Chart With Additional Customization

Try it Yourself by Editing the Code below.


  Integrations:    

  Also See:    


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

Comments 79

  5. 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. 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. 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. 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. Hi,
    can you please help me in my below query?
    how to set margin between 2 bars(column) or reduce size of bar ?

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

    • 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. 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. 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. Hi,
    Is it possible to give indexLabel inside the column-chart with having it’s percentage?

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

    • Sreekanth,

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

  34. 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. 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. 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. 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. 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. It is not working with asp.net(VB 2005), Nothing is displaying, works fine with .html format. why?

  41. 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. sir, I want a canvas semidougnut chart with click event,can i make this chart in canvas please help me.

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

© fenopix
About Us
FAQs
Careers
Privacy Policy

Server Side Technologies
ASP.NET MVC Charts
PHP Charts
JSP Charts
Spring MVC Charts

Front End Technologies
JavaScript Charts
jQuery Charts
React Charts
Angular Charts
JavaScript StockCharts

Contact
Fenopix, Inc.
2093 Philadelphia Pike,
#5678, Claymont,
Delaware 19703
United States Of America

Server Side Technologies
Front End Technologies
Contact
ASP.NET MVC Charts JavaScript Charts FAQs
PHP Charts jQuery Charts Sales Enquiries
Spring MVC Charts React Charts Support Forum
JSP Charts Angular Charts Careers
JavaScript StockCharts

Privacy Policy  © fenopix