Line Chart Modification

Topic: Line Chart Modification

Nitin.Chanana pro premium asked 2 months ago

I want to change the increment behavior of Line Chart's Axis bar, Currently its increasing by 0.5, Please help me out...

Aliaksandr Andrasiuk staff answered 2 months ago


You should pass an object with needed properties to options prop to Line chart component. Options may look the next way :

let options = {
      scales: {
          yAxes: [{
              ticks: {
                  max: 100,
                  min: 0,
                  stepSize: 5

In the code above I set the increment to change by 5, the minimum set to 0, the maximum set to 100.

Now you should pass this object to the options property of <Line> component:

<Line data={this.state.dataLine} options={options} />

Hope this info was helpful.

Best regards.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: React
  • MDB Version: 4.13.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No