c3js/c3

A D3-based reusable chart library

Pascal Brewing

@DrMabuse23

  "clc_humidity": {
    "2018-02-26": [
      {
        "value": "43.00",
        "time": "2018-02-26T09:39:00.000Z",
        "deviceId": "BBBRX",
        "type": "clc_humidity"
      },
      {
        "value": "50.86",
        "time": "2018-02-26T09:41:00.000Z",
        "deviceId": "BBBRX",
        "type": "clc_humidity"
      },
      {
        "value": "51.93",
        "time": "2018-02-26T09:50:00.000Z",
        "deviceId": "BBBRX",
        "type": "clc_humidity"
      },
      {
        "value": "47.93",
        "time": "2018-02-26T10:00:00.000Z",
        "deviceId": "BBBRX",
        "type": "clc_humidity"
      },
      {
        "value": "46.93",
        "time": "2018-02-26T10:10:00.000Z",
        "deviceId": "BBBRX",
        "type": "clc_humidity"
      },

i have a stricture like this with many days

the user want to see 24 hours Chart from every day

i dont no what i have to use ?

i need a multiple timeseries chart

Pascal Brewing

@DrMabuse23

anyone here :) ?

Damian Szidiropulosz

@dszidi

Hello?

Pat RTomé

@prtome

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!

rahul_winner

@rahul-winner

Hello,

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

Thanks for help !

prasanthmaran1

@prasanthmaran1

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 .

Thanks

Michael Gregory

@MichaelGregory

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.

srinivasyl

@srinivasyl

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/

srinivasyl

@srinivasyl

@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

kumaranc

@kumaranc

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() {     
  chart21.load({
   columns: [ values1]
 });
}
loadGraph();

Thanks,

Yoshiya Hinosawa

@kt3k

@kumaranc Could you share how you call the generate function?

kumaranc

@kumaranc

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

@kt3k

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.

kumaranc

@kumaranc

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.

kumaranc

@kumaranc

*I've tried settimeout in c3js site

Alexander Lenail

@zfrenchee

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

dodumosu

@dodumosu

hi. anyone here?

Paulo Menezes

@paulomenezes

Hello

Khadem Avinoor Alam

@DemonFangs

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

@suskind

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

@ambikarajbadal

Hey,
@/all How can I use multiple tooltip in the c3chart?

Zijing Zhang

@zzj0402_gitlab

How to import C3 to use it with Angular Project?

Daniel Doblado

@dobladov

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

@dobladov

nevermind, I found, now the property names, I kept trying with labels

guneshvummiti

@guneshvummiti

Hi, I want to show grey circle when there is no data using donut chart. Kindly help me on this.

EdgarAP

@EdgarAP

Hi everyone! I'm trying to update X Axis culling, any clue? Thanks!

EdgarAP

@EdgarAP

Finally figured out how to do it, I just filtered the X axis ticks at tick.format function

wangziyun1986

@wangziyun1986

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?

petern160

@petern160

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

Srinivasan

@kksrini89

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.

Where communities thrive

People

Repo info

Activity