xAccessor: cannot read property 'date' of undefind

Trying to plugin my own data source, but it fails with xaccessor setting.

Here’s the source:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as d3 from 'd3';

import { ChartCanvas, Chart, series, axes, helper } from 'react-stockcharts';
const { AreaSeries } = series;
const { XAxis, YAxis } = axes;

const { fitWidth, TypeChooser } = helper;

type ChartType = 'svg' | 'hybrid';

interface AreaChartProps {
    data: any[],
    width: number,
    ratio: number,
    type: ChartType;
};

class AreaChart extends React.Component<AreaChartProps, any> {
    constructor(props: AreaChartProps) {
        super(props);
    }

    render() {
        const { data, type, width, ratio } = this.props; 
        return (
            <ChartCanvas ratio={ratio} width={width} height={400}
                margin={{ left: 50, right: 50, top: 10, bottom: 30 }}
                seriesName="TEST SERIES"
                data={data} type={type} xScale={d3.scaleTime()}
                xAccessor={(d: any) => d.date}
                xExtents={[new Date(2017, 4, 20), new Date(2017, 4, 30)]}
                >
                <Chart id={0} yExtents={(d: any) => d.close}>
                    <XAxis axisAt="bottom" orient="bottom" ticks={10} />
                    <YAxis axisAt="left" orient="left" />
                    <AreaSeries 
                        yAccessor={(d: any) => d.close} 
                    />
                </Chart>
            </ChartCanvas>
        );
    }
}

const FixedWidthChart: any = fitWidth(AreaChart);

const parseDate = d3.timeParse('%Y-%m-%d %H:%M:%S');

// This tsv works: 
//d3['tsv']('//rrag.github.io/react-stockcharts/data/MSFT.tsv', (err, data) => {

// This one doesn't
d3['tsv']('http://localhost:5000/data.tsv', (err, data) => {
    data.forEach((d:any, i:number) => {
        d.date = new Date(d3.timeParse('%m/%d/%Y %X')(d.date).getTime());
        d.close = parseFloat(d.close);
    });

    /* change the type from hybrid to svg to compare the performance between svg and canvas */
    ReactDOM.render(<TypeChooser type="hybrid">
        {(type: 'svg' | 'hybrid') => <FixedWidthChart data={data} type={type} />}
        </TypeChooser>, document.getElementById('chart'));
});

Here’s the stack trace:

Uncaught TypeError: Cannot read property 'date' of undefined
    at xAccessor (bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:49564)
    at domain (bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:43432)
    at calculateState (bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:35104)
    at resetChart (bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:34995)
    at ChartCanvas.componentWillMount (bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:35703)
    at performInitialMount (react.min.js:13)
    at p.mountComponent (react.min.js:13)
    at Object.mountComponent (react.min.js:15)
    at performInitialMount (react.min.js:13)
    at p.mountComponent (react.min.js:13)
xAccessor @ bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:49564
domain @ bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:43432
calculateState @ bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:35104
resetChart @ bundle-chart.js?v=4C1FKVHSSIfyq0xZhXoJPqUqGcZYajd8Tp5HbmYTexo:34995
componentWillMount @ bundle-chart.js?
...
...

[johnreytanquinco]

Hi @rrag , when you say

xExtents has to be [small, big] but you have it as [big, small]

Could you please clarify why it should be that way? I can see that even in the example chart like https://codesandbox.io/s/pj4l0jwkpm, xExtents is in [big, small].

Question related to xExtent, why do I get an error message saying Showing 0 datapoints, review the 'xExtents' prop of ChartCanvas when the end value of my xExtent is on 0? Wont the chart consider it as the first index of the data? Or it is related to other problem?

Actual value in console logs: xExtents (2) [44, 0]

Appreciate your response. Thanks!

[rrag]

just do a JSON.parse on this, and you will also have to parse the date which is a string into a Date object.

if you are using fetch you can do response.json() which will parse the result for you. Then console.log the output and find where the data is present.