How to Resolve Y-Axis Gap in ChartJS Line Graph

31 Views Asked by At

I have a line graph created using ChartJS that represents the fluctuation in material prices over dates. Most materials have prices ranging from the $200s to $600s. However, there is one material with a significantly higher price in the $2000s. (I am currently using Metronic)

Due to this high-priced material, there is a large empty space on the Y-axis.

enter image description here enter image description here

Is there a way to omit this empty space or perhaps create a secondary Y-axis on the right side of the chart to accommodate the higher price range of this specific material? I'm looking for a solution to minimize the empty space and effectively represent the chart. Thank you!

scales: {
x: {
    stacked: true,
},
y: {
    ticks: {
        beginAtZero: true,
        min: 0,
        max: 3000,
        stepSize: 500
    }
}

I tried adding the "ticks" option to the Scales, but it didn't turn out to be the method I was looking for.

0

There are 0 best solutions below