ChartJs: is it possible to show lesser or a certain data point on line?

47 Views Asked by At

For instance, the attached figure it is showing ALL points as circles. What If I want to show the last data point on each line? is it possible?

enter image description here

1

There are 1 best solutions below

0
LeeLenalee On BEST ANSWER

You can use a scriptable function for this:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            pointRadius: (context) => context.dataIndex == (context.chart.data.datasets[context.datasetIndex].data.length - 1) ? 10 : 0 // Default is 3, used 1- for more clarity
        }]
    },
    options: {
    }
});
<script src="https://npmcdn.com/[email protected]/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>