Show small chart using Chartjs

Question

I want to achieve the following chart (a small 7 day chart):

For that, I started using ChartJS with React. My knowledge is limited with ChartJS.

My Line chart options are:

const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false
        },
        title: {
            display: false
        },
        tooltips: {
            enabled: false
        },
    },
    elements: {
        point:{
            radius: 0
        }
    },
    tooltips:{
        enabled: false
    },
    hover: {mode: null},
    scales: {
        x: {
            display: false,
        },
        y: {
            display: false,
        }
    },
    animation: {
        duration: 0
    },
    parsing: {
        xAxisKey: 'time',
        yAxisKey: 'value'
    }
}

const dataOptions = {
    labels: [],
    datasets: [] // i fill this when the component is mounted,
}

And then I add a chart:

<Line
    data={dataOptions}
    options={options}>
</Line>

I get:

I need the max and min to be adjust so it looks rather a smoother chart.

How can I achieve the first image - as mine looks very basic, and what is usual for small 7 day charts?

Kaspatoo · Answer 1 · 2023-03-21T18:55:46.260

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.

You are using an old and unsupported way of defining scales in the last 2 versions. You might want to update that and use the new format in next answers https://www.chartjs.org/docs/3.7.1/getting-started/v3-migration.html#specific-changes — LeeLenalee, Mar 20 '23 at 11:04
yes, your are right, i just copied the code from the related thread, did not note that its outdated, i updated it — Kaspatoo, Mar 21 '23 at 18:56

Show small chart using Chartjs

1 Answers1