1.2.0 • Published 3 years ago
@mhumam/edts-chart v1.2.0
EDTS Chart
React components for EDTS Chart, the most popular charting library.
Quickstart
Install this library with peer dependencies:
npm i @mhumam/edts-chart
Chart Types
Then, import and use individual components:
- Area Chart
import { AreaChart } from '@mhumam/edts-chart';
const data = [
{
name: 'Data 1',
data: [
{ label: 'Feb', value: 1 },
{ label: 'Mar', value: 2 },
{ label: 'Apr', value: 3 },
{ label: 'May', value: 4 },
{ label: 'Jun', value: 3 },
{ label: 'Jul', value: 6 },
{ label: 'Aug', value: 9 },
{ label: 'Sep', value: 8 },
{ label: 'Oct', value: 9 }
]
}
];
<AreaChart data={data} />
- Bar Chart
import { BarChart } from '@mhumam/edts-chart';
const data = [
{
name: 'Data 1',
data: [
{ label: 'Feb', value: 1 },
{ label: 'Mar', value: 2 },
{ label: 'Apr', value: 3 },
{ label: 'May', value: 4 },
{ label: 'Jun', value: 5 },
{ label: 'Jul', value: 6 },
{ label: 'Aug', value: 7 },
{ label: 'Sep', value: 8 },
{ label: 'Oct', value: 9 }
]
}
];
<BarChart data={data} />
- Geo Chart (View Region Code)
import { GeoChart } from '@mhumam/edts-chart';
const data = {
label: "Popularity",
value: [
{ code: 'ID', label: 'Indonesia', value: 450 },
{ code: 'GE', label: 'Germany', value: 1000 },
{ code: 'DK', label: 'Denmark', value: 400 },
{ code: 'FR', label: 'France', value: 750 },
{ code: 'BR', label: 'Brazil', value: 1000 }
]
};
<GeoChart data={...} />
- Line Chart
import { LineChart } from '@mhumam/edts-chart';
const data = [
{
name: 'Data 1',
data: [
{ label: 'Feb', value: 1 },
{ label: 'Mar', value: 2 },
{ label: 'Apr', value: 3 },
{ label: 'May', value: 4 },
{ label: 'Jun', value: 3 },
{ label: 'Jul', value: 6 },
{ label: 'Aug', value: 9 },
{ label: 'Sep', value: 8 },
{ label: 'Oct', value: 9 }
]
}
];
<LineChart data={data} />
- Pie Chart
import { PieChart } from '@mhumam/edts-chart';
const data = [
{ label: "Team A", value: 44 },
{ label: "Team B", value: 55 },
{ label: "Team C", value: 13 },
{ label: "Team D", value: 43 },
{ label: "Team E", value: 22 }
];
<PieChart data={data} />