JavaScript Bar Chart 

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A bar chart displays horizontal bars with the values axis being displayed on the bottom (or top) side of the chart. To create a bar chart using KoolChart's JavaScript charting library, the <Bar2DChart> (or <Bar3DChart>) and <Bar2DSeries> (or <<Bar3DSeries>) elements must be set in Layout. The xField attribute on the <<Bar2DSeries> element must be set to the field name where the data value exists, as the size of the data is displayed on the horizontal axis (X-axis).
<Bar2DSeries xField="Vancouver" labelPosition="inside" displayName="Vancouver" color="#ffffff" insideLabelYOffset="-2">

var chartData = [
{"Month":"Mar","Vancouver":28.8},
{"Month":"Apr","Vancouver":35.8},
{"Month":"May","Vancouver":47.6},
{"Month":"Jun","Vancouver":74.2},
{"Month":"Jul","Vancouver":60.1},
{"Month":"Aug","Vancouver":44.2},
{"Month":"Sep","Vancouver":34.2}
];
In this JavaScript chart example, one <<Bar2DSeries> element is defined, and the labelPosition attribute is set to inside.
<Bar2DChart showDataTips="true" barWidthRatio="1" maxBarWidth="10">
...
<series>
<Bar2DSeries xField="Vancouver" labelPosition="inside" displayName="Vancouver" color="#ffffff" insideLabelYOffset="-2">
...
</Bar2DSeries>
</series>
...
</Bar2DChart>