Chartjs-Space before and after data points in chart.js

by

1👍

✅

There exists a series of dataset properties that can be used to style the points. You could use the following ones to achieve what you’re looking for.

  • pointBackgroundColor
  • pointRadius
  • pointBorderColor
  • pointBorderWidth

Please have a look at the following code snippet.

new Chart(document.getElementById("myChart"), {
    type: "line",
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First Dataset",
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            lineTension: 0.1,          
            pointBackgroundColor: "rgb(75, 192, 192)",
            pointRadius: 8,
            pointBorderColor: 'white',
            pointBorderWidth: 8
        }]
    },
    options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

If you want the points to also look the same when the mouse pointer hovers
over them, you’ll have to define the following properties with identical values.

  • pointHoverBackgroundColor
  • pointHoverRadius
  • pointHoverBorderColor
  • pointHoverBorderWidth

Leave a comment