CODEWITHSUNDEEP
chart.jslinechart
ktsigkounis
ktsigkounis

Reputation: 103

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

I'm using ChartJs to present some graphs for the progress of an athlete in weightlifting.

In x-axis I have dates of training and in y-axis I have kilograms of different exercises (5 lines). Although not all exercises are done in one training date. So for this specific date my line for the exercise goes to zero (when I'm not finding the exercise in training, I'm putting 0 in my data json for the chart).

Is there a solution for this specific date the dot of this line to be removed totally and avoid my line to goes to zero ? When I have no data => don't show any dot.

For example as you can see the point of orange at 27/06/2021 the blue exercise does not exist at all. I want avoid the drop of the line to zero.

Labels and Data is something like that

data: [65, 59, 80, 81, 56, 55, 40]

labels: ["20/01/2020", "21/01/2020" ..... ]

Valid XHTML.

Upvotes: 0

Views: 1477

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31431

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>

Upvotes: 2

Related Questions