Setting xAxes type to linear causes line chart to not be drawn

[mscheker]

I have the following simple line chart:

<canvas id="myChart"></canvas>

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: "My First dataset",
            data: [1, 2, 3, 20],
        }],
        labels: [1, 2, 10, 20],
    },
    options: {
    	scales: {
      	xAxes: [{
          display: true,
          type: 'linear',
          position: 'bottom',
          ticks: {
          	min: 0,
            stepSize: 1
          }
        }],
      }
    }
});

Whenever the xAxes type is set to linear, the line chart is no longer drawn within the chart. Here is a fiddle showing the issue. I am using the latest version, 2.6.0.

I have looked on SO and through the issues reported but haven't found a way to get this to work.

Thanks in advance for your assistance.

[etimberg]

@mscheker linear x axes only work with scatter data. An example of this is http://www.chartjs.org/samples/latest/charts/scatter/basic.html

If you want to use data.labels you need to use a category x axis

[mscheker]

@etimberg Thank you for your response. If I have data as follows:

data: {
        datasets: [{
            label: "My First dataset",
            data: [1, 2, 3, 20],
        }],
        labels: [1, 2, 10, 20],
    },

Is there a way to set the axis' stepSize so it displays the ticks from min to max (0-20 - based on the labels), for example? If not, I'll try to change the dataset if need be.

Thanks again.

[etimberg]

@mscheker that's not possible based on the labels.

I think this will convert the data to a format that works for a scatter chart

function convertData(data) {
  var newData = {};
  newData.datasets = data.datasets.map((dataset) => {
    return {
      label: dataset.label,
      data: dataset.data.map((d, i) => {
        return {
          x: data.labels[i],
          y: d
        }
      })
    };
  });

  return newData;
}

[mscheker]

Got it. Thanks for your help @etimberg!

[himanshu2047]

@mscheker linear x axes only work with scatter data. An example of this is http://www.chartjs.org/samples/latest/charts/scatter/basic.html

If you want to use data.labels you need to use a category x axis

If I want to use it for line chart then what type i need to give

[ravenasy]

if i use solution etimberg , i have probleme type