C3: Make it possible to hide data from a chart without unloading

[jasonlally]

Is it possible to simply stop data from loading in the chart without actually unloading the data itself from the data object. I'm toying with a use case where related data could be included in CSV, but only displayed in the tooltip (for example, margins of error).

If it were possible to just stop the visual for a particular data id from loading without removing the data altogether (through unload) then I could access the data in the tooltip contents without referencing another source.

Does that make sense. So the feature I'm looking for is something like

hide({ids: ''}) 

instead of an

unload({ids: ''})

Is this currently possible, and I'm just missing it? I understand this may be an edge use case, but being able to pass in data and not load it into a chart would allow easier access to data for cases where someone wants to use and manipulate that data in non-chart elements.

[jasonlally]

To clarify, I want to hide the data altogether from the chart elements, including legends. So I know I can hide the chart element, but I don't want to give users the option to turn it on. I guess if there's a way to also hide select options in legends, then that would satisfy this use case.

[masayuki0812]

Sorry for poor documentation. I think this should work:

chart.hide(['id1', 'id2', ...], {withLegend: true})

Could you try this?

[jasonlally]

No worries, thanks for putting me on the right track. I may have found a bug or it could be user error :smile:

I have this right after I generate my chart

chart.hide(['MOE_Renter','MOE_Owner'],{withLegend: true});

And I get this:

With this error and stacktrace in the debugger:

Uncaught TypeError: Cannot read property 'selectAll' of undefined c3.js:5696
c3_chart_fn.hide c3.js:5696
generateChart (index):1343
init (index):830
window.onload (index):805

I'm using the latest c3 0.4.3 release

[masayuki0812]

Thank you for the detail. I think you might need to call hide after some duration because it takes some time to generate the chart when c3.generate called. Please show me your code if it's still not working.

[jasonlally]

Ah, that makes sense. Is there a way to pass in a callback to c3.generate? Otherwise I can set a timeout.

[masayuki0812]

I added legend.hide option, so please use this with data.hide option (this already exists).

chart.generate({
  data: {
    hide: ['MOE_Renter','MOE_Owner']
  },
  legend: {
    hide: ['MOE_Renter','MOE_Owner']
  }
});

legend.hide can be used when we hide only legend while data is still visible, so I didn't hide legend implicitly when data.hide set.
I'll release this in the next version 0.4..4 shortly, but please try this commit before it if possible.

[jasonlally]

That worked :+1:

Thanks! This is really a great library. I hope I find some time to contribute more than ask for help, but I really appreciate the help.

[masayuki0812]

OK :+1: v0.4.4 has been released, so please let me close.

[syaf-rizal]

when i try click a chart (ex. bar) is there way to get value from data.hide? @masayuki0812

[clement911]

Thanks that worked for me too,
however I can seem to find a way to access the hidden fields from the tooltip.contents callback.
It seems that the data parameter only include non-hidden fields.
Am I missing something?

[stephenlane]

@clement911 did you ever figure this out?

[clement911]

I'm afraid not.

[stephenlane]

came up with a creative workaround :) I hide the line using css and use c3 to hide the legend and then its available just in the tooltip

[hardhub]

I added legend.hide option, so please use this with data.hide option (this already exists).

chart.generate({
  data: {
    hide: ['MOE_Renter','MOE_Owner']
  },
  legend: {
    hide: ['MOE_Renter','MOE_Owner']
  }
});

legend.hide can be used when we hide only legend while data is still visible, so I didn't hide legend implicitly when data.hide set.
I'll release this in the next version 0.4..4 shortly, but please try this commit before it if possible.

@masayuki0812

When custom colors specified bars do not have correct color.

var chart = c3.generate( {
  "data": {
    "x": "x",
    "colors": {
      "data1": "red",
      "data2": "green",
      "data3": "blue",
      "data4": "orange",
      "data5": "black",
      "data6": "violet",
      "data7": "gray",
      "data8": "magenta",
      "data9": "yellow",
      "data10": "pink"
    },
    "type": "bar",
    "columns": [
      [ "x", "46","47","48","49","50","51","52","53","1","2" ],
      [ "data1", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data2", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data3", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data4", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data5", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data6", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data7", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data8", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data9", 9,9,9,9,9,9,9,9,9,9 ],
      [ "data10", 9,9,9,9,9,9,9,9,9,9 ]
    ],
    "hide": ["data7", "data8", "data9", "data10"],
    "groups": [
      [
        "data1",
        "data2",
        "data3",
        "data4",
        "data5",
        "data6",
        "data7",
        "data8",
        "data9",
        "data10"
      ]
    ]
  },
  "axis": {
    "x": {
      "type": "category",
      "label": {
        "text": "",
        "position": "outer-right"
      },
      "tick": {
        "culling": true
      }
    }
  }
});

P.S. Reopen?