c3js have x axis start from 0 when it has negative value

Question

Used this c3js - having the X axis in the middle of the chart to get the chart to start from 0. But when I click on the legend, the x grid reverts the bottom. Any ideas on how to make it start from 0?

My charts are dynamically created and assigned to a specific dom element id

Answer 1

Your d3 manipulation is only called once after you created the chart. When you use the legend to toggle something, the chart is generating itself again without displaying this particular selection. When this happens, you have to manipulate the chart again. You can do this using the onclick event from the legend. You have to call the toggle function here again because you override the default onclick function.

var chart = c3.generate({
    ...
    legend:{
          item:{
            onclick: function(data){
             chart.toggle(data);
             d3.select(chart.element)
             .select('.' + c3.chart.internal.fn.CLASS.axisX).transition()
             .attr('transform', "translate(" + 0 + "," + chart.internal.y(0) + ")")
            }
          }
        }
});