Is there a way to add horizontal scroll bar for a bar chart made using dimplejs?

Question

I made a bar chart using dimple.js template. Here is the code:

<div id="chartContainer">
<script src="/lib/d3.v3.4.8.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 1000, 1000);
d3.csv("Device_6_energy.csv", function (data) {
  var myChart = new dimple.chart(svg, data);
  myChart.setBounds(60, 30, 6000, 305)
  var x = myChart.addCategoryAxis("x", "Date");
  x.addOrderRule("Time");
  myChart.addMeasureAxis("y", "Consumption");
  //myChart.width = 6000;
  myChart.addSeries(null, dimple.plot.bar);
  myChart.draw();
});

Number of values on x-axis is huge. So, I am facing a problem where only some bars of the graph are displayed. The rest just cuts off.

The following is the format of the Time from my .csv file.

4/3/2015 20:00
4/3/2015 21:00
4/4/2015 1:00
4/4/2015 3:00
4/4/2015 4:00
4/4/2015 5:00

I want to know if there is a way to add a scroll bar at the bottom of the graph to view all the bars till the end.

Answer 1

Looks there's no inbuilt support for scrollbar. Instead you can use browsers native scrollbar by adding the overflow property .

#chartContainer { overflow-x : scroll ;}