Hey, in c3 native package it is possible to "flush" the chart, redraw it. Is it possible with your integration ? Or, have anyone an alternative ?

I need this because I am resizing a parent component but the chart (child) does not follow even If no width is specified .

Ty in advance.

Hey,
I've added this component to the page and it fails while page is trying to render on the server side.

I'm getting error:
/front-page/node_modules/c3/c3.js:8202
})(window);
^
ReferenceError: window is not defined
at Object. (/front-page/node_modules/c3/c3.js:8202:4)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object. (/front-page/node_modules/react-c3js/react-c3js.js:15:10)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)

Can you provide a repo that contains the source for the demo site? "View source" isn't very useful for compiled React apps. 😄

could not find this API
how can I now hide or show targets?

thx

If I create a chart by

<C3Chart 
    data={figures} 
    zoom={{enabled:true, onzoom: (d) => console.log(d) }} 
/>;

in console I can see that the domain of zoomed area is logged. My question is how can I apply this domain to other graphs that are already rendered in order to synchronize zoom level among them?

Hey,

I am trying to pass multiple Json data for the multiple line charts.

I know for the single line chart, line would pass the data as:

var data = {
    x: 'quantity1',
    json: this.state.data1,
    types: {
        quantity1: 'line'
    }
};

Here, in my case I want to draw two lines on the chart. Therefore I do this:

var data = {
    x: 'quantity1',     // this is the timestamp
    json: this.state.data1,
    json: this.state.data2,
   types: {
       quantity1: 'line',
       quantity2: 'line'
   };
};

I feel this is not the appropriate way to pass the data for the lines.

My timestamp data format in both the cases are:

{
    "Mon Apr 30 2018 00:00:00 GMT+0530 (India Standard Time)": 5.5,
    "Mon Apr 30 2018 00:30:00 GMT+0530 (India Standard Time)": 4.5,
    "Mon Apr 30 2018 01:00:00 GMT+0530 (India Standard Time)": 3.5,
    .... 
    ....
}

Please help me in this!

Thanks.

Since i want to build a custom Legend (http://c3js.org/samples/legend_custom.html) I need to focus and defocus.
Or did i miss s.th. how it is possible to achieve that?

I want to use something like this : chart.api.axis.max({y: yMax}), but I can't do this without access to the chart.
Update: it can be done with 'ref'.

Seems like unlike properties like axis and grid, changing regions neither removes any previous regions that were drawn the first time the C3Chart component was rendered nor renders the new ones.

Adding this.chart.regions.remove() to componentWillUpdateProps removes the regions but then new regions that are specified are not redrawn when C3Chart is re-rendered.

In a perhaps related observation, passing the unloadBeforeLoad prop doesn't seem to work for me...rendering seems unpredictable.

2] [dev:server]
[2] [dev:server] .../node_modules/c3/c3.js:8202
[2] })(window);
[2] ^
[2] [dev:server] ReferenceError: window is not defined
[2] at Object. (.../node_modules/c3/c3.js:8202:4)
[2] at Module._compile (module.js:541:32)
[2] at Object.Module._extensions..js (module.js:550:10)
[2] at Module.load (module.js:458:32)
[2] at tryModuleLoad (module.js:417:12)
[2] at Function.Module._load (module.js:409:3)
[2] at Module.require (module.js:468:17)
[2] at require (internal/module.js:20:19)
[2] at Object. (.../node_modules/react-c3js/react-c3js.js:15:10)
[2] at Module._compile (module.js:541:32)

no issues when reverted to 0.1.8

Hello and thank you for creating react-c3js! It performs great in Chrome and Firefox.

However it won't work in IE, which we are sadly forced to support. :-(
The reason is missing support of Object.assign, causing a breaking error in generateChart.

The issue can easily be solved by adding:
"babel": { "plugins": [ "transform-object-assign" ] }
to the package.json to provide a polyfill.

Please consider!

Hi ,
How can we add text inside or on top of the regions?

For Example:-
const regions = [
{
axis: 'x',start:new Date("2018-03-10T00:00:00"), end: new Date("2018-03-10T23:00:00"),
class: 'regionX', label: "Day 1 and 2",
vertical: false,
padding: 0
}
]

Here, label doesn't work? What is the correct api and options to make it work.

Works fine on development, but after deployed on heroku, charts doesnt open. Im getting the error

c3.js:1046 Uncaught TypeError: n is not a function
    at new a (c3.js:1046)
    at new r (c3.js:1026)
    at Object.Y.generate (c3.js:1055)
    at t.value (react-c3js.js:69)
    at t.value (react-c3js.js:85)
    at t.value (react-c3js.js:44)
    at commitLifeCycles (react-dom.production.min.js:148)
    at t (react-dom.production.min.js:157)
    at b (react-dom.production.min.js:168)
    at v (react-dom.production.min.js:167)

When the component loads, the chart does not fill the entire width of the space that it should in the parent container. Once a resize event occurs, the chart fills the intended space.

Initial Load

After resize:

This seems to be an issue with even smaller sets of data ranges. In this example I am only loading 49 data per line (98 total).

Hi, I am getting this error whenever the pie chart is re-rendered by react. This happens only sometimes, not every time react re-renders.

I'm using react-c3js, so i can't find any way to access the c3 chart api . Please help me.

Thank you

I'm passing a grid-property to the Chart Element.

const chartData = {
  columns: [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 20, 10, 40, 15, 25]
  ]
};

let grid = {
    x: {
        show: true,
        lines: [
            {value: leftBorder, text: 'Eastern model border', position: 'middle'},
            {value: rightBorder, text: 'Western model border', position: 'middle'}
        ]
    }
};

<Chart data={chartData} grid={grid} element="testchart" type="pie" />

The grid-values are loaded on first rendering.
Un update the grid-object it is not working.

Until v0.1.13 it works.

Is there some type of Area Range and Line Chart in react-c3 or any trick such that we can produce one of those type of charts?

If not, I suggest this is a good feature to have in the library.

I will try to create a PR on the same!

Thanks!

This is a sample bar chart code in c3.js

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.993 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    },
    size: {
        height: 240,
        width: 480
    },
    
});

Now here, if you set width ratio you can reduce or increase the gap between two bars. But I am unable to achieve this effect by using react-c3js

Question: how would I get a reference to the chart object in the component to do things like this with it? http://c3js.org/samples/legend_custom.html

Thank you!

Is it any way to support ontouch move for mobile. On desktop tooltip beautiful follow the mouse move, but on mobile I need to click on the specific point. Is it any way to do this?

Thx

I am getting below warning when the component C3Chart is mounted

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: C3Chart

So far I haven't noticed any code issues, so it appears to still be compatible with React 16.

The package.json dependencies, however, are throwing a warning.

For some reason, prop-types is listed as a dev dependency instead of a peer dependency or dependency. If it's not already in the consumer's stack, node is unable to find it and won't build.

Has anyone used the chart.resize()? I'm having trouble figuring out how to re-render my height of the chart.

The goal is to make the chart 100% width/height of it's parent.

Hey,

I dont seem to be getting a stacked area chart when I use my data, or use directly copy the example here:

https://c3js.org/samples/chart_area_stacked.html

I just get a regular area chart.

Hello

I'm tried small example from c3js example. graph is showing but x axis categories are not showing

my code

import React, { Component } from 'react';
import C3Chart from 'react-c3js';
import '../css/c3.css';

let chartData = {
    "axis": {
      "x": {
        "categories": [
          "india","uk","usa","brazil","france","germany","italy","nepal","malaysia"],
        "type": "category"
      }
    },
      "columns": [
        [
          "sales",30,200,100,400,150,250,50,100,250
        ],
        [
          "margin",10,100,30,300,50,50,10,0,50
          ]
      ],
      "type": "bar"
    
  }

export default class BarChartComp extends Component {


  render() {

    return (
      <C3Chart data={chartData} />
    );
  }
}

Result :

expected results

What I'm missing? the same example shows categories in c3. but not in react.It would be great help.

Thanks in advance
Dinesh

Hi,

It seems that the npm version of this component doesn't point to the latest version (the one that adds onPropsChanged property).

Is there a chance we can get that fixed anytime soon?

Thanks!

Gettting this error on bar charts when hovered over bars. Works perfectly fine on mozilla.
I found a similar issue for c3js - c3js/c3#1566 and looks like the fix is available.
Are you planning to merge this fix in react-c3js as well?

C3 chart gives errors when using them in react strict mode. I think, it is worth to fix it.

• (Re-)Install NPM dependencies before building react-c3js library.
• Use yarn to install NPM dependencies since it's more faster and reliable.
• Support both Make and NPM scripts by mapping each target to corresponding NPM scripts.
• Update the Dockerfile to support Make targets and then use it explicitly.

I seem to be having some trouble rendering a chart when the data I pass in periodically updates while the chart component remains mounted.

Basically I believe the issue has to do with how C3 loads new data. For my case, and I would imagine generally, if the data prop changes, the old data should be unloaded before the new is loaded so that odd conflicts don't occur. When .load alone is called, C3 tries to append or merge that data on to the existing chart.

Am I completely off-base here? Please let me know

Installing in a react 17 project yields the following error:

Could not resolve dependency:
npm ERR! peer react@"^15.5.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-c3js
npm ERR!   react-c3js@"^0.1.20" from the root project

It seems the latest version of the react-c3js library is only compatible with react 15 -16.

Any plans to update for v17 support?

Thanks

If I remove a column from the data property, the line is not removed from the chart (chart is not being reloaded).

So I have a chart on a webpage. The data prop for the chart is composed within the react render function, like so:

render() {
  let data = {
      rows: this.state.points,
      hide: this.getHideVals()
    };

  ...

  return (
    ...
    <C3Chart data={data} />
    ...
  );
}

The function getHideVals() creates an array of strings based on this.state.

When a state change is triggered and state.points is updated, the data in the chart is updated no problem. But when getHideVals() returns a new value, the new hide states of the data are not reflected. Whatever values for data to hide are originally passed in when the webpage is first rendered persist. I can't figure out how to get changes to the data.hide prop to display.

I just refer this documentation and try to use load method which can used to populate the data to already existing charts. But checking the module I doubted it doesn't have load or flow method.

I have an intention of loading or updating data to existing chart for every 20 secs. Will it be possible to do with this library. How can a chart component changed with data?

Thanks for any suggestions!

With no custom styling and the sample code I get strange black fills in the chart lines.

import C3Chart from 'react-c3js'

const data = {
	columns: [
		['data1', 30, 200, 100, 400, 150, 250],
		['data2', 50, 20, 10, 40, 15, 25]
	]
}

const ServiceSettings = ({ settings, updateSetting }) => {

	return (
		<div className="service-settings"> 
			<C3Chart data={data} />

• Is it supported?
• Are there any examples online on how to do it with the library?

I started working on react-c3js and got stuck into some problem.

Below is my X-axis array:

"axis": {"x": ["4 2018", "4 2018", "5 2018", "5 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "1 2019", "1 2019", "1 2019"]
}

My code :

const chartData = ({ data }) =>
  <C3Chart tooltip= {{
    format: {
        value: function (value, ratio, id) {
            return (value == -30) ? 'STD' : value;
        }
    }
}} axis= {{'x': {type: 'category',categories: axis['x'],tick: {culling: {max: 10 }}}, 'y': {max: 180,min: -30,padding: {top:1, bottom:1}, tick: { values: [0, 30, 60, 90, 120, 150, 180]}}}} line= {{ connectNull: false }} data={{ json: data.chartInfo, type:'line'}} />

Actual result:

How to merger these interval so that it looks like

Also raised here:
https://stackoverflow.com/questions/55008548/how-to-group-x-axis-points-in-react-c3js

Im using this module to plot realtime chart data. I need to update the axis as the plot progresses. I have two charts - one updates with a key prop set by a counter value.

https://codesandbox.io/s/react-c3-dynamic-sine-5vr7ow?file=/src/index.js

The only way I can see to do get the axis to update is by refreshing the chart with a key refrsh but this delivers a slightly jittery plot. (first chart)

The second chart doesnt update the x-axis as the chart progresses. The plot of the second chart is smoother but doesnt update the axis when it reaches its limit.

Is there a way to update the chart (specifically the x-axis) without refreshing the entire chart?

Thanks

Please add the css :)