How to set ticks on axes dynamically with chart.js?

Question

We have values which can vary when the site is loaded and we want to dynamically set the tick step size. We have two datasets with differing units in the same chart and want to have the horizontal gridlines match each other. On one side it's a scale from 0-100% in steps of 20. On the other side we want to have the maximum as a multiple of 10 and set the stepsize as 1/5 of the maximum (ergo the gridlines should match each other). But stepsize unless fix typed as "10" (see id: 'B') or the like will not get loaded. We tried to set it dynamically with a class variable but it's no use. We use Angular5 and the ng2-charts library

public averageOptions: any = {
legend: {
  labels: {
    fontColor: 'rgb(255,255,255)',
    fontSize: 15
  }
},
scales: {
  yAxes: [{
    id: 'A',
    type: 'linear',
    position: 'left',
    ticks: {
      min: 0,
      max: 100,
      stepSize: 20,
      fontColor: 'rgb(255,255,255)',
      fontSize: 15,
      callback: function (value) {
        return value + '%';
      }
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }, {
    id: 'B',
    type: 'linear',
    position: 'right',
    ticks: {
      min: this.totalVotesMin,
      max: this.totalVotesMax,
      fontColor: 'rgb(255,255,255)',
      fontSize: 15,
      stepSize: 10
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }],
  xAxes: [{
    ticks: {
      fontColor: 'rgb(255,255,255)',
      fontSize: 15
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }]
}
  };

We found this somewhat related topic but we have no idea how the tick array looks or how to set it as there is no documentation about it: Chart.js - Setting max Y axis value and keeping steps correct

Did you try the information in the section about updating a chart after load? http://www.chartjs.org/docs/latest/developers/updates.html . Looks like as long as you get the reference, change things, and call chart.update(), it should work. — canpan14, Aug 21 '18 at 12:40

score 4 · Answer 1 · answered May 29 '19 at 17:54

4

It seems quite a long, but you can use below code to change the steps and max value based on input data.

ticks: {
            min: 0,
            callback: function(value, index, values) {
                if (Math.floor(value) === value) {
                    return value;
                }
            }
      }

answered May 29 '19 at 17:54

Prafulla Kumar Sahu

9,321
11
68
105

I want my Y axis to change the numbers based on data refreshed. But your solution did not worked. – Sathish Kumar k k Jul 06 '21 at 10:53

Yuvraj Akhade · Answer 2 · 2021-07-12T05:38:10.067

  public seriesB: Array<number> = [
    59.023,
    59.023,
    59.034,
    59.034,
    59.034,
    59.039,
    59.05,
    59.061,
    59.088,
    59.104,
    500
  ];    

  public lineChartLabels: Array<any> = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July"
  ];

  public lineChartOptions: any = {
    title: {
      display: true,
      text: "Line Chart Example"
    },
    legend: {
      position: "bottom"
    },
    scales: {
      yAxes: [`k`
        {
          id: "SeriesB",
          ticks: {
          stepSize: 84,
          min:0
          }
        },
      ]
    }
  };
  
  public lineChartColors: Array<any> = [
    {
      backgroundColor: "rgba(255,255,255,0.2)",
      borderColor: "rgba(1,1,1)"
    }
  ];

  public lineChartData: Array<any> = [
    { data: this.seriesB, label: "SeriesB", yAxisID: "SeriesB" }
  ];

  public lineChartLegend: boolean = true;

  public lineChartType: string = "line";

  this.lineChartOptions.scales.yAxes[0].ticks.suggestedMin = Math.floor(
      Math.min(...this.seriesB)
    );
    this.lineChartOptions.scales.yAxes[0].ticks.suggestedMax = Math.ceil(
      Math.max(...this.seriesB)
    );
    );

Welcome to Stack Overflow. Code dumps without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please [edit] your question and explain how it answers the specific question being asked. See [answer]. — ChrisGPT was on strike, Apr 24 '21 at 01:42

How to set ticks on axes dynamically with chart.js?

2 Answers2