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 “horizontal” “horizontal”,”vertical”
dataSeries fillOpacity Number 1 .2,.4,1 etc

Basic Bar Chart

Try Editing The Code

Bar Chart With Additional Customization

Try Editing The Code


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

26 Comments

  1. Thejus T v says:

    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. Debashis Mishra says:

    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. Nilambu says:

    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. Matthijs says:

    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?

    • Matthijs says:

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

  5. gunvant says:

    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. Dani says:

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

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