AreaRangeChart

Array of series objects

Result

Loading...

Live Editor

const data = [ { name: 'DataSet 1', data: [ { id: '1', x: 1, low: 7, high: 9, name: 'Point1', }, { id: '2', x: 2, low: 4, high: 5, name: 'Point2', }, { id: '3', x: 3, low: 7, high: 8, name: 'Point3', }, ], }, { name: 'DataSet 2', data: [ { id: '4', x: 1, low: 1, high: 4, name: 'Point4', }, { id: '5', x: 2, low: 2, high: 4, name: 'Point5', }, { id: '6', x: 3, low: 3, high: 6, name: 'Point6', }, ], }, ]; render( <AreaRangeChart id="area-range-chart-array-of-series-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 = [
    {
        name: 'DataSet 1',
        data: [
            {
                id: '1',
                x: 1,
                low: 7,
                high: 9,
                name: 'Point1',
            },
            {
                id: '2',
                x: 2,
                low: 4,
                high: 5,
                name: 'Point2',
            },
            {
                id: '3',
                x: 3,
                low: 7,
                high: 8,
                name: 'Point3',
            },
        ],
    },
    {
        name: 'DataSet 2',
        data: [
            {
                id: '4',
                x: 1,
                low: 1,
                high: 4,
                name: 'Point4',
            },
            {
                id: '5',
                x: 2,
                low: 2,
                high: 4,
                name: 'Point5',
            },
            {
                id: '6',
                x: 3,
                low: 3,
                high: 6,
                name: 'Point6',
            },
        ],
    },
];

render(
    <AreaRangeChart
        id="area-range-chart-array-of-series-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 arrays of numerical values

Result

Loading...

Live Editor

const data = [ [ [1, 7, 9], [2, 4, 5], [3, 7, 8], ], [ [1, 1, 4], [2, 2, 4], [3, 3, 6], ], ]; render( <AreaRangeChart id="area-range-chart-nested-arrays-of-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, 9],
        [2, 4, 5],
        [3, 7, 8],
    ],
    [
        [1, 1, 4],
        [2, 2, 4],
        [3, 3, 6],
    ],
];

render(
    <AreaRangeChart
        id="area-range-chart-nested-arrays-of-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, low: 7, high: 9, name: 'Point1', }, { id: '2', x: 2, low: 4, high: 5, name: 'Point2', }, { id: '3', x: 3, low: 7, high: 8, name: 'Point3', }, ]; render( <AreaRangeChart id="area-range-chart-flat-array-of-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,
        low: 7,
        high: 9,
        name: 'Point1',
    },
    {
        id: '2',
        x: 2,
        low: 4,
        high: 5,
        name: 'Point2',
    },
    {
        id: '3',
        x: 3,
        low: 7,
        high: 8,
        name: 'Point3',
    },
];

render(
    <AreaRangeChart
        id="area-range-chart-flat-array-of-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, low: 7, high: 9, name: 'Point1', }, { id: '2', x: 2, low: 4, high: 5, name: 'Point2', }, { id: '3', x: 3, low: 7, high: 8, name: 'Point3', }, ], [ { id: '4', x: 1, low: 1, high: 4, name: 'Point4', }, { id: '5', x: 2, low: 2, high: 4, name: 'Point5', }, { id: '6', x: 3, low: 3, high: 6, name: 'Point6', }, ], ]; render( <AreaRangeChart id="area-range-chart-nested-array-of-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,
            low: 7,
            high: 9,
            name: 'Point1',
        },
        {
            id: '2',
            x: 2,
            low: 4,
            high: 5,
            name: 'Point2',
        },
        {
            id: '3',
            x: 3,
            low: 7,
            high: 8,
            name: 'Point3',
        },
    ],
    [
        {
            id: '4',
            x: 1,
            low: 1,
            high: 4,
            name: 'Point4',
        },
        {
            id: '5',
            x: 2,
            low: 2,
            high: 4,
            name: 'Point5',
        },
        {
            id: '6',
            x: 3,
            low: 3,
            high: 6,
            name: 'Point6',
        },
    ],
];

render(
    <AreaRangeChart
        id="area-range-chart-nested-array-of-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