CODEWITHSUNDEEP
javascriptchart.js
Jessie Enero
Jessie Enero

Reputation: 11

Chartjs Bar Chart Y Axis set base starting value to not be 0

I am trying to make a bar chart where it will displays data over and under the base starting point which is not 0.

I tried using min and max of yAxes scales option but it just hides the bars that exceeds the set min/max with 'beginAtZero' set to false.

scales: {
  yAxes: [{
    ticks: {
      min: 20,
      scaleBeginAtZero: false,
      beginAtZero: false
    }
  }],
}

Upvotes: 1

Views: 943

Answers (1)

Jessie Enero
Jessie Enero

Reputation: 11

I was able to display desired chart data by using:

a. Chartjs Multi Floating Bar

Sample: http://pravopys.net/chartjs/samples/charts/bar/vertical.html

GitHub: https://github.com/cprimera/Chart.MultiFloatingBar.js/blob/master/samples/multi-floating-bar.html

b. Chartjs annotation plugin(for base point horizontal line)

const Chart = require("chart.js");
const Annotation = require("chartjs-plugin-annotation");
Chart.plugins.register(Annotation);

Preview Image: final chart

Upvotes: 0

Related Questions