d.clear is not a function

[hrspandya]

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.

[ravithb]

Seems this can be solved by re ordering the <script> tags and making amstock.js the last one, as suggested in amcharts/amcharts3-angular2#65

[olegklimakov]

Got same issue on stock chart, amstock.js script the last one