stock chart crashes when loading data dynamically

[Flammae]

I have a stock chart that receives data dynamically. when JSON data comes, callback updates data and chat receives updated options prop. updating options prop happens with one of the suggested ways:

makeOptions(data) (this updates dataProvider property; other configurations stay the same).

the error in my console: react-dom.production.min.js:164 TypeError: d.clear is not a function at b.clear (amstock.js:6) at b.validateNow (amstock.js:6) at Object.componentDidUpdate (amcharts3-react.js:279) at commitLifeCycles (react-dom.production.min.js:149) at t (react-dom.production.min.js:158) at E (react-dom.production.min.js:169) at w (react-dom.production.min.js:168) at h (react-dom.production.min.js:167) at d (react-dom.production.min.js:165) at Object.enqueueSetState (react-dom.production.min.js:108)

looking at source code, I assume validateNow(true) in componentDidUpdate makes this error.

please consider giving it a look

[vlad-gritsenko]

@beqaMeqvabishvili did you find out how to solve this?

[somnus0x]

@vlad-gritsenko @beqaMeqvabishvili I just ran into the same problems. Do you guys found the solution for the bugs.

[Flammae]

EDIT: I was refering to a wrong package, don't read

hi guys. sorry to say but the question is so old I just forgot what I did to fix it, but it is definitely fixed and production code is running with no errors. The only logical thing I can think of is to share my code and to pass the responsibility on to you to compare and find a solution if there's any.

1) in componentDidMount i do HighchartsExporting(ReactHighstock.Highcharts); 2) in response of data fetch i do

this.setState({
    data: json.data.Data,
    loading: false
});

3) in render: <ReactHighstock config={makeConfig(data)} /> 4) here's my code for makeConfig:

export default data => {
    let topChartData = data.map(item => [item.time * 1000, item.close]);
    let bottomChartData = data.map(item => [item.time * 1000, item.volumefrom]);

    return {
        rangeSelector: {
            enabled: false
        },
        scrollbar: {
            enabled: false
        },
        navigator: {
            enabled: false
        },
        yAxis: [
            {
                labels: {
                    align: "left",
                    x: 8,
                    y: -2
                },
                height: "70%",
                lineWidth: 2,
                resize: {
                    enabled: true
                },
                opposite: false
            },
            {
                labels: {
                    align: "left",
                    x: 8,
                    y: -2
                },
                top: "75%",
                height: "25%",
                offset: 0,
                lineWidth: 2,
                opposite: false
            }
        ],

        tooltip: {
            split: true
        },

        series: [
            {
                type: "area",
                name: "price change",
                data: topChartData,
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [[0, "rgba(35,159,233, 8)"], [1, "rgba(35,159,233, .3)"]]
                }
            },
            {
                type: "column",
                name: "Volume",
                color: "rgba(35,159,233, 1)",
                data: bottomChartData,
                yAxis: 1
            }
        ]
    };
};

sorry for the inconvenience realy hope this helps :)

[somnus0x]

@beqaMeqvabishvili what is HighchartsExporting anyway ?

[Flammae]

@supasonk imported package from the api. it's a type of chart i guess

import HighchartsExporting from "highcharts-exporting";

[zeroin]

@beqaMeqvabishvili This is amCharts github, not a HighCharts.

[Flammae]

Oh yeah, we moved to a different chart API at the end. AmCharts had poor react implementation. The development process was unpleasant and full of problems. I suggest you move on too.

for maintainers here are my problems with the package:

1. does not support server-side render (It even crashes if you are not careful)
2. whole react implementation is not existent, it just imports minified source code and implements react with just a couple of lines of code full of lifecycles.
3. I don't want to look into minified code when I have problems

I know you are aware of these issues and I read before that it was impossible to fix now, but they were going to be fixed with the next release. the whole year has passed since then. Just know that people are leaving because of these.