I'm currently working on creating a customized line chart using the latest version of chartjs (v3) with integration in React using react-chartjs. However, I am facing some difficulties in making the line start at the center of the first column and end at the center of the last column. The issue arises because the first column always starts at a Y position of zero, causing the line to begin from the extreme left. I am seeking a solution to adjust the line so that it marks the middle of each column instead of the border.
Here is the current output:
https://i.sstatic.net/B0WS1vzu.png
And this is the desired output:
https://i.sstatic.net/AJ7bkRe8.png
Below is my configuration:
<Line
data={data}
height={440}
width={480}
options={{
...options,
scales: {
x: {
grid: {
color(context) {
if (context.tick.value === 0) return '#B3B3B3';
return '#E6E6E6';
},
tickWidth: 0,
lineWidth: 1,
},
border: {
dash(context) {
if (context.tick.value === 0) return [0];
return [5, 5];
},
width: 0,
},
ticks: {
display: false,
},
},
y: {
grid: {
color(context) {
if ([0, 30, 70].includes(context.tick.value)) {
return '#B3B3B3';
}
return '#E6E6E6';
},
lineWidth(context) {
if ([30, 70].includes(context.tick.value)) {
return 2;
}
return 1;
},
tickWidth: 0,
},
border: {
dash(context) {
if (context.tick.value === 0) return [0];
return [5, 5];
},
width: 1,
},
min: 0,
max: 100,
ticks: {
font: {
weight: 'bold',
size: 10,
family: 'Open Sans',
},
color: '#000000',
},
},
},
animation: false,
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
},
}}
/>