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
);
