Chartjs-How to realize a discontinuous section (jumps) in a continuous line plot with Chart.js?

by

1👍

✅

Here you go: https://jsbin.com/kacecejade/1/edit?js,output

I loop through the data array and when there’s not a number but an array I double the array element in the labels array so I have two labels for two data.

var sLabels = ['2018-10-26', '2018-11-02', '2018-11-09', '2018-11-16', '2018-11-23', '2018-11-30', '2018-12-07', '2018-12-14', '2018-12-20', '2018-12-28', '2018-12-31', '2019-01-01', '2019-01-04', '2019-01-11', '2019-01-18']
var sData = [-4.43, [-3.47, -3.34], -3.62, [-4.20, -3.70], -4.04, -3.75, -4.46, -4.50, -4.50, -4.50, -4.05, [-3.76, -3.64], [-3.38, -3.09], -3.24, -2.88]

function formatData() {
  var newLabels = []
  var newData = []
  for (var i = 0; i < sLabels.length; i++) {
    if (Array.isArray(sData[i])) {
      for (var j = 0; j < sData[i].length; j++) {
        newLabels.push(sLabels[i])
        newData.push(sData[i][j])
      }
    } else {
      newLabels.push(sLabels[i])
      newData.push(sData[i])
    }
  }
  return [newLabels, newData]
}

var [labels, datasetData] = formatData()

var data = {
  labels: labels,
  datasets: [{
    data: datasetData,
    lineTension: 0
  }]
}

Leave a comment