React Div Charts

Welcome to React Div Charts—a lightweight and fully editable charting library designed for developers who prefer simplicity and flexibility in visualizing data. Unlike many traditional libraries that rely on complex D3.js integrations, React Div Charts is built entirely with standard HTML <div> elements, making it intuitive and easy to customize.

Whether you’re creating bar charts, line charts, doughnut charts, or multi-type visualizations, our library empowers you to craft beautiful and responsive charts without the overhead of heavy dependencies. While it excels in delivering clear insights from smaller datasets, React Div Charts prioritizes interactivity and editability, allowing users to modify and manipulate chart elements seamlessly.

Get started today and explore the potential of easy-to-use, flexible charting solutions tailored for your React applications!

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.

Show Line Chart code

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.

Show Bar Chart code

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.

Show Multi Chart code

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.

Show Half Angle Radial Chart code

Half Angle Radial Chart

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

Pie Chart.

Show Pie Chart code

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.

Show Doughnut Chart code

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>

Here’s the final version of the patch notes:

---

Patch Notes

Version 1.1.0 (2024-10-08)

Changes:

• Breaking Change: renderLine and renderBar have been renamed to renderLineContainer and renderBarContainer.
  • New Behavior:
    • The new renderLineContainer and renderBarContainer handle the layout aspects of the line and bar elements, such as width, height, and positioning.
    • You can now customize the style and appearance of the individual line and bar components using renderLine and renderBar. This change allows for more detailed control over the visual representation of chart elements.

---

API Documentation

CellData

Represents a single cell's data used in various chart types.

• label: string - The label for the cell.
• color: string - The color representing the cell.
• value: number - The numerical value of the cell.
• chartType: 'bar' | 'line' (optional) - Specifies the chart type, either bar or line.

---

PieChartProps

Props required for rendering a Pie chart.

• data: PieData[] - Array of data points to be displayed in the pie chart.
• width: number - The width of the chart.
• hideLabels: boolean (default: false) - If true, hides the labels of the pie chart.
• renderLabel: (d: PieData) => React.ReactNode (default: defaultRenderLabel) - Custom render function for labels.

---

DoughnutChartProps

Props required for rendering a Doughnut chart.

• data: PieData[] - Array of data points to be displayed in the doughnut chart.
• width: number - The width of the chart.
• hideCenter: boolean (default: false) - If true, hides the center section of the chart.
• hideLabels: boolean (default: false) - If true, hides the labels of the doughnut chart.
• renderCenter: () => React.ReactNode (optional) - Custom render function for the center of the doughnut.
• renderLabel: (d: PieData) => React.ReactNode (optional) - Custom render function for labels.

---

PieData

Represents a single data point in a pie or doughnut chart.

• value: number - The value of the data point.
• label: string - The label of the data point.
• color: string - The color of the data point.

---

ChartData

Represents a dataset for a chart with multiple values.

• label: string (optional) - The label for the dataset.
• value: number[] - Array of values for the dataset.
• color: string - The color representing the dataset.
• chartType: 'bar' | 'line' (optional) - Specifies whether the dataset is for a bar or line chart.

---

CellsProps

Props used for rendering cells in various charts.

• labels: string[] - Array of labels for each cell.
• data: ChartData[] - Array of data corresponding to each cell.
• width: number - The width of the chart.
• height: number - The height of the chart.
• cellHeight: number - The height of each cell.
• chartType: 'bar' | 'line' (default: 'bar') - Specifies the chart type for rendering cells.
• cellColor: string (default: '#e0e0e0') - Overrides the default color of the cells.
• hideCells: boolean (default: false) - If true, hides the cells.
• renderChart: (data: CellData[], chartMaxValue: number, cellWidth: number, index: number, nextData?: CellData[]) => React.ReactNode (default: () => <></>) - Custom render function for the chart.
• renderLabel: (label: string, cellWidth: number) => React.ReactNode (default: defaultRenderLabel) - Custom render function for labels.
• renderValueLabel: (valueLabel: number) => React.ReactNode (default: defaultRenderValueLabel) - Custom render function for rendering value labels.
• renderLabels: (cellWidth: number) => React.ReactNode (optional) - Custom render function for rendering multiple labels.

---

BarChartProps

Props required for rendering a bar chart.

• labels: string[] - Array of labels for the bar chart.
• data: ChartData[] - Array of data points for the bar chart.
• width: number (default: 500) - The width of the chart.
• height: number (default: 300) - The height of the chart.
• cellHeight: number (default: 50) - The height of each cell in the chart.
• cellColor: string (default: '#e0e0e0') - Color of the cells in the chart.
• hideBarValue: boolean (default: false) - If true, hides the values for each bar.
• hideCells: boolean (default: false) - If true, hides the cells in the chart.
• renderChart: (data: CellData[], chartMaxValue: number, cellWidth: number) => React.ReactNode (optional) - Custom render function for the chart.
• renderBarValue: (value: number) => React.ReactNode (optional) - Custom render function for bar values.
• renderBarContainer: (value: CellData, chartMaxValue: number, cellWidth: number) => React.ReactNode (optional) - Custom render function for the bar container.
• renderBar: (value: CellData, cellWidth: number) => React.ReactNode (optional) - Custom render function for each bar.
• renderLabel: (label: string, cellWidth: number) => React.ReactNode (optional) - Custom render function for labels.
• renderLabels: (cellWidth: number) => React.ReactNode (optional) - Custom render function for multiple labels.

---

LineChartProps

Props required for rendering a line chart.

• labels: string[] - Array of labels for the line chart.
• data: ChartData[] - Array of data points for the line chart.
• width: number (default: 500) - The width of the chart.
• height: number (default: 300) - The height of the chart.
• cellHeight: number (default: 50) - The height of each cell in the chart.
• pointRadius: number (default: 5) - The radius of the points on the line.
• cellColor: string (default: '#e0e0e0') - Color of the cells in the chart.
• hideLineValue: boolean (default: false) - If true, hides the values for each point on the line.
• hidePoint: boolean (default: false) - If true, hides the points on the line.
• hideCells: boolean (default: false) - If true, hides the cells in the chart.
• renderChart: (data: CellData[], chartMaxValue: number, cellWidth: number, index: number, nextData?: CellData[]) => React.ReactNode (optional) - Custom render function for the chart.
• renderLineValue: (value: number) => React.ReactNode (optional) - Custom render function for line values.
• renderLineContainer: (value: CellData, chartMaxValue: number, cellWidth: number, nextData?: CellData) => React.ReactNode (optional) - Custom render function for the line container.
• renderLine: (value: CellData) => React.ReactNode (optional) - Custom render function for the line.
• renderPoint: (cellData: CellData) => React.ReactNode (optional) - Custom render function for points.
• renderLabel: (label: string, cellWidth: number) => React.ReactNode (optional) - Custom render function for labels.
• renderLabels: (cellWidth: number) => React.ReactNode (optional) - Custom render function for multiple labels.

---

MultiChartProps

Props used for rendering multiple chart types, such as bar and line charts, together.

• labels: string[] - Array of labels for the multi-chart.
• data: ChartData[] - Array of data points for the multi-chart.
• width: number (default: 500) - The width of the chart.
• height: number (default: 300) - The height of the chart.
• cellHeight: number (default: 50) - The height of each cell in the chart.
• cellColor: string (default: '#e0e0e0') - Color of the cells in the chart.
• pointRadius: number (default: 5) - The radius of the points on the line.
• hideBarValue: boolean (default: false) - If true, hides the values for each bar.
• hideLineValue: boolean (default: false) - If true, hides the values for each point on the line.
• hidePoint: boolean (default: false) - If true, hides the points on the line.
• hideCells: boolean (default: false) - If true, hides the cells in the chart.
• renderChart: (data: CellData[], chartMaxValue: number, cellWidth: number) => React.ReactNode (optional) - Custom render function for the entire chart.
• renderLabel: (label: string, cellWidth: number) => React.ReactNode (optional) - Custom render function for a label.
• renderLabels: (cellWidth: number) => React.ReactNode (optional) - Custom render function for multiple labels.
• renderBarValue: (value: number) => React.ReactNode (optional) - Custom render function for bar values.
• renderBarContainer: (value: CellData, chartMaxValue: number, cellWidth: number) => React.ReactNode (optional) - Custom render function for the bar container.
• renderBar: (value: CellData, cellWidth: number) => React.ReactNode (optional) - Custom render function for the bar.
• renderLineValue: (value: number) => React.ReactNode (default: defaultRenderLineValue) - Custom render function for line values.
• renderLineContainer: (value: CellData, chartMaxValue: number, cellWidth: number, nextData?: CellData) => React.ReactNode (optional) - Custom render function for the line container.
• renderLine: (value: CellData) => React.ReactNode (optional) - Custom render function for the line.
• renderPoint: (cellData: CellData) => React.ReactNode (optional) - Custom render function for points.

---

HalfAngleRadialChartProps

Props used for rendering a half-angle radial chart.

• value: number - The value to be displayed on the bar chart.
• width: number (default: 256) - The width of the chart.
• lineWidth: number (default: 20) - The width of the lines on the chart.
• minValue: number (default: 0) - The minimum value for the chart.
• maxValue: number (default: 100) - The maximum value for the chart.
• iconSize: number (default: 50) - The size of the icon displayed on the chart.
• hideBlob: boolean (default: false) - If true, hides the blob (central part) of the chart.
• hideBlobText: boolean (default: false) - If true, hides the text inside the blob.
• hidePointer: boolean (default: false) - If true, hides the pointer in the chart.
• hideMinMax: boolean (default: false) - If true, hides the min and max value labels.
• hideInnerCircularLine: boolean (default: false) - If true, hides the inner circular line in the chart.
• color: string (default: '#b71c1c') - The color of the bar chart.
• exceptionColor: string (default: '#e0e0e0') - The color to be used for exception values.
• renderBlob: () => React.ReactNode (optional) - Custom render function for the blob.
• renderBlobText: () => React.ReactNode (optional) - Custom render function for the blob text.
• renderPointer: () => React.ReactNode (optional) - Custom render function for the pointer.
• renderMinMax: (value: number) => React.ReactNode (optional) - Custom render function for the min and max values.
• renderInnerCircularLine: () => React.ReactNode (optional) - Custom render function for the inner circular line.

---