Using Charts with React
Examples of using Charts with React
The sections that follow provide examples of certain Chart types with React.
Column Chart
Source code
charts-column.tsx
import React from 'react';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
function Example() {
return (
// tag::snippet[]
<Chart title="Column Chart" type="column" categories={['Jan', 'Feb', 'Mar']}>
<ChartSeries title="Tokyo" values={[49.9, 71.5, 106.4]} />
<ChartSeries title="New York" values={[83.6, 78.8, 98.5]} />
<ChartSeries title="London" values={[48.9, 38.8, 39.3]} />
</Chart>
// end::snippet[]
);
}
Area Chart
Source code
charts-area.tsx
import React from 'react';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
function Example() {
return (
// tag::snippet[]
<Chart
type="area"
title="Area Chart"
stacking="normal"
categories={'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',')}
>
<ChartSeries
title="United States dollar"
values={[135, 125, 89, 124, 105, 81, 111, 94, 95, 129, 98, 84]}
/>
<ChartSeries title="Euro" values={[62, 72, 89, 68, 94, 92, 110, 100, 109, 89, 86, 105]} />
<ChartSeries title="Japanese yen" values={[30, 25, 32, 26, 15, 31, 24, 32, 21, 8, 12, 32]} />
<ChartSeries
title="Pound sterling"
values={[32, 21, 8, 12, 32, 21, 12, 30, 25, 19, 26, 15]}
/>
</Chart>
// end::snippet[]
);
}
Pie Chart
Source code
charts-pie.tsx
import React from 'react';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
function Example() {
return (
// tag::snippet[]
<Chart type="pie" title="Pie Chart" tooltip>
<ChartSeries
title="Brands"
values={[
{ name: 'Chrome', y: 38 },
{ name: 'Firefox', y: 24 },
{ name: 'Edge', y: 15, sliced: true, selected: true },
{ name: 'Internet Explorer', y: 8 },
]}
/>
</Chart>
// end::snippet[]
);
}
Polar Chart
Source code
charts-polar.tsx
import React from 'react';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
function Example() {
return (
// tag::snippet[]
<Chart polar title="Polar Chart">
<ChartSeries type="column" title="Column" values={[8, 7, 6, 5, 4, 3, 2, 1]} />
<ChartSeries type="line" title="Line" values={[1, 2, 3, 4, 5, 6, 7, 8]} />
<ChartSeries type="area" title="Area" values={[1, 8, 2, 7, 3, 6, 4, 5]} />
</Chart>
// end::snippet[]
);
}
Gantt Chart
Source code
charts-gantt.tsx
import React from 'react';
import { Chart } from '@vaadin/react-components-pro/Chart.js';
import { ChartSeries } from '@vaadin/react-components-pro/ChartSeries.js';
function Example() {
return (
// tag::snippet[]
<Chart
type="gantt"
title="Gantt Chart"
additionalOptions={{
xAxis: {
min: 1416182400000,
max: 1417305600000,
},
yAxis: {
categories: ['Start prototype', 'Test prototype', 'Develop', 'Run acceptance tests'],
},
}}
>
<ChartSeries
values={[
{
y: 0,
start: 1416268800000,
end: 1416873600000,
custom: {
assignee: 'John',
},
completed: 0.33,
},
{
y: 1,
start: 1417046400000,
end: 1417219200000,
custom: {
assignee: 'William',
},
},
{
y: 2,
start: 1416441600000,
end: 1416873600000,
custom: {
assignee: 'Jane',
},
completed: 0.4,
},
{
y: 2,
start: 1417046400000,
end: 1417219200000,
custom: {
assignee: 'Jane',
},
},
{
y: 3,
start: 1416700800000,
end: 1416960000000,
custom: {
assignee: 'John',
},
completed: 0.25,
},
]}
additionalOptions={{
type: 'gantt',
dataLabels: [
{
enabled: true,
format: '<div>{point.custom.assignee}</vaadin-avatar>',
useHTML: true,
align: 'right',
},
],
}}
/>
</Chart>
// end::snippet[]
);
}