Как использовать диаграмму в JavaScript с большим набором данных

Question

Мне нужно визуализировать гистограмму с помощью Javascript. Поэтому я использовал C3 JS для визуализации графика. Просто я использую эту гистограмму следующим образом,

<div id="chart"></div>

<script>

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2'
      },
      types: {
        data2: 'bar'
      }
    },
    axis: {
      y: {
        label: {
          text: 'Y Label',
          position: 'outer-middle'
        },
        tick: {
          format: d3.format("$,") // ADD
        }
      },
      y2: {
        show: true,
        label: {
          text: 'Y2 Label',
          position: 'outer-middle'
        }
      }
    }
});

</script>

Но проблема в том, что ось X состоит из большой диаграммы набора данных, которая становится тесной. У меня более 700 данных.

Есть какой-нибудь возможный способ избежать этого? я могу добавить полосу прокрутки между первичной и вторичной осью X?

Answer 1

Google, такая замечательная вещь;)

https://c3js.org/samples/interaction_zoom.html

или это

Гистограмма C3 / D3 с горизонтальной прокруткой