AreaChart

Array of series objects

Result

Loading...

Live Editor

const data = [ { name: 'DataSet 1', data: [ { id: '1', x: 1, y: 7, name: 'Point1', }, { id: '2', x: 2, y: 4, name: 'Point2', }, { id: '3', x: 3, y: 7, name: 'Point3', }, ], }, { name: 'DataSet with a long name', data: [ { id: '4', x: 1, y: 1, name: 'Point4', }, { id: '5', x: 2, y: 2, name: 'Point5', }, { id: '6', x: 3, y: 3, name: 'Point6', }, ], }, ]; render( <AreaChart id="area-chart-array-of-series-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} title="Title" description="Description" xAxis="X Axis Label" yAxis="Y Axis Label" formatType="number" activeDataId="4" />, );

const data = [
    {
        name: 'DataSet 1',
        data: [
            {
                id: '1',
                x: 1,
                y: 7,
                name: 'Point1',
            },
            {
                id: '2',
                x: 2,
                y: 4,
                name: 'Point2',
            },
            {
                id: '3',
                x: 3,
                y: 7,
                name: 'Point3',
            },
        ],
    },
    {
        name: 'DataSet with a long name',
        data: [
            {
                id: '4',
                x: 1,
                y: 1,
                name: 'Point4',
            },
            {
                id: '5',
                x: 2,
                y: 2,
                name: 'Point5',
            },
            {
                id: '6',
                x: 3,
                y: 3,
                name: 'Point6',
            },
        ],
    },
];

render(
    <AreaChart
        id="area-chart-array-of-series-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        title="Title"
        description="Description"
        xAxis="X Axis Label"
        yAxis="Y Axis Label"
        formatType="number"
        activeDataId="4"
    />,
);

Flat array of numerical values

Result

Loading...

Live Editor

const data = [7, 4, 7]; render( <AreaChart id="area-chart-array-numerical-values-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} title="Title" description="Description" xAxis="X Axis Label" yAxis="Y Axis Label" formatType="number" />, );

const data = [7, 4, 7];

render(
    <AreaChart
        id="area-chart-array-numerical-values-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        title="Title"
        description="Description"
        xAxis="X Axis Label"
        yAxis="Y Axis Label"
        formatType="number"
    />,
);

Nested arrays of numerical values

Result

Loading...

Live Editor

const data = [ [ [1, 7], [2, 4], [3, 7], ], [ [1, 1], [2, 2], [3, 3], ], ]; render( <AreaChart id="area-chart-nested-arrays-numerical-values-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} title="Title" description="Description" xAxis="X Axis Label" yAxis="Y Axis Label" formatType="number" />, );

const data = [
    [
        [1, 7],
        [2, 4],
        [3, 7],
    ],
    [
        [1, 1],
        [2, 2],
        [3, 3],
    ],
];

render(
    <AreaChart
        id="area-chart-nested-arrays-numerical-values-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        title="Title"
        description="Description"
        xAxis="X Axis Label"
        yAxis="Y Axis Label"
        formatType="number"
    />,
);

Flat array of data objects

Result

Loading...

Live Editor

const data = [ { id: '1', x: 1, y: 7, name: 'Point1', }, { id: '2', x: 2, y: 4, name: 'Point2', }, { id: '3', x: 3, y: 7, name: 'Point3', }, ]; render( <AreaChart id="area-chart-flat-array-data-objects-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} title="Title" description="Description" xAxis="X Axis Label" yAxis="Y Axis Label" formatType="number" />, );

const data = [
    {
        id: '1',
        x: 1,
        y: 7,
        name: 'Point1',
    },
    {
        id: '2',
        x: 2,
        y: 4,
        name: 'Point2',
    },
    {
        id: '3',
        x: 3,
        y: 7,
        name: 'Point3',
    },
];

render(
    <AreaChart
        id="area-chart-flat-array-data-objects-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        title="Title"
        description="Description"
        xAxis="X Axis Label"
        yAxis="Y Axis Label"
        formatType="number"
    />,
);

Nested array of data objects

Result

Loading...

Live Editor

const data = [ [ { id: '1', x: 1, y: 7, name: 'Point1', }, { id: '2', x: 2, y: 4, name: 'Point2', }, { id: '3', x: 3, y: 7, name: 'Point3', }, ], [ { id: '4', x: 1, y: 1, name: 'Point4', }, { id: '5', x: 2, y: 2, name: 'Point5', }, { id: '6', x: 3, y: 3, name: 'Point6', }, ], ]; render( <AreaChart id="area-chart-nested-array-data-objects-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} title="Title" description="Description" xAxis="X Axis Label" yAxis="Y Axis Label" formatType="number" />, );

const data = [
    [
        {
            id: '1',
            x: 1,
            y: 7,
            name: 'Point1',
        },
        {
            id: '2',
            x: 2,
            y: 4,
            name: 'Point2',
        },
        {
            id: '3',
            x: 3,
            y: 7,
            name: 'Point3',
        },
    ],
    [
        {
            id: '4',
            x: 1,
            y: 1,
            name: 'Point4',
        },
        {
            id: '5',
            x: 2,
            y: 2,
            name: 'Point5',
        },
        {
            id: '6',
            x: 3,
            y: 3,
            name: 'Point6',
        },
    ],
];

render(
    <AreaChart
        id="area-chart-nested-array-data-objects-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        title="Title"
        description="Description"
        xAxis="X Axis Label"
        yAxis="Y Axis Label"
        formatType="number"
    />,
);

Props