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. Layout
Charts
A chart compares sets of complex data to provide insights on their relationship and status.
1import {LineSeries, ChartContainer, XYChart} from '@coveord/plasma-react';23const data = [4{5label: 'First',6data: [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];15const DemoPage = () => (16<div style={{height: 400}}>17<ChartContainer18renderChart={(width, height) => (19<XYChart series={[data[0]]} height={height} width={width} padding={undefined}>20{<LineSeries />}21</XYChart>22)}23/>24</div>25);2627export default DemoPage;
Props
Name | Type | Default | Description |
---|---|---|---|
renderChart required | (width: number, height: number) => ReactNode | The render function for the chart.
|
Examples
Scatter series
1import {ScatterSeries, ChartContainer, XYChart} from '@coveord/plasma-react';23const Demo = () => (4<div style={{height: 400}}>5<ChartContainer6renderChart={(width, height) => (7<XYChart series={[data[0]]} height={height} width={width} padding={undefined}>8{<ScatterSeries />}9</XYChart>10)}11/>12</div>13);14export default Demo;1516const data = [17{18label: 'First',19data: [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
1import {BarSeries, ChartContainer, XYChart} from '@coveord/plasma-react';23const DemoPage = () => (4<div style={{height: 400}}>5<ChartContainer6renderChart={(width, height) => (7<XYChart8series={[data[0]]}9height={height}10width={width}11padding={{left: width / 12, right: width / 12}}12>13{<BarSeries />}14</XYChart>15)}16/>17</div>18);1920const data = [21{22label: 'First',23data: [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];3233export default DemoPage;
With info lines
1import {LineSeries, InfoLine, ChartContainer, XGrid, YGrid, XYAxis, XYChart} from '@coveord/plasma-react';23const Demo = () => (4<div style={{height: 400}}>5<ChartContainer6renderChart={(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);20export default Demo;2122const data = [23{24label: 'First',25data: [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{36label: 'Second',37data: [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{48label: 'Third',49data: [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
1import moment from 'moment';2import {BarSeries, ChartTooltip, ChartContainer, XYAxis, XYChart} from '@coveord/plasma-react';34const Demo = () => (5<div style={{height: 400}}>6<ChartContainer7renderChart={(width, height) => (8<XYChart9series={dateData}10height={height}11width={width}12xFormat={(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);23export default Demo;2425const dateData = [26{27label: 'First',28data: Array.from(Array(25).keys()).map((i: number) => ({29x: moment().startOf('day').subtract(i, 'day').unix(),30y: i + 1,31})),32},33];
Complex chart
1import {2BarSeries,3LineSeries,4ScatterSeries,5ChartTooltip,6ChartContainer,7XYChart,8XYAxis,9XYPoint,10} from '@coveord/plasma-react';1112const Demo = () => (13<div style={{height: 400}}>14<ChartContainer15renderChart={(width, height) => (16<XYChart17series={data}18height={height}19width={width}20color={(serie: number, colorPattern: string[], point?: XYPoint) =>21point && point.y > 7 ? overPattern[serie] : colorPattern[serie]22}23xFormat={(value: number) => ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'][value + 1]}24yFormat={(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);37export default Demo;3839const data = [40{41label: 'First',42data: [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{53label: 'Second',54data: [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{65label: 'Third',66data: [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];7778const overPattern = ['var(--deprecated-orange-1)', 'var(--deprecated-orange)', 'var(--deprecated-coveo-orange)'];
No guidelines exist for ChartContainer yet.