CODEWITHSUNDEEP
c3.js
Anup Raj
Anup Raj

Reputation: 73

c3.js how to remove line with tooltip?

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

I have tried tooltip formatting but the line remains same.

How this can be done?

Upvotes: 7

Views: 4978

Answers (4)

Philipp Schemel
Philipp Schemel

Reputation: 1051

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

{
    tooltip: {
        show: false
    }
}

Overriding CSS properties of c3 is not a good idea.

Upvotes: 0

Syed Raza
Syed Raza

Reputation: 1100

grid:{
  focus:{
    show:false
  }
}

May be at that time when person answer this question config parameter not provided but now you can do it through above mention configuration. Reference http://c3js.org/reference.html#grid-focus-show

Example code 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
      }
    }
});

Upvotes: 12

user1909447
user1909447

Reputation: 11

point: {
 show: false
},

False to hide the points and true for show the points

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

Here is the Example: http://c3js.org/reference.html#point-show

In below code I have 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
  }
});

Upvotes: 0

Chetan
Chetan

Reputation: 2756

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

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

I could not quickly find a config parameter to turn this feature off in the api doc.

enter image description here

Upvotes: 4

Related Questions