Chartjs-Chart.js – Avoid line to goes to zero and remove dot for this situation

by

2👍

✅

Yes, you can use scriptable options if you want the dot to not show, you can also pass null values so the point gets skipped or you can use the object format to specify to which labels the datapoint needs to be matched:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Scriptable radius',
        data: [12, 19, 0, 5, 2, 3],
        borderColor: 'pink',
        backgroundColor: 'pink',
        radius: (ctx, a, b) => (ctx.parsed.y === 0 ? 0 : 8)
      },
      {
        label: 'Null value',
        data: [7, 11, null, 8, 3, 7],
        borderColor: 'orange',
        backgroundColor: 'orange'
      },
      {
        label: 'Object notation',
        data: [{
          x: 'Red',
          y: 6
        }, {
          x: 'Blue',
          y: 4
        }, {
          x: 'Green',
          y: 8
        }, {
          x: 'Purple',
          y: 12
        }, {
          x: 'Orange',
          y: 3
        }, ],
        borderColor: 'lime',
        backgroundColor: 'lime'
      }
    ]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Leave a comment