@coveord/plasma-react
and @coveord/plasma-style
packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine
package. 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;
Name | Type | Default | Description |
---|---|---|---|
renderChart required | (width: number, height: number) => ReactNode | The render function for the chart.
|
1import {ScatterSeries, ChartContainer, XYChart} from '@coveord/plasma-react';23export default () => (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);1415const data = [16{17label: 'First',18data: [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];
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;
1import {LineSeries, InfoLine, ChartContainer, XGrid, YGrid, XYAxis, XYChart} from '@coveord/plasma-react';23export default () => (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);2021const data = [22{23label: 'First',24data: [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{35label: 'Second',36data: [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{47label: 'Third',48data: [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];
1import moment from 'moment';2import {BarSeries, ChartTooltip, ChartContainer, XYAxis, XYChart} from '@coveord/plasma-react';34export default () => (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);2324const dateData = [25{26label: 'First',27data: Array.from(Array(25).keys()).map((i: number) => ({28x: moment().startOf('day').subtract(i, 'day').unix(),29y: i + 1,30})),31},32];
1import {2BarSeries,3LineSeries,4ScatterSeries,5ChartTooltip,6ChartContainer,7XYChart,8XYAxis,9XYPoint,10} from '@coveord/plasma-react';1112export default () => (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);3738const data = [39{40label: 'First',41data: [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{52label: 'Second',53data: [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{64label: 'Third',65data: [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];7677const overPattern = ['var(--deprecated-orange-1)', 'var(--deprecated-orange)', 'var(--deprecated-coveo-orange)'];
No guidelines exist for ChartContainer yet.