Simple HTML Div Charting Library For React

Description:

React Div Charts is a lightweight, customizable charting library for React applications.

Built with standard HTML <div> elements, it provides an alternative to complex charting libraries that often rely on heavy dependencies like D3.js.

React Div Charts focuses on simplicity and flexibility, allowing developers to easily create and customize various charts, including line, bar, pie, doughnut, radial, and more.

This library is ideal for developers who need quick, editable charts without dealing with the complexity of traditional charting tools.

Use Cases

Dashboard Visualizations: Display key performance indicators (KPIs) and other metrics in a clear and concise manner within a project dashboard. For example, track user engagement, sales figures, or website traffic over time.
Data Exploration Tools: Create interactive tools for users to explore smaller datasets. Imagine filtering and highlighting data points directly on the chart.
Educational Resources: Develop interactive learning materials illustrating concepts using visually appealing charts. A physics simulation could use a line chart to represent velocity changes.
Real-time Data Display: Visualize real-time data updates, such as server performance metrics or stock prices. A system monitoring dashboard could use a line chart for real-time CPU usage.
Reporting: Generate simple, customizable reports incorporating charts and graphs. Display sales figures by region using bar charts or customer demographics with pie charts.

Installation Guide

Install React-Div-Charts using npm or yarn:

npm install react-div-charts --save
// or
yarn add react-div-charts

Usage Guide

1. Line Chart:

   <LineChart
       width={400}
       height={400}
       labels={['Jan', 'Feb', 'Mar', 'Apr']}
       data={[{ label: 'Primary', value: [30, 70, 50, 100], color: 'blue' }]}
   />

2. Bar Chart:

   <BarChart
       width={400}
       height={400}
       data={[{ label: 'Primary', value: [10, 20, 30, 40], color: 'green' }]}
   />

3. Pie Chart:

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

4. Doughnut Chart:

   <DoughnutChart
       data={[
         { value: 50, label: 'Category A', color: '#FF6384' },
         { value: 25, label: 'Category B', color: '#36A2EB' }
       ]}
       width={400}
   />

5. Radial Chart:

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

6. Multi Chart:

   <MultiChart
       width={400}
       labels={['Jan', 'Feb', 'Mar', 'Apr']}
       data={[
         { label: 'Sales', value: [50, 75, 100, 125], chartType: 'line', color: 'blue' },
         { label: 'Expenses', value: [40, 60, 90, 110], chartType: 'bar', color: 'red' }
       ]}
   />

All possible props

General Chart Props:

width (number): The width of the chart in pixels.
height (number): The height of the chart in pixels.
labels (string[]): An array of labels for the x-axis (or segments in radial/pie charts).
data (ChartData[] or PieData[]): The data to be displayed. The structure varies based on the chart type. See ChartData and PieData explanations below.
cellHeight (number, default: 50): (Bar/Line/Multi Chart) Height of individual cells in the grid.
cellColor (string, default: ‘#e0e0e0’): (Bar/Line/Multi Chart) Background color of the cells.
hideCells (boolean, default: false): (Bar/Line/Multi Chart) Whether to hide the grid cells.

ChartData (for Bar, Line, and Multi Charts):

label (string): The name of the dataset.
value (number[]): An array of numerical values representing the data points.
color (string): The color of the bars or lines for this dataset.
chartType (‘bar’ | ‘line’): (Multi Chart only) Specifies the chart type for this particular dataset within a MultiChart.

PieData (for Pie and Doughnut Charts):

value (number): The numerical value of the segment.
label (string): The label for the segment.
color (string): The color of the segment.

Specific Chart Props:

BarChartProps:

hideBarValue (boolean, default: false): Hides the value labels on each bar.
renderBarValue (function): Custom render function for bar values.
renderBarContainer (function): Custom render function for the container of each bar.
renderBar (function): Custom render function for the actual bar element.

LineChartProps:

pointRadius (number, default: 5): Radius of the data points on the line.
hideLineValue (boolean, default: false): Hides the value labels next to data points.
hidePoint (boolean, default: false): Hides the circular data points.
renderLineValue (function): Custom render function for line values.
renderLineContainer (function): Custom render function for the line container.
renderLine (function): Custom render function for the line itself.
renderPoint (function): Custom render function for the individual data points.

MultiChartProps:

Combines props from BarChartProps and LineChartProps.

HalfAngleRadialChartProps:

value (number): The value to display on the radial chart (0-100).
lineWidth (number, default: 20): Width of the radial bar.
minValue (number, default: 0): Minimum value of the scale.
maxValue (number, default: 100): Maximum value of the scale.
iconSize (number, default: 50): Size of the central icon.
hideBlob (boolean, default: false): Hides the central circle (“blob”).
hideBlobText (boolean, default: false): Hides the text within the central circle.
hidePointer (boolean, default: false): Hides the pointer/needle.
hideMinMax (boolean, default: false): Hides min/max labels.
hideInnerCircularLine (boolean, default: false): Hides the inner circular line.
color (string, default: ‘#b71c1c’): Color of the radial bar.
exceptionColor (string, default: ‘#e0e0e0’): Color for exception values.
renderBlob, renderBlobText, renderPointer, renderMinMax, renderInnerCircularLine: Custom render functions for respective elements.

PieChartProps:

hideLabels (boolean, default: false): Hides segment labels.
renderLabel (function): Custom render function for labels.

DoughnutChartProps:

hideCenter (boolean, default: false): Hides the center of the doughnut.
hideLabels (boolean, default: false): Hides segment labels.
renderCenter (function): Custom render function for the center content.
renderLabel (function): Custom render function for labels.

Render Callback Props (Common to Several Charts):

These props allow you to take full control over the rendering of specific chart elements. They receive data and other relevant information as arguments, allowing you to create completely custom visuals.

renderChart: Custom render function for the entire chart area.
renderLabel: Custom render function for individual labels.
renderLabels: Custom render function for rendering all labels.
renderValueLabel: Custom function to render the numerical value labels.

Preview

Prev Next

ReactScript