You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Charts

A chart compares sets of complex data to provide insights on their relationship and status.

View source

1
import {LineSeries, ChartContainer, XYChart} from '@coveord/plasma-react';
2

3
const data = [
4
    {
5
        label: 'First',
6
        data: [
7
            {x: -1, y: 3},
8
            {x: 2, y: 6},
9
            {x: 3, y: 2},
10
            {x: 4, y: 12},
11
            {x: 5, y: 8},
12
        ],
13
    },
14
];
15
const DemoPage = () => (
16
    <div style={{height: 400}}>
17
        <ChartContainer
18
            renderChart={(width, height) => (
19
                <XYChart series={[data[0]]} height={height} width={width} padding={undefined}>
20
                    {<LineSeries />}
21
                </XYChart>
22
            )}
23
        />
24
    </div>
25
);
26

27
export default DemoPage;

Props

Name	Type	Default	Description
`renderChart`required	`(width: number, height: number) => ReactNode`		The render function for the chart. width–The width of the chart container height–the height of the chart container

Examples

Scatter series

1
import {ScatterSeries, ChartContainer, XYChart} from '@coveord/plasma-react';
2

3
const Demo = () => (
4
    <div style={{height: 400}}>
5
        <ChartContainer
6
            renderChart={(width, height) => (
7
                <XYChart series={[data[0]]} height={height} width={width} padding={undefined}>
8
                    {<ScatterSeries />}
9
                </XYChart>
10
            )}
11
        />
12
    </div>
13
);
14
export default Demo;
15

16
const data = [
17
    {
18
        label: 'First',
19
        data: [
20
            {x: -1, y: 3},
21
            {x: 2, y: 6},
22
            {x: 3, y: 2},
23
            {x: 4, y: 12},
24
            {x: 5, y: 8},
25
        ],
26
    },
27
];

Bar series

1
import {BarSeries, ChartContainer, XYChart} from '@coveord/plasma-react';
2

3
const DemoPage = () => (
4
    <div style={{height: 400}}>
5
        <ChartContainer
6
            renderChart={(width, height) => (
7
                <XYChart
8
                    series={[data[0]]}
9
                    height={height}
10
                    width={width}
11
                    padding={{left: width / 12, right: width / 12}}
12
                >
13
                    {<BarSeries />}
14
                </XYChart>
15
            )}
16
        />
17
    </div>
18
);
19

20
const data = [
21
    {
22
        label: 'First',
23
        data: [
24
            {x: -1, y: 3},
25
            {x: 2, y: 6},
26
            {x: 3, y: 2},
27
            {x: 4, y: 12},
28
            {x: 5, y: 8},
29
        ],
30
    },
31
];
32

33
export default DemoPage;

With info lines

1
import {LineSeries, InfoLine, ChartContainer, XGrid, YGrid, XYAxis, XYChart} from '@coveord/plasma-react';
2

3
const Demo = () => (
4
    <div style={{height: 400}}>
5
        <ChartContainer
6
            renderChart={(width, height) => (
7
                <XYChart series={data} height={height} width={width}>
8
                    <XYAxis x={{innerPadding: 30}} y={{innerPadding: 30}}>
9
                        <XGrid padding={30} />
10
                        <YGrid padding={30} />
11
                        <LineSeries />
12
                        <InfoLine value={3} label="Three" padding={30} />
13
                        <InfoLine value={2} label="Two" padding={30} isVertical />
14
                    </XYAxis>
15
                </XYChart>
16
            )}
17
        />
18
    </div>
19
);
20
export default Demo;
21

22
const data = [
23
    {
24
        label: 'First',
25
        data: [
26
            {x: -1, y: 3},
27
            {x: 0, y: 3},
28
            {x: 1, y: 3},
29
            {x: 2, y: 6},
30
            {x: 3, y: 2},
31
            {x: 4, y: 12},
32
            {x: 5, y: 8},
33
        ],
34
    },
35
    {
36
        label: 'Second',
37
        data: [
38
            {x: -1, y: 1},
39
            {x: 0, y: 5},
40
            {x: 1, y: 4},
41
            {x: 2, y: 0},
42
            {x: 3, y: 6},
43
            {x: 4, y: 7},
44
            {x: 5, y: 4},
45
        ],
46
    },
47
    {
48
        label: 'Third',
49
        data: [
50
            {x: -1, y: 4},
51
            {x: 0, y: 7},
52
            {x: 1, y: 1},
53
            {x: 2, y: 1},
54
            {x: 3, y: 1},
55
            {x: 4, y: 2},
56
            {x: 5, y: 7},
57
        ],
58
    },
59
];

Date chart

1
import moment from 'moment';
2
import {BarSeries, ChartTooltip, ChartContainer, XYAxis, XYChart} from '@coveord/plasma-react';
3

4
const Demo = () => (
5
    <div style={{height: 400}}>
6
        <ChartContainer
7
            renderChart={(width, height) => (
8
                <XYChart
9
                    series={dateData}
10
                    height={height}
11
                    width={width}
12
                    xFormat={(value: number) => moment.unix(value).format('YYYY-MM-DD')}
13
                >
14
                    <XYAxis x={{tickTextSize: 120}} y={{show: false}}>
15
                        <BarSeries />
16
                        <ChartTooltip sort />
17
                    </XYAxis>
18
                </XYChart>
19
            )}
20
        />
21
    </div>
22
);
23
export default Demo;
24

25
const dateData = [
26
    {
27
        label: 'First',
28
        data: Array.from(Array(25).keys()).map((i: number) => ({
29
            x: moment().startOf('day').subtract(i, 'day').unix(),
30
            y: i + 1,
31
        })),
32
    },
33
];

Complex chart

1
import {
2
    BarSeries,
3
    LineSeries,
4
    ScatterSeries,
5
    ChartTooltip,
6
    ChartContainer,
7
    XYChart,
8
    XYAxis,
9
    XYPoint,
10
} from '@coveord/plasma-react';
11

12
const Demo = () => (
13
    <div style={{height: 400}}>
14
        <ChartContainer
15
            renderChart={(width, height) => (
16
                <XYChart
17
                    series={data}
18
                    height={height}
19
                    width={width}
20
                    color={(serie: number, colorPattern: string[], point?: XYPoint) =>
21
                        point && point.y > 7 ? overPattern[serie] : colorPattern[serie]
22
                    }
23
                    xFormat={(value: number) => ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'][value + 1]}
24
                    yFormat={(value: number) => value * 10 + '%'}
25
                >
26
                    <XYAxis x={{innerPadding: width / 12}} y={{show: false}}>
27
                        <BarSeries />
28
                        <LineSeries />
29
                        <ScatterSeries />
30
                        <ChartTooltip sort />
31
                    </XYAxis>
32
                </XYChart>
33
            )}
34
        />
35
    </div>
36
);
37
export default Demo;
38

39
const data = [
40
    {
41
        label: 'First',
42
        data: [
43
            {x: -1, y: 3},
44
            {x: 0, y: 3},
45
            {x: 1, y: 3},
46
            {x: 2, y: 6},
47
            {x: 3, y: 2},
48
            {x: 4, y: 12},
49
            {x: 5, y: 8},
50
        ],
51
    },
52
    {
53
        label: 'Second',
54
        data: [
55
            {x: -1, y: 1},
56
            {x: 0, y: 5},
57
            {x: 1, y: 4},
58
            {x: 2, y: 0},
59
            {x: 3, y: 6},
60
            {x: 4, y: 7},
61
            {x: 5, y: 4},
62
        ],
63
    },
64
    {
65
        label: 'Third',
66
        data: [
67
            {x: -1, y: 4},
68
            {x: 0, y: 7},
69
            {x: 1, y: 1},
70
            {x: 2, y: 1},
71
            {x: 3, y: 1},
72
            {x: 4, y: 2},
73
            {x: 5, y: 7},
74
        ],
75
    },
76
];
77

78
const overPattern = ['var(--deprecated-orange-1)', 'var(--deprecated-orange)', 'var(--deprecated-coveo-orange)'];

No guidelines exist for ChartContainer yet.

Create guidelines