Help needed with v3.x migration

[esabol]

NOTE: All issues have been resolved! I hope this discussion thread helps someone else who needs to migrate from v2.x to v3.x.

I'm trying to migrate from 2.7.2 to 3.2.0, and I've encountered the following issues:

1. Legend isn't at the bottom even though I've specified bottom in the options. Specifically,
   this isn't working:

    options: {
        // ...
        legend: {
            display: true,
            position: 'bottom',
        }
    }

What do I need to change to get the legend back at the bottom?

2. My type: 'line' graph is a smoothed line (like a Bezier curve) in 2.7.x, but it's a jagged line in 3.2.0. How do I get a smooth line like before?
   2.7.x: smooth line
   
   3.2.0: jagged line
   

3. My dataset values are all integers, but 3.2.0 is showing y-axis ticks every 0.5 units. Version 2.7.x didn't do this; it shows y-axis ticks every 1 units. Specifically, I'm specifying the following:

    options: {
        // ...
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 6,
                }
            }]
        },
        // ...
    }

What do I need to change to get the ticks to be every 1 unit instead of 0.5 like before?

4. ADDITION # 1: The backgroundColor property of my line chart doesn't seem to be working. Under 2.7.x, the backgroundColor was the color of the chart beneath the line. This doesn't seem to do anything in 3.2.x. The part of the chart under the line is unchanged from the chart as a whole.

5. ADDITION # 2: The number of labels on my X axis has doubled when going from 2.7.x to 3.2.0. I've never specified anything having to do with the X-axis before. Under 2.7.x, it seems once the number of points in the dataset reached some threshold, it would automatically cut back on the number of ticks and labels on the X axis. 3.2.0 seems to have a different threshold or it doesn't cut back automatically on the number of ticks/labels at all? Is it possible I get the old behavior?

Chart with 2.7.x:

Same chart with 3.2.0:

[esabol]

After looking through the 3.x Migration Guide section of the documentation, I've solved the first item by changing options to

    options: {
        // ...
        plugins: {
            title: {
                display: true,
                text: 'Title of Chart',
            },
            legend: {
		display: true,
		position: 'bottom',
            }
	}
    }

I could still use some help with items 2 and 3....

[esabol]

I'm still confused by beginAtZero. The 3.x Migration Guide says this has been renamed to scales[id].beginAtZero, but I'm not sure how scales[id] translates to my options structure. Can someone help me with that?

[LeeLenaleee]

@esabol the tension property from the documentation that you linked is what you are looking for, if you increase this it will make the line more curved

[LeeLenaleee]

See my answer on this stack question, will have an example of it: https://stackoverflow.com/questions/67175558/y-axes-not-displaying-properly-on-chartjs/67179550#67179550

[esabol]

That clears up options.scales[id] a lot, @LeeLenaleee. Thanks!

Can I put the min and max in options.scales[id] or do I need to keep them under options.scales.yAxes?

P.S. I've added a new issue (# 5 above) having to do with the number of ticks/labels on the X axis.

[esabol]

To keep things simple for myself, I tried specifying yAxisID: 'yAxes' and xAxisID: 'xAxes' in my datasets, and that seemed to work and it simplifies things, I feel.

I resolved issue 5 above by specifying:

    options: {
        scales: {
            xAxes: {
                ticks: {
                    maxTicksLimit: 20,
                },
            },
        },