How can I get a point to be drown over the line?

Question

I have a 2-line chart, one drawn without any points (0 sized), and the other with only 2 points (no line). I'd like to have the points over the line and not the contrary (the line is literally crossing over the point which is not what I want). You can see the result on this image :enter image description here

Here is my code:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                label: '',
                data: dataset,
                borderColor: 'rgb(0, 0, 255, 1)',
                borderWidth: 2,
                pointRadius: 0,
                pointHoverRadius: 0,
                fill: "origin",
            },
            {
                label: 'Events',
                data: [{x: "2020-10-22", y: 4850}, {x: "2020-10-27", y: 4730}],
                fill: false,
                pointRadius: 15,
                pointHoverRadius: 15,
                pointBorderWidth: 0,
                pointHoverBorderWidth: 0,
                pointBackgroundColor: 'rgba(255, 0, 0)',
                pointStyle: 'triangle',
                pointHoverBackgroundColor: 'green',
                showLine: false,
            },
        ],
    },
    options: {
        responsive: false,
        scales: {
            y: {
                beginAtZero: false,
            }
        },
    },
});

Many thanks

score 0 · Answer 1 · answered Jan 29 '22 at 00:40

You can switch your datasets so your dataset with the 2 points is first in the array.

Or you can add the order property in both datasets which takes a number, the higher this number the sooner that dataset gets drawn. So you will need to assign your dataset with the 2 points an order of 0 and the other an order of 1.

For more information about this you can read this part of the docs

How can I get a point to be drown over the line?

1 Answers1