Chart.js bar chart bars and labels do not align

Question

I am using Chart.js to display some data as bar chart. An example of this data is:

{New York: 29033, San Francisco[: 33432, Oklahoma City: 38202}, etc.

When I use these datasets with the Chart.js to create a bar chart, the bars of the charts appear squashed together with the labels either squashed together as well, or too far apart, depending on the amount of labels that are created.

Is there a way to align the bars and the labels so that they fit equally?

Answer 1

Your Bar chart has certain settings by default, which you can override when you're configuring your instance. Change barValueSpacing in order to do that.

Bar.options = { //How it looks in the ChartJS library...
    // ...
barValueSpacing : 5, //Number - Spacing between data sets within X values
    // ...
}

http://www.chartjs.org/docs/

Check out the documentation for more settings.