Mike Mike - 1 year ago 66
JSON Question

how do i set json data set as labels for graph plot with c3.js

I have a line graph generated with c3.js with json data

the current chart is very simple

var chart = c3.generate({
bindto: '.balanceChart',
data: {
url: '/data',

json data:

data1: [1000,1240,1270,1250,1280]
data2: [1000,240,30,-20,30]

chart looks good and is there
but it is currently plotting both sets of data
what i would like is for data2 to be the tooltip value of the plot

Answer Source

You can hide data2 from displaying like so

data: {
  hide: ['data2']

From http://c3js.org/reference.html#data-hide

And use tooltip.format.value to change the tooltip display

tooltip: {
  format: {
    value: function (value, ratio, id, index) { 
          // return chart.data.values("data2")[index]; // if still wanting to use data2

          // or get rid of data2 completely using this
          var vals = chart.data.values(id); // id will be 'data1', vals will then be data1 array
          return vals[index] - (index === 0 ? 0 : vals[index - 1]);


tooltip.format.title and tooltip.format.name will also be useful here to communicate to a user the value isn't actually that of data1 (maybe just changing the title to "Delta Data1")

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download