chartjs create scrolling on the x axis

Question

i have created the chart,

but how would i make it so that there is a scrollbar and that the values are not so tightly compacted, so that you can read it, like the spacing is like a center meter for each x value.

as you can see in the jsfiddle it always the length of the container and not creating scrollbars.

https://jsfiddle.net/a5co4nqk/

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

var data = {
  datasets: [
    {
      //label: "Scatter Dataset",
      data: [
        { x: 0, y: 0},
        { x: 1066, y: 10000 }
      ]
    },
    {
      //label: "Scatter Dataset 2",
      data: [
        { x: 0, y: 0},
        { x: 546, y: 15000 }
      ]
    },
     {
      //label: "Scatter Dataset 2",
      data: [
        { x: 0, y: 0},
        { x: 12546, y: 2800 }
      ],

    },
     {
      //label: "Scatter Dataset 2",
      data: [
        { x: 0, y: 0},
        { x: 112546, y: 2800 }
      ],

    }
  ]
};

var myLineChart = new Chart(ctx, {
  type: "line",
  data: data,

  options: {
  legend: {
        display: false
    },
        scales: {
            xAxes: [{
            ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                    console.log(index);
                        return  value /1000 + 'secs';
                    },
                    // beginAtZero: true,   // minimum value will be 0.,
                    stepSize: 500,// this is .5 secs
                    //   precision: 0.5 
                    autoSkip: false,

                },
                type: 'linear',
                position: 'bottom',

            }]
        }
    }
});

Answer 1

You could include the canvas inside a div element.

<div>
  <canvas id="chartJSContainer" height="10"></canvas>
</div>    

and add the following definition to your CSS file.

div {
  width: 10000px;
}

Please have a look at https://jsfiddle.net/f48evmyh/