c3js, keep x axis tick values and remove points

Question

I have this chart, with an x axis that loads close to a thousand timeseries points.

These points are unattractive.

I could hide the x axis, but I want the dates to appear underneath, minus the tick points.

Is there a way to remove tick points while leaving the times. (Please ignore numbers on x axis I know they're wrong).

Preferably, I would like this to be a category line chart and avoid timeseries entirely.

Code, with removed data for simplicity -

var chart = c3.generate({
        padding: {
            right: 30
        },
        data: {
          x: 'x',
          columns: [
                ['x',1324252800,1324339200],
                ['OECD Crude Oil Price',102.91,105.05]         
          ],
          type: 'line',
          onclick: function (d, element) { console.log("onclick", d, element); },
          onmouseover: function (d) { console.log("onmouseover", d); },
          onmouseout: function (d) { console.log("onmouseout", d); },
          order: null
        },
        point: {
            show: false
        },
        axis: {
          x: {

            //show:false, 
            //I don't want this, I want to see the dates

            type: 'timeseries',
            tick: {
                culling: {
                    max: 3 
                },
                multiline: false
            }
          },
          y: {
            tick: {
                format: function (d) { return  "$ " + d ; }
            }
          }
        },  
      });

Thanks in advance

Answer 1

Okay, wow, silly of me. I've found this solution to a problem previously.

Here is my answer just a fortnight ago.

Facepalm.

Here's what the chart looks like now, with the desired effect -