Search code examples
javascriptd3.jsdata-visualizationc3

c3js line chart all data unselected how to show tick values

I have a simple c3js line chart w/3 different lines. When I "unselect" all 3 data sources, the x-axis tick values disappear. I was wondering if there was anyway to reverse this behavior? I'd like to show the x-axis tick values even when there is no data present.

The xaxis tick values are of a 'timeseries' type. Thanks!

Here is my c3 config for the line chart:

bindto: '#test',
data: {
  x: 'date',
  xFormat: '%m%d',
  columns: [],
},
legend: {
  position: 'bottom',
},
axis: {
  y: {
    tick: {
      format: function (d) { return d + '%'; },
      count: 5,
    },
    max: 100,
    padding: {
      top: 0,
      bottom: 0,
    },
  },
  x: {
    type: 'timeseries',
    tick: {
      culling: false,
    },
  },
},
color: {
  pattern: [testRateColor, firstRateColor, secRateColor],
},
Solution

  • Unfortunately this functionality is baked into c3.js and the only way to change this (aside from working purely from d3) is monkey patching. You will find the offender on line 6814 of c3.js:

    tickExit = tick.exit().remove(),

    If you change this to:

    tickExit = function() {},

    The ticks are no longer removed.