Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
infocharts
Advanced tools
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.
Demo's added to each component
To install the InfoCharts library, run the following command:
npm install infocharts
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';
Here’s a list of all the chart components available in the InfoCharts library along with a brief description of each.
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.
<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
/>
The DumbbellChart
component is great for comparing two data points across multiple categories, such as changes over time or comparisons between groups.
<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"
/>
The ComparisonChart
allows you to compare different categories and their respective values.
<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" }
]}
/>
The HorizontalBarChart
is ideal for displaying data as horizontal bars, where each bar represents a category.
<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"]}
/>
The HorizontalList
allows you to visualize a list of categories with values, each represented by a horizontal bar.
<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"
/>
The StackedAreaChart
allows you to display multiple data series stacked on top of one another in an area chart format.
<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}
/>
The SplineAreaChart
provides smooth, curved lines connecting data points in an area chart.
<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"
/>
The PieChart
is a circular chart that divides data into slices to illustrate numerical proportions.
<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}
/>
The RiskMatrix
displays a matrix to visually represent risk levels across categories like impact and likelihood.
<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
/>
The HeatMap
allows you to visualise data through variations in coloring, with a focus on grid-based data.
<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"
/>
The StackedRow
chart represents each row as a stacked set of values, making it perfect for comparing parts of a whole.
<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%"
/>
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.
<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"
/>
The BenchmarkChart
visualises actual performance versus target values with customisable bars and benchmarks.
<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"
/>
The WaffleChart
component represents data as a grid of icons, where each icon corresponds to a specific percentage of the total value.
<WaffleChart
title="Waffle Chart Example"
percentage={75}
background="#f9f9f9"
foreground="#000"
description="This waffle chart shows a 75% completion rate."
activeColor="#4caf50"
nonActiveColor="#ccc"
/>
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.
<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"
/>
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.
<SparkHorizontalBar
title="Sales Progress"
total={100}
value={75}
suffix="%"
barColor="green"
background="#f9f9f9"
foreground="darkgreen"
/>
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.
<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="%"
/>
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.
<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"
/>
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.
<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']}
/>
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.
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}
/>
The InTen
component renders a responsive SVG visualisation where the width of a colored bar is controlled by the value
prop, representing a percentage.
<InTen
width="300px"
foreground="lightblue"
background="darkblue"
value={15}
type={2} // option 1 or 2
/>
<InTen
value={45} // percentage
/>
The ArcadeBar
is a novelty component that looks strangely similar to a maze based arcade classic. It's a fun graph.
<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']
}
}}
/>
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.
<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' },
]}
/>
This project is licensed under the MIT License.
FAQs
Unknown package
We found that infocharts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.