How to set min / max x axis in Rickshaw / D3?

Question

I want to show a linear timeline chart for today. At noon, only half of the graph will be filled, since the rows do not contain more data. How to make a rickshaw display a full schedule, not just timelines with existing data?

Answer 1

I had the same problem and it was solved by adding null data points with the desired minimum and maximum value of x:

 <div id="chart"></div> <div id="x_axis"></div> <script> var graph = new Rickshaw.Graph( { element: document.getElementById('chart'), width: 500, height: 200, renderer: 'line', series: [ { data: [ { x: -5, y: null}, { x: 10, y: null}, ] }, { color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] } ] }); var x_ticks = new Rickshaw.Graph.Axis.X({ graph: graph, orientation: 'bottom', element: document.getElementById('x_axis'), pixelsPerTick: 100, }); graph.render(); </script> 

Here is a graph with the x axis from -5 to 10, with data only from 0 to 4.