Chartjs-Show small chart using Chartjs

by

1👍

Your questions is not clear to me.
The differences I can see between what you said you want and what you said you get is (for me):

  • yours has a purple line instead of green line
  • yours has a less chart height
  • yours has much less data

What you say as smooth seems to be that you just has much less data (the above has hundreds of datapoints, yours only ~20.
Increase your data and it will look smoother.

To get a higher chart height, I referr to this other thread:
How to set max and min value for Y axis
you can use suggestedMin/Max in the scales-ticks-option.

var options = {
    scales: {
        y: {
            suggestedMax: 1000, // maximum value will be 1000.
            suggestedMin: 100, // minimum value will be 100.
            // OR //
            beginAtZero: true   // minimum value will be 0.
        }
    }
};

chart Size in chartJs is a big thing.
You already are using

responsive: true,
maintainAspectRatio: false,

Which leads to chartJs try to use the space it needs and gets from outer element (e.g. a div).
But for me it is still difficult to get it working 100%. Sometimes some css may crush that behavior.

If you are new to chart JS I really recommend their own website having many samples and a online-engine where you can try out any option.
https://www.chartjs.org/docs/latest/samples/scales/linear-min-max-suggested.html

Test your stuff there first before coding on your site.
You can edit the option in their live samples and directly see the effects.

Leave a comment