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
Pascal Brewing
anyone here :) ?
Damian Szidiropulosz
Pat RTomé
Hello, I am trying to change the tooltip title of a donut chart, depending on the slice. I can see how you change the title for a line chart, but when I use the same function ie title: function(d) {balboa} I get d undefined.
If I have my data as ['toto data1',1,2,3] I would like to have to have the title being 'toto'.
How do I get to this first element of my data? here is my COdePen test https://codepen.io/prtome/full/LmKPpy/
Thanks for any help!


Is there any way to display different colors for thresholds on Gauge?

Thanks for help !


Hello folks,

I am just new to c3.js . There is any possibility to implement the pie chart label in c3 like highchart => https://www.highcharts.com/maps-demo/pie-basic .


Michael Gregory
What's going on! Wondering if anyone has implemented a heat map using c3 / d3. I'm about to go down that route and it would be amazing if it were possible to reuse some of the config from my existing chart components that use c3.

hello Can we provide different max values for each data array in c3.js gauge graph
c3.js library accepts two data sources(example : production and time) in gauge graphs but only with one max value, Is there format to provide different max values for two data sources I used below format to accept two data sources for gauge graph

but this is accepting same max values for both data sources is there any provision for accepting two max values for each data source
refer this fiddle: https://jsfiddle.net/srinivasyl/nd25q7s6/8/

@rahul-winner yes there is way for provision threshold colors
color: {
pattern: ['red, 'green', 'yellow', 'blue'], // the three color levels for the percentage values.
threshold: {
values: [30, 60, 90, 100]
source https://c3js.org/samples/chart_gauge.html

I am trying to create multiple c3js graph in a page. Once one graph is loaded am trying to load other graphs. But when i try to load third chart first two charts are flickering. It is annoying for my page. As analyzed, c3's generate function vanish the div and regenerate the entire graph, But my requirement is existing chart object retain is enough. Please Someone guide me to solve this.

function loadingGraph() {     
   columns: [ values1]


Yoshiya Hinosawa
@kumaranc Could you share how you call the generate function?
var chart = c3.generate({
size: {
height: 166
data: {
columns: [
                type: 'bar'
            bar: {
                //width: {
                //  ratio: 0.5 // this makes bar width 50% of length between ticks
                // or
                width: 20 // this makes bar width 100px
            axis: {
                y: {
                    min: 0,
                    max: max,
                    label: {
                        text: 'aaaaa',
                        position: 'outer-top'
                    padding: {
                        top: 0,
                        bottom: 0
                    tick: {
                        count: 5
            grid: {
                x: {
                    lines: line
                y: {
                    lines: [{value: 0}]
Yoshiya Hinosawa
I think you should use bindto option in generate to control which chart binds to which dom element.
First create dom elements with ids and generate charts specifying those ids, and each chart works independently.
I've added bindto attribute in it and still it is flicker. Graph is generated but while updating other graphs am passing same set of data to the generated graph, it flickers. I've tried by passing same data in settimeout function it wont flickers. But while updating the panel it is flickering.
*I've tried settimeout in c3js site
Alexander Lenail
How does one do an update in c3.js? It seems like there are .load and .unload methods, but I'm not finding a way to do a generic update in the docs.
e.g. say data is [['a', 5], ['b',3],['c',7]] and I have a donut chart. Then data becomes [['a', 7], ['f',4],['c',5]]
Using the current API, I would need to do a .load(new_data) but also an .unload(['b'])
Is that right? Seems a little convoluted
hi. anyone here?
Paulo Menezes
Khadem Avinoor Alam
I have a line chart and a bar chart both have the same columns or data sets. I know in line charts, I can rename a column value/text using data.names but is there a way to do it for tick values/text for a bar chart?
Claudio Gamboa
Hi, can anyone tell me why in a timeseries bar chart with rotate true (horizontal bars) the recent date is in the bottom and not in the top? Thanks
Ambika Kumar
@/all How can I use multiple tooltip in the c3chart?
Zijing Zhang
How to import C3 to use it with Angular Project?
Daniel Doblado
Hello, anybody can show me how to apply a format to the chart labels [data1, data2] to add a custom string? https://jsfiddle.net/nkhgaf6t/ I only find how to modify the tool tip or the labels inside the donut.
Daniel Doblado
nevermind, I found, now the property names, I kept trying with labels
Hi, I want to show grey circle when there is no data using donut chart. Kindly help me on this.
Hi everyone! I'm trying to update X Axis culling, any clue? Thanks!
Finally figured out how to do it, I just filtered the X axis ticks at tick.format function
Hi, I am trying to trigger the click event of the first chart to pass some data to another chart on the same web page, anyone knows it is possible with C3 and how?
hi does anyone have experience printing with c3 bar charts? A demonstration can be found on https://c3js.org/samples/chart_bar.html when i ctrl + p it does not print all of the groups only covers 4/6 of them this is also happening on my project
guys, I need your help with c3js,
Did any try to achieve customizing the series label like kendo UI angular offers?
Trying to achieve like attached image and highlighted in the red color.