CODEWITHSUNDEEP
chart.jsreact-chartjs
soupjake
soupjake

Reputation: 3449

Chart.js "minBarLength" not working as intended?

So I'm trying to configure chart.js so that there is always a slight bar shown even for the lowest value. I can see there is a "minBarLength" property which the docs says to "Set this to ensure that bars have a minimum length in pixels." but I can't seem to get this working?

Here's a sandbox using the latest version of chart.js and with the use of this property as shown here:

data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        minBarLength: 4,
        backgroundColor: "blue"
      }
    ]
  }

However, the lowest value is still not being displayed on the graph:

image showing lack of bar

I should also note that I am aware of the "beginsAtZero" property but I don't wish to use this as this can make it difficult displaying charts that have large values.

Any help would be greatly appreciated!

Upvotes: 2

Views: 3397

Answers (2)

jaxefoot
jaxefoot

Reputation: 1

you probably do not have this issue anymore, but if anyone reads this.

I am using "chart.js": "3.8.0". When you set the min of the y-Axis for example to 1 you have to set the attribute "base" of the dataset to 1 as well so that minBarLength can work.

Upvotes: 0

uminder
uminder

Reputation: 26150

Simply tell your yAxes to beginAtZero by extending the options as follows:

options: {
  title: {
    display: true,
    text: "Custom Chart Title"
  },
  scales: {       
    yAxes: [{
      ticks: {
          beginAtZero: true
      }
    }]
  }
}

Upvotes: 1

Related Questions