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
Advaith Doosa
I would like to use C3 for a simple project which creates the data through NodeJS
Nishchal Gautam
Hey, my pie chart is displaying in percentage values, can I show it in pure numbers?
Prathik Kalakota
Hi All, I have regions in the main chart. Is there a way to show those regions in subchart as well?
Igal Alkon

Hey! I have this chart, that in some situations can have many data points - with zoom feature enabled.
In such case, the number of ticks (and tick labels) can become too big.
I looked up google for solutions and found something like this:

c3.chart.fn.axis.adjust_x_ticks_by_zoom = function (zoomLevel) {

    var $$ = this.internal, config = $$.config;

    $$.axes.y.style("visibility", config.axis_y_show ? 'visible' : 'hidden');

    if(zoomLevel < 1) {
        config.axis_x_tick_count = 250;
    } else {
        config.axis_x_tick_count = Math.round(250/zoomLevel);

    // TODO: when calling redraw() zoom stop zooming out ...

My issue is, it works great - but calling $$.redraw(); brakes zooming out - I'm not sure why.

Philip Kirkbride
Anyone know how to do custom backgrounds with the y-axis?
Igal Alkon
@kirkins You should use region.
@kirkins You can set region on x and y, and control color via classes.
Ignore my other example, I'm having an issue when once I call $$.redraw(); inside c3.chart.fn.axis.myMethod my zoom settings get screwed (reset?).
I'm trying dynamically adjust the value of config.axis_x_tick_count upon zoomEnd event.
If I do not call $$.redraw(); inside this method I only see the update once I "move" the chart.
Igal Alkon
If anyone can assist me with this issue, please leave a message, I'll be around.

Hey there,

I need a feature to update the axis values.
I'm using C3 to render huge charts and updates data with the method load, instead of render the whole chart again.
The project has it's own algorithm to calculate the tick values. To update the axis config via the given axis API does not solve isusse,
because min and max don't change the axis scale. Please, add a feature to change the tick values of the axis like "chart.axis.min.(....)".

I solved the problem with the following snippet:
chart.internal.config.axis_y_tick_values = yTickValues;

  withY: true,
  withSubchart: true,
  withTransition: true,
  withTransform: true,
  withUpdateXDomain: true,
  withUpdateOrgXDomain: true,
  withTrimXDomain: true,
  withUpdateXAxis: true,
  withLegend: true,
  withEventRect: true,
  withDimension: true,
  withTransitionForExit: true,
  withTransitionForAxis: true,
}, false);

Igal Alkon
Hey, in this page there's simple examples that have that 'c3-event-rect' feature enabled that enables showing the tooltip even if you're not on same point with mouse.
I can't understand how I enable this in my own chart, it's not shown by default.
in my chart, I have a single event rect instead of per point .
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/