Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jan 31 2019 22:56
    hieroglyph1 starred c3js/c3
  • Jan 31 2019 04:41
    paulcarroll starred c3js/c3
  • Jan 31 2019 01:24
    morukutsu starred c3js/c3
  • Jan 30 2019 20:54
    ebk13579 starred c3js/c3
  • Jan 30 2019 20:51
    stanzani starred c3js/c3
  • Jan 30 2019 18:02
  • Jan 30 2019 17:32
  • Jan 29 2019 22:08
    michaelreynolds starred c3js/c3
  • Jan 29 2019 21:00
    mikeringrose starred c3js/c3
  • Jan 29 2019 17:06
    mullerzs commented #2357
  • Jan 29 2019 07:40
    whbjob starred c3js/c3
  • Jan 29 2019 05:28

    kt3k on gh-pages

    Deploy c3js/c3 to github.com/c3… (compare)

  • Jan 29 2019 05:25

    kt3k on master

    Typo fix (#2568) (compare)

  • Jan 29 2019 05:25
    kt3k closed #2568
  • Jan 29 2019 01:38
    hiro-info starred c3js/c3
  • Jan 28 2019 16:32
    codecov-io commented #2568
  • Jan 28 2019 16:32
    codecov-io commented #2568
  • Jan 28 2019 16:29
    codecov-io commented #2568
  • Jan 28 2019 16:29
    codecov-io commented #2568
  • Jan 28 2019 16:27
    Salsao opened #2568
for a Data Label, how do I format it's position, and enable a line break in the text? Thanks.
Igal Alkon
Hey, seems like a found some kind of bug related to zoom feature, I though it's something with my code, however just notice same happens on the default zoom example.
If you "grab" chart, zoom & drag (zoom) to the very edge, then release and try grab and move to the other direction, it gets stuck, but releases after few tries.
Has anyone idea why this might happen?\
Anuchit Thiam-Uan | Jak
Hello guys, can some of you help me on exporting the chart to an image, please?
I tried using the html2canvas and went along with the examples out there but I wasn't successful.
Venkata Sandeep
Hai, I encountered with a problem in mouseover chart data point, there is a shift in position of mouseover datapoint and tooltip showing datapoint in firefox
Here is the jsfiddle
Venkata Sandeep
this problem is coming for timeseries charts only
Igal Alkon
@dhvsandeep Yes, this is strange, on chrome the offset changes with mouse move right (on most left it's okay).
@dhvsandeep It does seemed some kind of bug, but I know it should work fine as I'm using similar configuration my self.
I would check the data maybe... and also playing with selection settings although I did and it changed nothing for default case.
but if you find no issue with data, perhaps try creating an issue on github.
Igal Alkon
The following setup seems to work fine (less data):
var chart = c3.generate({

  "data": {
    "x": "x",
    "columns": [
      ["Data 1",
     ["Data 2",
    "type": "area",
    "selection": {
      "grouped": true    ,
      "enabled": true,
      "multiple": true,
      "draggable": true
    "axes": {}
  "axis": {
    "x": {
      "show": true,
      "type": "timeseries",
      "tick": {
        "rotate": 0,
        "format": "%b %Y",
        "fit": false,
        "culling": {
          "max": 24
    "y": {
      "label": {
        "text": "Revenue",
        "position": "outer-middle"
      "tick": {}
  "legend": {
    "show": true
  "grid": {
    "x": {
      "show": true
    "y": {
      "show": true
  "tooltip": {
    "show": true,
    "format": {}

Venkata Sandeep
@alkavan, there is no problem with minimal values, timeseries data is always in large sets, and i’ve raised issue in github also #1999 , this problem raises for timeseries chart only
Igal Alkon
@dhvsandeep Okay, I subscribed to it. It's strange cause we are too using timeseries, with multiple data series, something like 30-500 points, and never we had the issue.
Joe Sweeney
Is it possible to to have a bar graph with a single group?
I dont want multiple groups I want a regular bar graph
Oshadha Gunawardena
Hello everyone,
How do I make legend points circle rather than square ?
Found this example but it's confusing
Michael Rodov
@RockyRx Its all in CSS. if you want to use the default tooltip and just make it round you need to find teh css that is assigned to the default tooltip and add border_radius: xx
@RockyRx if you want to have a completely customer html you can return it as part of the .tooltip property
Michael Rodov
@RockyRx tooltip: {
show: true,
contents: function (points, f1, f2, colors) {
var html = '<div class="tooltip-date">';
html += '<div class="date">' + dateString + '</div>';
html += '<div class="wseparator"><hr class="separator"></div>';
html += '<div class="content-wrapper">' + valuesListHtml + '</div>';
                        return html;
Oshadha Gunawardena
@michaelrodov Thanks for the details. But I managed achieve this with pure HTML and CSS. Since it my requirement didn't expect any interactions with the legend it was all good. :)
Michael Rodov
pure css + html was my suggestion. glad u made it
Hi. I'm building a timeseries chart. The chart is showing only alternate x axis labels. Is it possible to show values for all X axis points?
Please ignore the above fiddle.
Alexey Okhrimenko
@michaelrodov can force tooltip to slide between values? for example I have two points on a line chart, can I show tooltip for a value in between?
Andrej Rapoport
Hi! How do I get rid of an excess tick on an axis? I set the range max to 100 but it still appends a 110 tick: https://jsfiddle.net/twn1539b/
max: 91 would do the job :-) but I want the code to be semantically correct...
Anirban Bera

HI! I am trying to replicate the exact behavior on the click of any data-point in a C3 chart (refer this plunk https://plnkr.co/edit/hx16Fb3qrEs8eFobvPeN?p=preview ) without writing any custom event handler in onclick property. i.e I don't want to override onclick and don't want to use d3.selectAll.

Can I replicate the same behavior using data.selection properties (or any available properties) and overriding the css classes? somewhat similar approach taken in this fiddle http://jsfiddle.net/AnirbanBera/utzp8mwr/

Anshuman Aggarwal
Any ideas on using c3 with a virtual dom library such as snabbdom...since SVG is basically in the DOM itself
Hello ALl
I am accessing REST API URL in my c3 chart. The data is in JSON format : [{"ID":"000008","time":1495030312895,"col1":72.2,"col2":54.3,"col3":5.6},{"ID":"000008","time":1495030318484,"col1":16.2,"col2":54.3,"col3":0.4},{"ID":"000008","time":1495030323895,"col1":21.1,"col2":54.2,"col3":1.1},{"ID":"000008","time":1495030329683,"col1":75.7,"col2":54.3,"col3":0.7},{"ID":"000008","time":1495030335086,"col1":18.4,"col2":54.3,"col3":0.4},
I want to display timeseries chart with multiple lines . On x-axis: "time" , and each line for "col1","col2" and "col3". How can I achieve this?
Hi...How can I Dynamically keep updating the chart for every 5 min?
I am generating chart using c3. I am accessing Rest API in the c3 chart to load the JSON data. I referred this example http://c3js.org/samples/data_load.html I am trying to load the chart dynamically using load function which gives me Runtime Error this.chart.load is not a function
Isaac Bitrus
hello pple
Hello. Is there a way I can control which of the points are hidden/shown, for instance based on some condition? point.show is all or nothing.
I imagine something like this would be nice:
points: {
    show: function(d) {
        if (<condition>) { return true; }
        return false;
Randall Gonzalez
Hi guys
How can I set two or more legends with the same name in c3?
if I set two with the same name, it will just create one bar.
Hans Jakob Emmel
Hi Guys, I am running the C3 testes but some of them are failing. Is that normal or am I doing something wrong ?
@Ranguro I did not test it but you could set the same name for them, take a look at: http://c3js.org/samples/data_name.html
Yoshiya Hinosawa
@hjemmel how many failures do you see? Do you use windows or mac?
Currently master's npm test passes on my local mac.