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
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