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
export default () => (
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

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

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
export default () => (
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

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

Date chart

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

4
export default () => (
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

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

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
export default () => (
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

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

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

No guidelines exist for ChartContainer yet.

Create guidelines