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
Rafael J. Rodriguez
oh, in my case my labels will use dynamic data as they must keep count of something
Miguel Romero
Hi, how add Message For columns?
hi guys I have question for anyone that has used tooltips
with c3
Jesse Moseman
I'm a little board whats the most needed feature/bug to fix in c3?
How to get chart object by using a selector ?.. something like var chart = $("#chart_elem").???()
But does it return a c3 chart object ?!!
I need to select the chart(s) at will.. and update the data ..via selectors
PA Parent
Hi ! I'm doing a very simple line chart, nothing complex.. I use .load to add some dynamic new lines. Now, when I want to update the chart, I .unload() them all, and .load the ones I want, but color on line vs. legend isn't in sync :( (I let c3/d3 manage coloring!)
Hi! Is there any possibility to add some interactivity to chart regions? Like showing a tooltip on hover, selecting them, etc?
@flarroca This seems to be clear, but what about chart regions interaction? By 'regions' I mean this.
I am also very interested in getting advice for solving [this](c3js/c3#1898 issue
Sorry for bad formatting:)
@flarroca I have two issues:
First issue: I can't make my chart regions interactive. Your example shows how to show tooltips for data points and select data points, not regions. This is what I mean by 'regions' :
data: { regions: { data1: [{'start':1, 'end':2, 'style':'dashed'},{'start':3}], ... } }
It would be nice to have an option to show a tooltip with a duration of a region on hover, for example. Data selection which you have mentioned do not affect region.
Second issue: In my github issue c3js/c3#1898 I mentioned a case when one of area-step charts not rendered. This case could be easily tested by pasting the code from the issue to any example at c3js website.
Hi! Is there some method to make c3js gauge like this : http://i.stack.imgur.com/3Z5Uo.png ?
Michiel Borkent
I posted a question about C3 to StackOverflow today, but I didn't receive an answer. Maybe some people here want to take a look: http://stackoverflow.com/questions/40978603/c3-line-chart-compress-or-break-interval-between-distant-points
Kenneth Bier
@aendrew any chance you can cut an rc release of 0.4.12? I see we have a new feature merged :)
imo its good for momentum to continue to make new releases. there has only been one this year
Hi guys, does anyone know how to change the opacity of a region?
Michiel Borkent
Is it possible to only show the details in the tooltip from a focused line in a line chart?
Michiel Borkent
For example in this chart only "Columbia British" is selected and I would like to show that only in the tooltip:
Michiel Borkent
Managed to work around it :)
Andres Santos
hello guys, I noticed the samples are meant to work with a previous version of angular2, does anyone have a more recent sample?
Ændrew Rininsland
:confused: @geekgeniero_twitter — there’s an Angular example, much less an Angular 2 example? Where?
Nikolay Zhuravlev
Hello there. Is it possible to stretch the chart in the full with container? There are indent on the side now — https://codepen.io/anon/pen/OWNvdR
Hi guys, why there is a problem in rendering second and fourth line in this sample? What causes the problem?
var chart = c3.generate({ data: { type: 'line', json: [ {first: 1, time: 1484653440000}, {first: 0, time: 1484653485000}, {second: 1, time: 1484653485000}, {second: 0, time: 1484653498000}, {third: 1, time: 1484653494000}, {third: 0, time: 1484653497000}, {fourth: 1, time: 1484653497000}, {fourth: 0, time: 1484653500000}], keys: { x: 'time', value: ['first', 'second', 'third', 'fourth']} }, axis: { x: { type: 'timeseries' } }, line: { step: { type: 'step-after' } } });
var chart = c3.generate({
    data: {
        type: 'line',
        json: [
            {first: 1, time: 1484653440000},
            {first: 0, time: 1484653485000},
            {second: 1, time: 1484653485000},
            {second: 0, time: 1484653498000},
            {third: 1, time: 1484653494000}, 
            {third: 0, time: 1484653497000}, 
            {fourth: 1, time: 1484653497000},
            {fourth: 0, time: 1484653500000}],
        keys: {
            x: 'time', 
            value: ['first', 'second', 'third', 'fourth']}
    axis: {
        x: {
            type: 'timeseries'
    line: {
        step: {
            type: 'step-after'
Above is a picture of a resulting chart
My goal is to have points in charts 'second' and 'fourth' connected
I have also noticed that using 'columns' data type instead of json gives desired result:
var chart = c3.generate({
    data: {
        type: 'area-step',
        xs: {
            'data1': 'x1',
            'data2': 'x2',
            'data3': 'x3',
            'data4': 'x4'
        columns: [
            ['x1', 1484653440000, 1484653485000],
            ['x2', 1484653485000, 1484653498000],
            ['x3', 1484653494000, 1484653497000],
            ['x4', 1484653497000, 1484653500000],
            ['data1', 1, 0],
            ['data2', 1, 0],
            ['data3', 1, 0],
            ['data4', 1, 0]
    axis: {
        x: {
            type: 'timeseries'
    line: {
        step: {
            type: 'step-after'
How to achieve the same with json?
Ok, got it. I should have added connectNull: true property...
Advaith Doosa
hey guys
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);