[Chartjs]-How to ignore same values on ChartJs?

by

2👍

✅

null dupes and use spanGaps: true to make it draw over dupes

var ctx = document.getElementById("myChart").getContext('2d');

const nullDupes = data => data.map((x, i) => data[i - 1] === x ? null : x);

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Tokyo", "Mumbai", "Mexico City", "Shanghai", "Sao Paulo", "New York", "Karachi", "Buenos Aires", "Delhi", "Moscow"],
    datasets: [{
      spanGaps: true,
      label: 'Series 1', // Name the series
      data: nullDupes([500, 500, 2424, 2424, 4111, 4111, 80, 5555, 5555, 6811]), // Specify the data values array
      fill: false,
      borderColor: '#2196f3', // Add custom color border (Line)
      backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
      borderWidth: 1 // Specify bar border width
    }]
  },
  options: {
    responsive: true, // Instruct chart js to respond nicely.
    maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart"></canvas>

Leave a comment