Layout

Charts

A chart compares sets of complex data to provide insights on their relationship and status.
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

NameTypeDefaultDescription
renderChartrequired(width: number, height: number) => ReactNode
The render function for the chart.
  • widthThe width of the chart container
  • heightthe 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