amcharts3-react
amcharts3-react copied to clipboard
d.clear is not a function
I am using Multiple panel chart with react using amCharts-react.
My Multiple panel chart works fine during first load.
But i also get this error, How do i fix this error? I am also not able to zoom in this chart because of previous error i suppose.
Exception has occurred: TypeError TypeError: d.clear is not a function
Here is my Exact code , for normal charts everything works, but amStock always have this issue,
import React, { Component } from 'react'; import { graphql } from 'react-apollo'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { autobind } from 'core-decorators';
import AmCharts from '@amcharts/amcharts3-react'; import { allEventsQuery } from './queries'; import css from './issueDetails.scss';
require('amstock3/amcharts/amstock');
const config = { type: 'stock', theme: 'light', dataSets: [ { title: 'first data set', fieldMappings: [ { fromField: 'value', toField: 'value', }, { fromField: 'volume', toField: 'volume', }, ], dataProvider: [ { date: '2016-05-17T07:00:00.000Z', value: 109 }, { date: '2016-05-18T07:00:00.000Z', value: 114 }, { date: '2016-05-19T07:00:00.000Z', value: 138 }, { date: '2016-05-20T07:00:00.000Z', value: 113 }, { date: '2016-05-21T07:00:00.000Z', value: 145 }, { date: '2016-05-22T07:00:00.000Z', value: 141 }, { date: '2016-05-23T07:00:00.000Z', value: 150 }, { date: '2016-05-24T07:00:00.000Z', value: 110 }, { date: '2016-05-25T07:00:00.000Z', value: 153 }, { date: '2016-05-26T07:00:00.000Z', value: 134 }, ], categoryField: 'date', }, { title: 'second data set', fieldMappings: [ { fromField: 'value', toField: 'value', }, { fromField: 'volume', toField: 'volume', }, ], dataProvider: [ { date: '2016-05-17T07:00:00.000Z', value: 233 }, { date: '2016-05-18T07:00:00.000Z', value: 260 }, { date: '2016-05-19T07:00:00.000Z', value: 229 }, { date: '2016-05-20T07:00:00.000Z', value: 248 }, { date: '2016-05-21T07:00:00.000Z', value: 240 }, { date: '2016-05-22T07:00:00.000Z', value: 291 }, { date: '2016-05-23T07:00:00.000Z', value: 223 }, { date: '2016-05-24T07:00:00.000Z', value: 213 }, { date: '2016-05-25T07:00:00.000Z', value: 213 }, { date: '2016-05-26T07:00:00.000Z', value: 227 }, ], categoryField: 'date', compared: true, }, ], panels: [ { showCategoryAxis: false, title: 'Value', stockGraphs: [ { id: 'g1', valueField: 'value', comparable: true, compareField: 'value', lineThickness: 2, balloonText: '[[title]]:[[value]]', compareGraph: { lineThickness: 2, balloonText: '[[title]]:[[value]]', }, }, ], stockLegend: { periodValueTextComparing: '[[percents.value.close]]%', periodValueTextRegular: '[[value.close]]', }, }, ], chartScrollbarSettings: { graph: 'g1', }, chartCursorSettings: { valueBalloonsEnabled: true, fullWidth: true, cursorAlpha: 0.1, valueLineBalloonEnabled: true, valueLineEnabled: true, valueLineAlpha: 0.5, }, periodSelector: { position: 'bottom', periods: [ { period: 'MM', selected: true, count: 1, label: '1 month', }, { period: 'YYYY', count: 1, label: '1 year', }, { period: 'YTD', label: 'YTD', }, { period: 'MAX', label: 'MAX', }, ], }, };
<div className={css.mainContainer}> <AmCharts.React style={{ width: '100%', height: '500px', }} options={config} /> </div>
As you can see Zoom does not work in any Multiple Panel Charts , and other issues.
Other stock charts are working and zoom works too.
Seems this can be solved by re ordering the
Got same issue on stock chart, amstock.js script the last one