react-div-charts v1.1.0

Install it by running npm install react-div-charts --save or yarn add react-div-charts. Then to use it:

import { LineChart } from 'react-div-charts';

Examples

Line Chart.

Line Chart

<LineChart
    width={400}
    height={400}
    labels={['January', 'February', 'March', 'April', 'May', 'June','July', 'August', 'September', 'October', 'November', 'December']}
    data={[{
    label: 'Primary',
    value: [52,53,11,17,14,88,91,31,13,73,55,64],
    color:'blue',
    },
    {
    label: 'Secondary',
    value: [72,82,33,95,77,19,71,69,44,5,93,25],
    color:'red',

    }]}
/>

Bar Chart.

Bar Chart

<BarChart
    width={400}
    height={400}
    data={[{
    label: 'Primary',
    value: [1,86,42,71,15,17,78,54,44,10,65,38],
    color:'blue',
    },
    {
    label: 'Secondary',
    value: [19,54,1,36,75,27,2,93,8,30,29,2],
    color:'red',
    }]}
    labels={['January', 'February', 'March', 'April', 'May', 'June','July', 'August', 'September', 'October', 'November', 'December']}
/>

Multi Chart.

Multi Chart

<MultiChart
    width={400}
    height={400}
    labels={['January', 'February', 'March', 'April', 'May', 'June','July', 'August', 'September', 'October', 'November', 'December']}
    data={[{
    label: 'Primary',
    value: [74,42,92,7,6,7,61,20,13,49,98,40],
    color:'red',
    chartType:'line',
    },
    {
    label: 'Secondary',
    value: [16,94,24,2,98,21,82,48,68,13,14,90],
    color:'yellow',
    chartType:'bar',

    }]}
/>

Half Angle Radial Chart.

Half Angle Radial Chart

<HalfAngleRadialChart
    width={400}
    value={80}
/>

Pie Chart.

Pie Chart

<PieChart
    data={[
    { value: 30, label: 'Category A', color: '#FF6384' },
    { value: 20, label: 'Category B', color: '#36A2EB' },
    { value: 50, label: 'Category C', color: '#FFCE56' },
    ]}
    width={400}
/>

Doughnut Chart.

Doughnut Chart

<div style={{
        backgroundColor: 'white',
      }}>
    <DoughnutChart
        data={[
        { value: 30, label: 'Category A', color: '#FF6384' },
        { value: 20, label: 'Category B', color: '#36A2EB' },
        { value: 50, label: 'Category C', color: '#FFCE56' },
        ]}
        width={400}
    />
</div>