infocharts
v1.1.63
Published
<img src="https://raw.githubusercontent.com/garethslinn/public_infocharts/refs/heads/main/logo.svg" />
Downloads
279,543
Maintainers
Keywords
Readme
InfoCharts Library
Welcome to InfoCharts, a comprehensive library of customisable and accessible chart components built with React. The library includes many different charts that cover a wide range of data visualisation needs. Each chart is designed to be responsive, customisable, and easy to integrate into your projects.
Update
Demo's added to each component
Installation
To install the InfoCharts library, run the following command:
npm install infocharts
How to import
import {
DoughnutChart,
DumbbellChart,
ComparisonGraph,
HorizontalBar,
HorizontalList,
StackedAreaChart,
SplineAreaChart,
PieChart,
RiskRating,
HeatMap,
StackedRow,
StackedBarChart,
StackedVenn,
BenchmarkChart,
WaffleChart,
SparkBar,
SparkHorizontalBar,
SparkStackedBar,
SparkLine,
USMap,
InTen
} from 'infocharts';
import 'infocharts/styles/infocharts.css';
Available Charts
Here’s a list of all the chart components available in the InfoCharts library along with a brief description of each.
1. Doughnut Chart
The DoughnutChart
component is perfect for showing proportional data. You can easily customise the colors, size, and label of each section of the doughnut chart.
Demo
Example Usage:
<DoughnutChart
title="Apples"
summary="56% of the total fruit production in the first quarter"
value={56}
size={300}
bgColor="blue" // Background color of the doughnut chart
fgColor="orange" // Foreground color (the filled portion of the chart)
background="white" // Background color of the container
textColor="black" // Text color for the title and summary
labelColor="black" // Color of the percentage label
percentageTextSize={3.5} // Size of the percentage text in rem
titleTextSize={1.8} // Size of the chart title text in rem
summaryTextSize={0.8} // Size of the summary text in rem
/>
2. Dumbbell Chart
The DumbbellChart
component is great for comparing two data points across multiple categories, such as changes over time or comparisons between groups.
Demo
Example Usage:
<DumbbellChart
data={[
{ fruit: "Apples", series1: 50, series2: 80 },
{ fruit: "Bananas", series1: 40, series2: 70 },
{ fruit: "Oranges", series1: 30, series2: 60 },
{ fruit: "Grapes", series1: 10, series2: 20 },
{ fruit: "Pears", series1: 20, series2: 50 },
{ fruit: "Peaches", series1: 40, series2: 50 }
]}
colors={["rgba(0, 123, 255, 0.7)", "rgba(255, 0, 123, 0.7)"]}
height={400}
width={500}
background="#fff"
foreground="#000"
labelColor="#000"
/>
3. Comparison Chart
The ComparisonChart
allows you to compare different categories and their respective values.
Demo
Example Usage:
<ComparisonGraph
title="Comparison Graph Example"
summary="This graph compares different fruit production."
ariaDescription="A Comparison graph comparing the production of various fruits."
labelColor="#fff"
background="#f0f0f0"
foreground="#333"
data={[
{ value: 80, color: "#007bff" },
{ value: 60, color: "#ff007b" },
{ value: 90, color: "#00ff7b" },
{ value: 10, color: "#ffdd00" }
]}
/>
4. Horizontal Bar Chart
The HorizontalBarChart
is ideal for displaying data as horizontal bars, where each bar represents a category.
Demo
Example Usage:
<HorizontalBar
title="Fruit Production Comparison"
background="#0c263eff"
foreground="#ffffff"
labelColor="#ffffff"
summary="A horizontal bar chart comparing the production of various fruits in 2023."
year={2023}
valueType="%"
items={[
{ name: "Apples", value: 50, color: "#007bff" },
{ name: "Bananas", value: 30, color: "#28a745" },
{ name: "Oranges", value: 20, color: "#ffc107" },
{ name: "Grapes", value: 15, color: "#17a2b8" }
]}
colorSeries={["#ff5733", "#c70039", "#900c3f", "#581845"]}
/>
5. Horizontal List
The HorizontalList
allows you to visualize a list of categories with values, each represented by a horizontal bar.
Demo
Example Usage:
<HorizontalList
title="Fruit Consumption Comparison"
background="#0c263eff"
foreground="#ffffff"
summary="A horizontal list comparing the consumption of various fruits in 2023."
labelColor="#ffffff"
valueType="%"
items={[
{ name: "Apples", value: 50, color: "#ff6347" },
{ name: "Bananas", value: 30, color: "#4682b4" },
{ name: "Oranges", value: 20, color: "#32cd32" },
{ name: "Grapes", value: 15, color: "#dda0dd" }
]}
valueColor="#fff"
/>
6. Stacked Area Chart
The StackedAreaChart
allows you to display multiple data series stacked on top of one another in an area chart format.
Demo
Example Usage:
<StackedAreaChart
data={[
{ month: "Jan", series1: 30, series2: 50, series3: 20 },
{ month: "Feb", series1: 40, series2: 60, series3: 30 },
{ month: "Mar", series1: 35, series2: 55, series3: 25 },
{ month: "Apr", series1: 50, series2: 70, series3: 40 },
{ month: "May", series1: 60, series2: 80, series3: 50 }
]}
width={800}
height={400}
colors={["#ff6347", "#4682b4", "#32cd32"]}
background="#f5f5f5"
labelColor="#333"
axisColor="#000"
lineColor="#305b89"
// hideAxis={true}
/>
7. Spline Area Chart
The SplineAreaChart
provides smooth, curved lines connecting data points in an area chart.
Demo
Example Usage:
<SplineAreaChart
data={[30, 40, 35, 50, 45, 60, 55]}
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
width={800}
height={400}
fillColor="rgba(70, 130, 180, 0.3)"
strokeColor="rgba(70, 130, 180, 1)"
background="#f9f9f9"
labelColor="#333"
lineColor="#ccc"
/>
8. Pie Chart
The PieChart
is a circular chart that divides data into slices to illustrate numerical proportions.
Demo
Example Usage:
<PieGraph
title="Fruit Production"
summary="A pie chart showing the distribution of fruit production in the first quarter."
source="Agriculture Department"
data={[
{ name: 'Apples', value: 50, color: '#ff6347' },
{ name: 'Bananas', value: 30, color: '#4682b4' },
{ name: 'Oranges', value: 20, color: '#32cd32' }
]}
background="#fff"
foreground="#000"
showTable={true}
labelColor="black"
labelSize="0.15rem"
isFloat={false}
tableName="Fruit"
tableValue="Production"
patterns={['dots', 'lines', 'stars']}
isPattern={true}
/>
9. Risk Matrix
The RiskMatrix
displays a matrix to visually represent risk levels across categories like impact and likelihood.
Demo
Example Usage:
<RiskRating
riskData={[
['low', 'low', 'low', 'medium', 'high'], // Impact 1 (low)
['low', 'low', 'medium', 'high', 'high'], // Impact 2
['low', 'medium', 'medium', 'high', 'high'], // Impact 3
['medium', 'medium', 'high', 'high', 'high'], // Impact 4
['medium', 'high', 'high', 'high', 'high'], // Impact 5 (high)
]}
likelihoodLabels={['Rare', 'Unlikely', 'Possible', 'Likely', 'Almost Certain']}
impactLabels={['Insignificant', 'Minor', 'Moderate', 'Major', 'Catastrophic']}
background={'#fff'} // Pass background color
foreground={'#000'} // Pass text color for matrix cells
labelColor={['#fff','#000','#000']} // Array of colors for axis labels
colors={['red', 'orange', 'yellow']} // Colors for low, medium, and high risk levels
/>
10. Heat Map
The HeatMap
allows you to visualise data through variations in coloring, with a focus on grid-based data.
Demo
Example Usage:
<HeatMap
data={[
[30, 50, 70, 90],
[40, 60, 80, 100],
[20, 40, 60, 80]
]}
months={['January', 'February', 'March', 'April']}
rowLabels={['Category 1', 'Category 2', 'Category 3']}
background="#fff"
labelColor="#000"
valueColor="#fff"
/>
11. Stacked Row Chart
The StackedRow
chart represents each row as a stacked set of values, making it perfect for comparing parts of a whole.
Demo
Example Usage:
<StackedRow
data={[
{ description: 'Category 1', segments: [
{ value: 10, color: '#4682b4' },
{ value: 20, color: '#ff6347' },
{ value: 30, color: '#32cd32' },
{ value: 25, color: '#dda0dd' },
{ value: 15, color: '#ffa500' }
] },
{ description: 'Category 2', segments: [
{ value: 20, color: '#4682b4' },
{ value: 15, color: '#ff6347' },
{ value: 25, color: '#32cd32' },
{ value: 20, color: '#dda0dd' },
{ value: 20, color: '#ffa500' }
] },
{ description: 'Category 3', segments: [
{ value: 30, color: '#4682b4' },
{ value: 20, color: '#ff6347' },
{ value: 10, color: '#32cd32' },
{ value: 25, color: '#dda0dd' },
{ value: 15, color: '#ffa500' }
] }
]}
legend={[
{ label: 'Segment 1', color: '#4682b4' },
{ label: 'Segment 2', color: '#ff6347' },
{ label: 'Segment 3', color: '#32cd32' },
{ label: 'Segment 4', color: '#dda0dd' },
{ label: 'Segment 5', color: '#ffa500' }
]}
background="#f9f9f9"
textColor="#000"
defaultColors={['#4682b4', '#ff6347', '#32cd32', '#dda0dd', '#ffa500']}
explanation="This chart shows the proportion of five different values for different categories."
barWidth="90%"
/>
12. Stacked Bar Chart
The StackedBarChart
component stacks multiple series of data on top of each other within a single bar, allowing you to compare total and individual segment values.
Demo
Example Usage:
<StackedBarChart
data={[
{ month: 'January', series1: 30, series2: 20, series3: 50 },
{ month: 'February', series1: 40, series2: 30, series3: 30 },
{ month: 'March', series1: 20, series2: 50, series3: 30 },
]}
width={800}
height={400}
colors={["#ff6347", "#4682b4", "#32cd32"]}
background="#f5f5f5"
labelColor="#333"
axisColor="#000"
/>
13. Benchmark Chart
The BenchmarkChart
visualises actual performance versus target values with customisable bars and benchmarks.
Demo
Example Usage:
<BenchmarkChart
data={[
{ label: 'Category 1', actual: 70, benchmark: 80 },
{ label: 'Category 2', actual: 50, benchmark: 60 },
{ label: 'Category 3', actual: 90, benchmark: 85 },
]}
title="Performance vs Target"
background="#f9f9f9"
foreground="#000"
barColor="#4682b4"
targetColor="#ff6347"
/>
14. Waffle Chart
The WaffleChart
component represents data as a grid of icons, where each icon corresponds to a specific percentage of the total value.
Demo
Example Usage:
<WaffleChart
title="Waffle Chart Example"
percentage={75}
background="#f9f9f9"
foreground="#000"
description="This waffle chart shows a 75% completion rate."
activeColor="#4caf50"
nonActiveColor="#ccc"
/>
15. Spark Bar
The SparkBar
component is a minimalist bar graph typically used to show trends or variations over time. It’s perfect for dashboards and reports where space is limited, but you still want to convey key data points.
Demo
Example Usage:
<SparkBar
title="Sales Over Time"
data={[
{ item: 'January', value: 500 },
{ item: 'February', value: 200 },
{ item: 'March', value: 150 },
{ item: 'April', value: 300 },
{ item: 'May', value: 400 },
{ item: 'June', value: 450 },
{ item: 'July', value: 500 },
]}
fillColor="blue"
backgroundColor="#f9f9f9"
foregroundColor="darkblue"
/>
16. Spark Horizontal Bar
The SparkHorizontalBar
component is designed to display a single horizontal bar that shows a percentage of a value over a total. It’s great for representing a progress indicator or small trend overview.
Demo
Example Usage:
<SparkHorizontalBar
title="Sales Progress"
total={100}
value={75}
suffix="%"
barColor="green"
background="#f9f9f9"
foreground="darkgreen"
/>
17. Spark Stacked Bar
The SparkStackedBar
component displays multiple segments stacked within a single bar, allowing you to compare parts of a whole. It’s compact and designed for high-level overviews.
Demo
Example Usage:
<SparkStackedBar
title="Fruit Sales"
total={100}
segments={[
{ label: 'Segment 1', value: 40, color: 'green' },
{ label: 'Segment 2', value: 30, color: 'blue' },
{ label: 'Segment 3', value: 20, color: 'orange' },
{ label: 'Segment 4', value: 10, color: 'red' }
]}
background="#f0f0f0"
foreground="darkblue"
suffix="%"
/>
18. SparkLine
The SparkLine is a minimalist line graph designed to show trends over time. It’s often used in dashboards where space is tight, but you still need to convey data trends.
Demo
Example Usage:
<SparkLine
title="Revenue Growth"
data={[
{ item: 'January', value: 500 },
{ item: 'February', value: 200 },
{ item: 'March', value: 150 },
{ item: 'April', value: 300 },
{ item: 'May', value: 400 },
{ item: 'June', value: 450 },
{ item: 'July', value: 500 },
]}
strokeColor="blue"
strokeWidth={3}
backgroundColor="#f9f9f9"
foregroundColor="darkblue"
/>
19. StackedVenn
The StackedVenn component is a responsive, nested chart that maintains a square aspect ratio. It is designed to visualise hierarchical data with overlapping sets, scaling dynamically based on the width of its container.
Demo
<StackedVenn
data={[
{ label: 'Largest Set', value: 50, color: '#fca' },
{ label: 'Medium Set', value: 30, color: '#deaa87' },
{ label: 'Smallest Set', value: 10, color: '#c87137' }
]}
// width="300px"
minRadius={20}
maxRadius={80}
background="#f9f9f9"
foreground="darkblue"
textSize="0.5rem"
colors={['#ff9999', '#99cc99', '#9999ff']}
/>
20. USMap
The USMap component is a stateless, reusable map of the United States, designed to visually represent data using custom colors to indicate statistics. The map scales dynamically based on its container's width and is fully accessible.
Demo
const colour_high = '#87CEEB';
const colour_medium = '#4682B4';
const colour_low = '#D32F2F';
const handleTooltip = (item) => {
console.log(item);
};
<USMap
regionData={{
AL: { fill: colour_medium, label: 'AL', stat: '47.32' },
AK: { fill: colour_low, label: 'AK', stat: '12.57' },
AZ: { fill: colour_medium, label: 'AZ', stat: '35.62' },
AR: { fill: colour_low, label: 'AR', stat: '26.14' },
CA: { fill: colour_high, label: 'CA', stat: '58.91' },
CO: { fill: colour_medium, label: 'CO', stat: '41.23' },
CT: { fill: colour_medium, label: 'CT', stat: '39.45' },
DE: { fill: colour_low, label: 'DE', stat: '28.11' },
FL: { fill: colour_high, label: 'FL', stat: '52.76' },
GA: { fill: colour_medium, label: 'GA', stat: '44.67' },
HI: { fill: colour_medium, label: 'HI', stat: '31.89' },
ID: { fill: colour_low, label: 'ID', stat: '23.54' },
IL: { fill: colour_high, label: 'IL', stat: '49.85' },
IN: { fill: colour_medium, label: 'IN', stat: '37.12' },
IA: { fill: colour_low, label: 'IA', stat: '29.74' },
KS: { fill: colour_medium, label: 'KS', stat: '34.29' },
KY: { fill: colour_medium, label: 'KY', stat: '40.58' },
LA: { fill: colour_low, label: 'LA', stat: '22.34' },
ME: { fill: colour_low, label: 'ME', stat: '18.93' },
MD: { fill: colour_high, label: 'MD', stat: '46.78' },
MA: { fill: colour_high, label: 'MA', stat: '50.24' },
MI: { fill: colour_medium, label: 'MI', stat: '42.16' },
MN: { fill: colour_medium, label: 'MN', stat: '39.84' },
MS: { fill: colour_low, label: 'MS', stat: '25.67' },
MO: { fill: colour_medium, label: 'MO', stat: '33.45' },
MT: { fill: colour_low, label: 'MT', stat: '21.54' },
NE: { fill: colour_medium, label: 'NE', stat: '30.75' },
NV: { fill: colour_high, label: 'NV', stat: '47.29' },
NH: { fill: colour_medium, label: 'NH', stat: '36.41' },
NJ: { fill: colour_high, label: 'NJ', stat: '51.18' },
NM: { fill: colour_low, label: 'NM', stat: '28.67' },
NY: { fill: colour_high, label: 'NY', stat: '53.21' },
NC: { fill: colour_medium, label: 'NC', stat: '43.89' },
ND: { fill: colour_low, label: 'ND', stat: '17.65' },
OH: { fill: colour_high, label: 'OH', stat: '45.92' },
OK: { fill: colour_medium, label: 'OK', stat: '32.58' },
OR: { fill: colour_medium, label: 'OR', stat: '38.67' },
PA: { fill: colour_high, label: 'PA', stat: '49.24' },
RI: { fill: colour_low, label: 'RI', stat: '29.83' },
SC: { fill: colour_medium, label: 'SC', stat: '37.45' },
SD: { fill: colour_low, label: 'SD', stat: '22.94' },
TN: { fill: colour_medium, label: 'TN', stat: '40.17' },
TX: { fill: colour_high, label: 'TX', stat: '53.89' },
UT: { fill: colour_medium, label: 'UT', stat: '31.72' },
VT: { fill: colour_low, label: 'VT', stat: '19.54' },
VA: { fill: colour_medium, label: 'VA', stat: '44.36' },
WA: { fill: colour_high, label: 'WA', stat: '50.98' },
WV: { fill: colour_low, label: 'WV', stat: '23.76' },
WI: { fill: colour_medium, label: 'WI', stat: '38.45' },
WY: { fill: colour_low, label: 'WY', stat: '16.78' }
}}
title="Population by state"
summary="Marked by low, medium and high levels"
showLegend={true}
legend={{
low: colour_low,
medium: colour_medium,
high: colour_high,
}}
// width="500px"
// height="400px"
background="darkblue"
titleSize="2rem"
summarySize="1.2rem"
legendSize="1rem"
iconSize="2rem"
strokeColor="#fff"
textColor="#fff"
strokeWidth="1.8"
nameColor="#fff"
fnc={handleTooltip}
/>
21. InTen Chart
The InTen
component renders a responsive SVG visualisation where the width of a colored bar is controlled by the value
prop, representing a percentage.
Demo
Example Usage:
<InTen
width="300px"
foreground="lightblue"
background="darkblue"
value={15}
type={2} // option 1 or 2
/>
<InTen
value={45} // percentage
/>
22. ArcadeBar Chart
The ArcadeBar
is a novelty component that looks strangely similar to a maze based arcade classic. It's a fun graph.
Demo
Example Usage:
<ArcadeBar
data={{
title: 'Player High Scores',
// titleSize: 23,
// valueSize: 16,
// legendTextSize: 12,
// textColor: 'yellow',
// mazeColor: '#444',
// background: '#333',
// foreground: '#ff6f61',
// hideLegend: true,
series: {
values: [3143, 1984, 1512, 733],
// colors: ['#6b5b95', '#88b04b', '#92a8d1', '#f7cac9'],
legend: ['Jenny W', 'Rupert B', 'Gemma D', 'Edgar T']
}
}}
/>
23. History Chart
The HistoryLine
component creates a customizable horizontal timeline with markers for key
events, each with a title and description. It supports custom colors, marker shapes, and
flexible spacing.
Demo
Example Usage:
<HistoryChart
title="History Timeline"
// titleSize={6}
// labelSize={1.9}
// defaultColor="darkBlue"
// labelColor="yellow"
// background="#000"
// foreground="#fff"
// timelineColor='red'
// spacing={40}
// lineHeight={1.6}
data={[
{ title: '2003', description: 'The year we launched our first product', color: '#cc5200' },
{ title: '2004', description: 'Expansion into new markets', color: '#0000cc' },
{ title: '2005', description: 'Acquired by a larger company', color: '#cc0026' },
{ title: '2006', description: 'Launched second product line', color: '#00cccc' },
{ title: '2007', description: 'Entered international markets', color: '#cc9900' },
{ title: '2008', description: 'Established major partnerships', color: '#660066' },
{ title: '2009', description: 'Achieved record-breaking sales', color: '#cc5200' },
]}
/>
License
This project is licensed under the MIT License.