Issue
As showed in the picture the points are cut in half when reaching bottom or top edges (when the data is 1 or 5 in this example).
I tried padding, adding some 'fake' data to extend the limits of 1 and 5 and removing it with callback function on ticks. None worked as expected
This is my config for this chart.
const config = {
type: 'line' as ChartType,
data: data,
options: {
pointStyle: 'circle',
//pointBackgroundColor: 'white',
scales: {
y: {
ticks: {
maxTicksLimit: 5,
stepSize: 1,
},
min: 1,
max: 5,
reverse: true,
},
},
},
};
Removing min and max, results in the expected output.
But I need min and max, cause I want fixed Y axes values
Any clues how to fix this?
Solution
You can use the afterDataLimits
hook to set the max and min of the scale, that way it still overflows the chart area:
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 10, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink',
radius: 10
}]
},
options: {
scales: {
y: {
afterDataLimits: (scale) => {
scale.max = 10;
scale.min = 0;
}
},
},
},
});
<canvas id="chart" width="250" height="120" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
Answered By - LeeLenalee
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.