HTML5 & JS Bar Charts

A bar chart is a chart with rectangular bars with lengths proportional to the values that they represent. A bar Chart is useful for comparing dataPoints in one or more dataSeries.

In Bar Chart axisX is Vertical and axisY is Horizontal.

Cannot be combined with: Any chart type except Bar and Stacked Bar charts.




Bar 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 “outside” “inside”,”outside”
dataSeries fillOpacity Number 1 .2,.4,1 etc


Basic Bar Chart

Try it Yourself by Editing the Code below.


Bar Chart With Additional Customization

Try it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 26

  1. Thanks for creating such a helpful tool. Here am facing an issue, in my application number dataPoints varies and its taking from Database.So how can i set the datapoints(Presently my data is in list of class).

    Please help me
    Thejus T V

  2. Hi,
    Is there any way I can highlight a particular point on a bar chat ? For example the above chart, Say I will have a small red line(vertical) on the first yellow bar with tooltip/label :”Second most gold : 400″.

  3. Is there any attribute through which I can show a label on hovering on a bar that is different from labels on x axis??

  4. When I need more than 11 labels/data entries in this type of chart, it shows all bars but not all labels in front of the bar.

    What can I do about it? Is it a display error?

    • I already fixed it… I’ve put the ‘interval: 1’ on the Axis-X and it shows all labels now.

  5. Hello,

    Actually i want to run two chart in same HTML file, is there any possibility for same.
    if yes, then please help me out.

  6. Why is my legend still displaying Data Series 1 and Data Series two even after changing my legendText to something else

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.