First to start of, It's most likely a common question but I am way too sleep deprived right now to be able to figure it out (I did try though haha)

Anyways the issue I am having is with multi axis line chart

I have 7 different lines with data ranging anywhere from 1 digit number to 5 digits numbers (eg. line 1 ranges from 10000-30000 while line 2 ranges between 0 and 9)

Now my issue is that the lines scale incorrectly, line 2 appears larger than line 1 even though the difference is massive (check the image, green line is the one with 34 as value yet it appears larger than all other lines

what am I missing to fix this?

        const data = {
        labels: lbs,
        datasets: [
            {
                label: 'Regular',
                data: <?php echo $regularjs;?>,
                fill: true,
                backgroundColor: 'rgba(194, 143, 68, 0.1)',
                borderColor: 'rgb(194, 143, 68)',
                yAxisID: 'y',
                tension: 0.4,
            },
            {
                label: 'Feed',
                data: <?php echo $feedjs;?>,
                fill: true,
                backgroundColor: 'rgba(68, 194, 160, 0.1)',
                borderColor: 'rgb(68, 194, 160)',
                yAxisID: 'y1',
                tension: 0.4,
            },
            {
                label: 'Recents',
                data: <?php echo $recentsjs;?>,
                fill: true,
                backgroundColor: 'rgba(156, 68, 194, 0.1)',
                borderColor: 'rgb(156, 68, 194)',
                yAxisID: 'y2',
                tension: 0.4,
            },
            {
                label: 'Search',
                data: <?php echo $searchjs;?>,
                fill: true,
                backgroundColor: 'rgba(194, 68, 68, 0.1)',
                borderColor: 'rgb(194, 68, 68)',
                yAxisID: 'y3',
                tension: 0.4,
            },
            {
                label: 'Popular',
                data: <?php echo $popularjs;?>,
                fill: true,
                backgroundColor: 'rgba(179, 194, 68, 0.1)',
                borderColor: 'rgb(179, 194, 68)',
                yAxisID: 'y4',
                tension: 0.4,
            },
            {
                label: 'Profile',
                data: <?php echo $profilejs;?>,
                fill: true,
                backgroundColor: 'rgba(68, 81, 194, 0.1)',
                borderColor: 'rgb(68, 81, 194)',
                yAxisID: 'y5',
                tension: 0.4,
            },
            {
                label: 'Recommended',
                data: <?php echo $recommendedjs;?>,
                fill: true,
                backgroundColor: 'rgba(194, 68, 123, 0.1)',
                borderColor: 'rgb(194, 68, 123)',
                yAxisID: 'y6',
                tension: 0.4,
            }
        ]
    };
    const config = {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            stacked: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Daily Pack Visits'
                },
                legend:{display: true}
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    beginAtZero: true,
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    beginAtZero: true,
                    grid: {drawOnChartArea: false,},
                    ticks: {
                        display: false
                    }
                },
                y2: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    beginAtZero: true,
                    grid: {drawOnChartArea: false,},
                    ticks: {
                        display: false
                    }
                },
                y3: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    beginAtZero: true,
                    grid: {drawOnChartArea: false,},
                    ticks: {
                        display: false
                    }
                },
                y4: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    beginAtZero: true,
                    grid: {drawOnChartArea: false,},
                    ticks: {
                        display: false
                    }
                },
                y5: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    beginAtZero: true,
                    grid: {drawOnChartArea: false,},
                    ticks: {
                        display: false
                    }
                },
                y6: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    beginAtZero: true,
                    grid: {drawOnChartArea: false,},
                    ticks: {
                        display: false
                    }
                }
            }
        },
    };
    const dailypacks = new Chart(
        document.getElementById('daily-visits'),
        config
    );

graph

CodePudding user response：

This is because you map each dataset to its own y axis. This means the y axis will go from min to max for that dataset so it looks like its wrong.

If you want your data represented so its scalled correctly you just need to remove the yAxisID option in each dataset. With this removed they all fall back to the default which is y so you only have 1 scale.

This will show the data correctly scaled