react-c3jsで出力したグラフをデータURI形式に変換したい

前提

React 16.8.6
react-c3.js 0.1.20

やりたいこと

・react-c3.jsを用いて出力したグラフを出力する。
・グラフをpng画像データに変換してデータURI形式で取得したい。

問題になっていること

いろいろ調べてみて以下の手順でデータURIを取得したが、グラフの一部が黒く塗りつぶされたようになってしまう。

svg画像をxmlにシリアライズしてimgタグに読み込ませる。
imgタグのonloadイベントで下記処理。
canvasタグを用意。
canvasタグにimgタグのデータを書き込み。
canvasからデータURI取得。

getdataUri
1//データURIを取得する処理
2  download = () => {
3    // svg domを取得
4    const svg = document.getElementsByTagName("svg")[0];
5
6    // canvasを準備
7    let canvas = document.createElement('canvas');
8    canvas.width = svg.width.baseVal.value;
9    canvas.height = svg.height.baseVal.value;
10
11    // 描画をするための、canvasの組み込みオブジェクトを準備
12    const ctx = canvas.getContext("2d");
13
14    // imgオブジェクトを準備
15    let image = new Image();
16
17    // imageの読み込みが完了したら、onloadが走る
18    image.onload = () => {
19      // SVGデータをPNG形式に変換する
20      // canvasに描画する drawImage(image, x座標, y座標, 幅, 高さ)
21      ctx.drawImage(image, 0, 0, image.width, image.height);
22
23      this.setState({ image: canvas.toDataURL() });
24    };
25
26    // SVGデータをXMLで取り出す
27    const svgData = new XMLSerializer().serializeToString(svg);
28
29    // この時点で、上記のonloadが走る
30     image.src =
31       "data:image/svg+xml;charset=utf-8;base64," +
32       btoa(unescape(encodeURIComponent(svgData)));
33
34  };

index.js
1//html部分
2class App extends React.Component {
3  constructor(props) {
4    super(props);
5    this.state = {
6      chartData: {
7        columns: [
8          ["data1", 30, 200, 100, 400, 150, 250],
9          ["data2", 50, 20, 10, 40, 15, 25]
10        ]
11      },
12      image: null
13    };
14
15  render() {
16    return (
17      <div>
18        <C3Chart data={this.state.chartData} />
19        <button onClick={() => this.download()}>download</button>
20        <canvas id="my-canvas"></canvas>
21        <img src={this.state.image}/>
22      </div>
23    );
24  }
25}
26}