график js создать прокрутку по оси х

Question

Я создал диаграмму,

, но как бы мне сделать так, чтобы была полоса прокрутки и чтобы значения не были так плотно сжаты, чтобы вы могли читать их, как интервал Центральный метр для каждого значения x.

, как вы можете видеть в jsfiddle, это всегда длина контейнера, а не создание полос прокрутки.

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

Вы можете включить canvas в элемент div.

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

и добавить следующее определение в ваш файл CSS.

div {
  width: 10000px;
}

Пожалуйста, имейте посмотрите на https://jsfiddle.net/f48evmyh/