Display maximum value of an axis

Question

I want to know if it is possible to display the maximum value of an axis in chart.js even if the data doesn't reach it yet? I'm trying to get a graph that fills up with asynchronous data. I know how to "update" it and it works well but the chart is visually filled from the start.

Do you mean you want the axis range set to a predetermined value? In that case simply use `ticks.max` and, perhaps, `ticks.min`. — timclutton, Mar 18 '20 at 17:04
I mean that I want to predetermine the "max" that is displayed by the graph. `ticks.max` limits the number of ticks that I can show but the graph is always visually "filled" even if the data doesn't reach this max value because the max of the axis is the one of the datasets, not of the `ticks.max` in the options unless it's superior. — Snahedis, Mar 18 '20 at 17:37

Ezra Siton · Accepted Answer · 2020-03-18T22:20:45.577

Use suggestedMax (For linear charts):

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings

For example:

ticks: {
  suggestedMax: 100
}

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Data label",
    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", "violet"],
    data: [5.0,6.7,7.5, 8.6, 3.3, 4.4, 4.5]
  }]
};


var options = {
  responsive: true,
  title: {
    text: 'Hello',
    display: true
  },
  scales: {
    xAxes: [{
      stacked: false,
      ticks: {

      },
    }],
    yAxes: [{
      stacked: true,
      ticks: {
        suggestedMax: 100
      }
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});

<canvas id="chart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

stacked: https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart

Related StackOverflow Q: How to set max and min value for Y axis

Display maximum value of an axis

1 Answers1