CODEWITHSUNDEEP
javascriptjsonc3.js
Mike
Mike

Reputation: 69

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',
    mimeType:'json'
  }
});

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

Upvotes: 0

Views: 226

Answers (1)

mgraham
mgraham

Reputation: 6207

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]);
      }
  }
}

http://c3js.org/reference.html#tooltip-format-value

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")

Upvotes: 1

Related Questions