c3js / c3js/c3

C3 chart bound to an SVG container not rendering in IE11 and Edge

Open
#2,017 2 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
9.3k
Forks
1.4k
Avg merge
6d 16h
Merged PRs (30d)
1

Description

Thank You for the awesome library.
My questions is that I've react wrapper on top of C3 graph as follows;

```
import React from 'react';
import c3 from 'c3';

class TestGraph extends React.Component {

componentDidMount() {
const chart = c3.generate({
bindto: '#LineGraph',
data: {
x: 'x',
columns: [
['x', '2014-01-01', '2014-01-02', '2014-01-03', '2014-01-04', '2014-01-05'],
['data1', 100, 200, 150, 300, 200],
],
type: 'area'
},

axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
},

area: {
zerobased: true
},
});
}

render(){
alert('Render of test graph');
return (

);
}
}
export default TestGraph;
```

Above snippet, works in **IE 11 and Edge** when the container returned from React's `render` method is a div --> as `

`

But if the container is an svg it doesn't render with the following error in the browser console
```
Unable to get property 'setProperty' of undefined or null reference
d3.js (751,1)

```
You can even see it on the fiddle here, when we run it in Edge. It's visible in Firefox.
https://jsfiddle.net/sid141288/m8gtub0a/6/

Please advise.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.