C3.js, how to delete a line using a tooltip?

Question

I am creating a line chart using c3.js. I want to delete the default indicator line on the x axis with a tooltip.

I tried formatting a tooltip, but the string remained the same.

How can I do that?

Answer 1

Just override the following css property in the .c3-xgrid-focus class: -

.c3-grid .c3-xgrid-focus { visibility : hidden !important; }

I could not quickly find the configuration parameter to disable this function in api doc.

Answer 2

 grid:{ focus:{ show:false } } 

Maybe the moment the user answers this config parameter is not provided, but now you can do this through the above configuration. Link http://c3js.org/reference.html#grid-focus-show

Code example below

 var chart = c3.generate({ data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] }, grid:{ focus:{ show:false } } }); 

Answer 3

According to BonifatiusK's comment, you should hide them by editing chartOptions.

 { tooltip: { show: false } } 

Overriding c3's CSS properties is not a good idea.

Answer 4

 point: { show: false }, 

False to hide dots and true to show dots

Note: Make sure you are going to write this after loading the data and along with other settings in c3. Create function

Here is an example: http://c3js.org/reference.html#point-show

In the code below, I highlighted the code with a comment:

 var chart = c3.generate({ bindto: '#CYCLE_CHART', data: { columns: [ ["Cycletime"].concat(objCycle.cData), ["Downtime"].concat(objDowntime.dData), ["StdCycletime"].concat(objStdCycle.stdCData), ["StdLoadunloadtime"].concat(objStdLUtime.stdLUData), ], type: 'spline', types: { Cycletime: 'bar', Downtime: 'bar' }, names: { Cycletime: 'Cycle time', Downtime: 'Load time', StdCycletime: 'Std Cycle time', StdLoadunloadtime: 'Std Load time' }, }, axis: { x: { label: { text: 'Cycles', position: 'outer-center' }, max: 10, min: 1, }, y: { label: { text: 'Seconds', position: 'outer-middle' }, max: Y_axis, min: 1, } }, // Here! point: { show: false }, tooltip: { show: true } });