1.2.0 • Published 3 years ago

@mhumam/edts-chart v1.2.0

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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} />
1.2.0

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago