Gathering detailed insights and metrics for infocharts
Gathering detailed insights and metrics for infocharts
npm install infocharts
Typescript
Module System
Node Version
NPM Version
59.9
Supply Chain
83.1
Quality
85.7
Maintenance
100
Vulnerability
92.3
License
Total Downloads
661,932
Last Day
1,337
Last Week
9,315
Last Month
35,566
Last Year
661,932
Minified
Minified + Gzipped
Latest Version
1.1.63
Package Id
infocharts@1.1.63
Unpacked Size
619.77 kB
Size
147.29 kB
File Count
153
NPM Version
9.8.1
Node Version
18.18.0
Publised On
23 Oct 2024
Cumulative downloads
Total Downloads
Last day
-28%
1,337
Compared to previous day
Last week
5.2%
9,315
Compared to previous week
Last month
-83.5%
35,566
Compared to previous month
Last year
0%
661,932
Compared to previous year
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:
1npm install infocharts
1import { 2 DoughnutChart, 3 DumbbellChart, 4 ComparisonGraph, 5 HorizontalBar, 6 HorizontalList, 7 StackedAreaChart, 8 SplineAreaChart, 9 PieChart, 10 RiskRating, 11 HeatMap, 12 StackedRow, 13 StackedBarChart, 14 StackedVenn, 15 BenchmarkChart, 16 WaffleChart, 17 SparkBar, 18 SparkHorizontalBar, 19 SparkStackedBar, 20 SparkLine, 21 USMap, 22 InTen 23} from 'infocharts'; 24 25import 'infocharts/styles/infocharts.css'; 26 27
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.
1<DoughnutChart 2 title="Apples" 3 summary="56% of the total fruit production in the first quarter" 4 value={56} 5 size={300} 6 bgColor="blue" // Background color of the doughnut chart 7 fgColor="orange" // Foreground color (the filled portion of the chart) 8 background="white" // Background color of the container 9 textColor="black" // Text color for the title and summary 10 labelColor="black" // Color of the percentage label 11 percentageTextSize={3.5} // Size of the percentage text in rem 12 titleTextSize={1.8} // Size of the chart title text in rem 13 summaryTextSize={0.8} // Size of the summary text in rem 14/>
The DumbbellChart
component is great for comparing two data points across multiple categories, such as changes over time or comparisons between groups.
1<DumbbellChart 2 data={[ 3 { fruit: "Apples", series1: 50, series2: 80 }, 4 { fruit: "Bananas", series1: 40, series2: 70 }, 5 { fruit: "Oranges", series1: 30, series2: 60 }, 6 { fruit: "Grapes", series1: 10, series2: 20 }, 7 { fruit: "Pears", series1: 20, series2: 50 }, 8 { fruit: "Peaches", series1: 40, series2: 50 } 9 ]} 10 colors={["rgba(0, 123, 255, 0.7)", "rgba(255, 0, 123, 0.7)"]} 11 height={400} 12 width={500} 13 background="#fff" 14 foreground="#000" 15 labelColor="#000" 16/>
The ComparisonChart
allows you to compare different categories and their respective values.
1<ComparisonGraph 2 title="Comparison Graph Example" 3 summary="This graph compares different fruit production." 4 ariaDescription="A Comparison graph comparing the production of various fruits." 5 labelColor="#fff" 6 background="#f0f0f0" 7 foreground="#333" 8 data={[ 9 { value: 80, color: "#007bff" }, 10 { value: 60, color: "#ff007b" }, 11 { value: 90, color: "#00ff7b" }, 12 { value: 10, color: "#ffdd00" } 13 ]} 14/>
The HorizontalBarChart
is ideal for displaying data as horizontal bars, where each bar represents a category.
1<HorizontalBar 2 title="Fruit Production Comparison" 3 background="#0c263eff" 4 foreground="#ffffff" 5 labelColor="#ffffff" 6 summary="A horizontal bar chart comparing the production of various fruits in 2023." 7 year={2023} 8 valueType="%" 9 items={[ 10 { name: "Apples", value: 50, color: "#007bff" }, 11 { name: "Bananas", value: 30, color: "#28a745" }, 12 { name: "Oranges", value: 20, color: "#ffc107" }, 13 { name: "Grapes", value: 15, color: "#17a2b8" } 14 ]} 15 colorSeries={["#ff5733", "#c70039", "#900c3f", "#581845"]} 16/> 17
The HorizontalList
allows you to visualize a list of categories with values, each represented by a horizontal bar.
1<HorizontalList 2 title="Fruit Consumption Comparison" 3 background="#0c263eff" 4 foreground="#ffffff" 5 summary="A horizontal list comparing the consumption of various fruits in 2023." 6 labelColor="#ffffff" 7 valueType="%" 8 items={[ 9 { name: "Apples", value: 50, color: "#ff6347" }, 10 { name: "Bananas", value: 30, color: "#4682b4" }, 11 { name: "Oranges", value: 20, color: "#32cd32" }, 12 { name: "Grapes", value: 15, color: "#dda0dd" } 13 ]} 14 valueColor="#fff" 15/>
The StackedAreaChart
allows you to display multiple data series stacked on top of one another in an area chart format.
1<StackedAreaChart 2 data={[ 3 { month: "Jan", series1: 30, series2: 50, series3: 20 }, 4 { month: "Feb", series1: 40, series2: 60, series3: 30 }, 5 { month: "Mar", series1: 35, series2: 55, series3: 25 }, 6 { month: "Apr", series1: 50, series2: 70, series3: 40 }, 7 { month: "May", series1: 60, series2: 80, series3: 50 } 8 ]} 9 width={800} 10 height={400} 11 colors={["#ff6347", "#4682b4", "#32cd32"]} 12 background="#f5f5f5" 13 labelColor="#333" 14 axisColor="#000" 15 lineColor="#305b89" 16 // hideAxis={true} 17/>
The SplineAreaChart
provides smooth, curved lines connecting data points in an area chart.
1<SplineAreaChart 2 data={[30, 40, 35, 50, 45, 60, 55]} 3 labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]} 4 width={800} 5 height={400} 6 fillColor="rgba(70, 130, 180, 0.3)" 7 strokeColor="rgba(70, 130, 180, 1)" 8 background="#f9f9f9" 9 labelColor="#333" 10 lineColor="#ccc" 11/> 12
The PieChart
is a circular chart that divides data into slices to illustrate numerical proportions.
1<PieGraph 2 title="Fruit Production" 3 summary="A pie chart showing the distribution of fruit production in the first quarter." 4 source="Agriculture Department" 5 data={[ 6 { name: 'Apples', value: 50, color: '#ff6347' }, 7 { name: 'Bananas', value: 30, color: '#4682b4' }, 8 { name: 'Oranges', value: 20, color: '#32cd32' } 9 ]} 10 background="#fff" 11 foreground="#000" 12 showTable={true} 13 labelColor="black" 14 labelSize="0.15rem" 15 isFloat={false} 16 tableName="Fruit" 17 tableValue="Production" 18 patterns={['dots', 'lines', 'stars']} 19 isPattern={true} 20/>
The RiskMatrix
displays a matrix to visually represent risk levels across categories like impact and likelihood.
1<RiskRating 2 riskData={[ 3 ['low', 'low', 'low', 'medium', 'high'], // Impact 1 (low) 4 ['low', 'low', 'medium', 'high', 'high'], // Impact 2 5 ['low', 'medium', 'medium', 'high', 'high'], // Impact 3 6 ['medium', 'medium', 'high', 'high', 'high'], // Impact 4 7 ['medium', 'high', 'high', 'high', 'high'], // Impact 5 (high) 8 ]} 9 likelihoodLabels={['Rare', 'Unlikely', 'Possible', 'Likely', 'Almost Certain']} 10 impactLabels={['Insignificant', 'Minor', 'Moderate', 'Major', 'Catastrophic']} 11 background={'#fff'} // Pass background color 12 foreground={'#000'} // Pass text color for matrix cells 13 labelColor={['#fff','#000','#000']} // Array of colors for axis labels 14 colors={['red', 'orange', 'yellow']} // Colors for low, medium, and high risk levels 15/>
The HeatMap
allows you to visualise data through variations in coloring, with a focus on grid-based data.
1<HeatMap 2 data={[ 3 [30, 50, 70, 90], 4 [40, 60, 80, 100], 5 [20, 40, 60, 80] 6 ]} 7 months={['January', 'February', 'March', 'April']} 8 rowLabels={['Category 1', 'Category 2', 'Category 3']} 9 background="#fff" 10 labelColor="#000" 11 valueColor="#fff" 12/>
The StackedRow
chart represents each row as a stacked set of values, making it perfect for comparing parts of a whole.
1<StackedRow 2 data={[ 3 { description: 'Category 1', segments: [ 4 { value: 10, color: '#4682b4' }, 5 { value: 20, color: '#ff6347' }, 6 { value: 30, color: '#32cd32' }, 7 { value: 25, color: '#dda0dd' }, 8 { value: 15, color: '#ffa500' } 9 ] }, 10 { description: 'Category 2', segments: [ 11 { value: 20, color: '#4682b4' }, 12 { value: 15, color: '#ff6347' }, 13 { value: 25, color: '#32cd32' }, 14 { value: 20, color: '#dda0dd' }, 15 { value: 20, color: '#ffa500' } 16 ] }, 17 { description: 'Category 3', segments: [ 18 { value: 30, color: '#4682b4' }, 19 { value: 20, color: '#ff6347' }, 20 { value: 10, color: '#32cd32' }, 21 { value: 25, color: '#dda0dd' }, 22 { value: 15, color: '#ffa500' } 23 ] } 24 ]} 25 legend={[ 26 { label: 'Segment 1', color: '#4682b4' }, 27 { label: 'Segment 2', color: '#ff6347' }, 28 { label: 'Segment 3', color: '#32cd32' }, 29 { label: 'Segment 4', color: '#dda0dd' }, 30 { label: 'Segment 5', color: '#ffa500' } 31 ]} 32 background="#f9f9f9" 33 textColor="#000" 34 defaultColors={['#4682b4', '#ff6347', '#32cd32', '#dda0dd', '#ffa500']} 35 explanation="This chart shows the proportion of five different values for different categories." 36 barWidth="90%" 37/>
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.
1<StackedBarChart 2 data={[ 3 { month: 'January', series1: 30, series2: 20, series3: 50 }, 4 { month: 'February', series1: 40, series2: 30, series3: 30 }, 5 { month: 'March', series1: 20, series2: 50, series3: 30 }, 6 ]} 7 width={800} 8 height={400} 9 colors={["#ff6347", "#4682b4", "#32cd32"]} 10 background="#f5f5f5" 11 labelColor="#333" 12 axisColor="#000" 13/>
The BenchmarkChart
visualises actual performance versus target values with customisable bars and benchmarks.
1<BenchmarkChart 2 data={[ 3 { label: 'Category 1', actual: 70, benchmark: 80 }, 4 { label: 'Category 2', actual: 50, benchmark: 60 }, 5 { label: 'Category 3', actual: 90, benchmark: 85 }, 6 ]} 7 title="Performance vs Target" 8 background="#f9f9f9" 9 foreground="#000" 10 barColor="#4682b4" 11 targetColor="#ff6347" 12/>
The WaffleChart
component represents data as a grid of icons, where each icon corresponds to a specific percentage of the total value.
1<WaffleChart 2 title="Waffle Chart Example" 3 percentage={75} 4 background="#f9f9f9" 5 foreground="#000" 6 description="This waffle chart shows a 75% completion rate." 7 activeColor="#4caf50" 8 nonActiveColor="#ccc" 9/>
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.
1<SparkBar 2 title="Sales Over Time" 3 data={[ 4 { item: 'January', value: 500 }, 5 { item: 'February', value: 200 }, 6 { item: 'March', value: 150 }, 7 { item: 'April', value: 300 }, 8 { item: 'May', value: 400 }, 9 { item: 'June', value: 450 }, 10 { item: 'July', value: 500 }, 11 ]} 12 fillColor="blue" 13 backgroundColor="#f9f9f9" 14 foregroundColor="darkblue" 15/>
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.
1<SparkHorizontalBar 2 title="Sales Progress" 3 total={100} 4 value={75} 5 suffix="%" 6 barColor="green" 7 background="#f9f9f9" 8 foreground="darkgreen" 9/>
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.
1<SparkStackedBar 2 title="Fruit Sales" 3 total={100} 4 segments={[ 5 { label: 'Segment 1', value: 40, color: 'green' }, 6 { label: 'Segment 2', value: 30, color: 'blue' }, 7 { label: 'Segment 3', value: 20, color: 'orange' }, 8 { label: 'Segment 4', value: 10, color: 'red' } 9 ]} 10 background="#f0f0f0" 11 foreground="darkblue" 12 suffix="%" 13/>
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.
1<SparkLine 2 title="Revenue Growth" 3 data={[ 4 { item: 'January', value: 500 }, 5 { item: 'February', value: 200 }, 6 { item: 'March', value: 150 }, 7 { item: 'April', value: 300 }, 8 { item: 'May', value: 400 }, 9 { item: 'June', value: 450 }, 10 { item: 'July', value: 500 }, 11 ]} 12 strokeColor="blue" 13 strokeWidth={3} 14 backgroundColor="#f9f9f9" 15 foregroundColor="darkblue" 16/>
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.
1<StackedVenn 2 data={[ 3 { label: 'Largest Set', value: 50, color: '#fca' }, 4 { label: 'Medium Set', value: 30, color: '#deaa87' }, 5 { label: 'Smallest Set', value: 10, color: '#c87137' } 6 ]} 7 // width="300px" 8 minRadius={20} 9 maxRadius={80} 10 background="#f9f9f9" 11 foreground="darkblue" 12 textSize="0.5rem" 13 colors={['#ff9999', '#99cc99', '#9999ff']} 14/>
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.
1const colour_high = '#87CEEB'; 2const colour_medium = '#4682B4'; 3const colour_low = '#D32F2F'; 4 5const handleTooltip = (item) => { 6 console.log(item); 7}; 8 9<USMap 10 regionData={{ 11 AL: { fill: colour_medium, label: 'AL', stat: '47.32' }, 12 AK: { fill: colour_low, label: 'AK', stat: '12.57' }, 13 AZ: { fill: colour_medium, label: 'AZ', stat: '35.62' }, 14 AR: { fill: colour_low, label: 'AR', stat: '26.14' }, 15 CA: { fill: colour_high, label: 'CA', stat: '58.91' }, 16 CO: { fill: colour_medium, label: 'CO', stat: '41.23' }, 17 CT: { fill: colour_medium, label: 'CT', stat: '39.45' }, 18 DE: { fill: colour_low, label: 'DE', stat: '28.11' }, 19 FL: { fill: colour_high, label: 'FL', stat: '52.76' }, 20 GA: { fill: colour_medium, label: 'GA', stat: '44.67' }, 21 HI: { fill: colour_medium, label: 'HI', stat: '31.89' }, 22 ID: { fill: colour_low, label: 'ID', stat: '23.54' }, 23 IL: { fill: colour_high, label: 'IL', stat: '49.85' }, 24 IN: { fill: colour_medium, label: 'IN', stat: '37.12' }, 25 IA: { fill: colour_low, label: 'IA', stat: '29.74' }, 26 KS: { fill: colour_medium, label: 'KS', stat: '34.29' }, 27 KY: { fill: colour_medium, label: 'KY', stat: '40.58' }, 28 LA: { fill: colour_low, label: 'LA', stat: '22.34' }, 29 ME: { fill: colour_low, label: 'ME', stat: '18.93' }, 30 MD: { fill: colour_high, label: 'MD', stat: '46.78' }, 31 MA: { fill: colour_high, label: 'MA', stat: '50.24' }, 32 MI: { fill: colour_medium, label: 'MI', stat: '42.16' }, 33 MN: { fill: colour_medium, label: 'MN', stat: '39.84' }, 34 MS: { fill: colour_low, label: 'MS', stat: '25.67' }, 35 MO: { fill: colour_medium, label: 'MO', stat: '33.45' }, 36 MT: { fill: colour_low, label: 'MT', stat: '21.54' }, 37 NE: { fill: colour_medium, label: 'NE', stat: '30.75' }, 38 NV: { fill: colour_high, label: 'NV', stat: '47.29' }, 39 NH: { fill: colour_medium, label: 'NH', stat: '36.41' }, 40 NJ: { fill: colour_high, label: 'NJ', stat: '51.18' }, 41 NM: { fill: colour_low, label: 'NM', stat: '28.67' }, 42 NY: { fill: colour_high, label: 'NY', stat: '53.21' }, 43 NC: { fill: colour_medium, label: 'NC', stat: '43.89' }, 44 ND: { fill: colour_low, label: 'ND', stat: '17.65' }, 45 OH: { fill: colour_high, label: 'OH', stat: '45.92' }, 46 OK: { fill: colour_medium, label: 'OK', stat: '32.58' }, 47 OR: { fill: colour_medium, label: 'OR', stat: '38.67' }, 48 PA: { fill: colour_high, label: 'PA', stat: '49.24' }, 49 RI: { fill: colour_low, label: 'RI', stat: '29.83' }, 50 SC: { fill: colour_medium, label: 'SC', stat: '37.45' }, 51 SD: { fill: colour_low, label: 'SD', stat: '22.94' }, 52 TN: { fill: colour_medium, label: 'TN', stat: '40.17' }, 53 TX: { fill: colour_high, label: 'TX', stat: '53.89' }, 54 UT: { fill: colour_medium, label: 'UT', stat: '31.72' }, 55 VT: { fill: colour_low, label: 'VT', stat: '19.54' }, 56 VA: { fill: colour_medium, label: 'VA', stat: '44.36' }, 57 WA: { fill: colour_high, label: 'WA', stat: '50.98' }, 58 WV: { fill: colour_low, label: 'WV', stat: '23.76' }, 59 WI: { fill: colour_medium, label: 'WI', stat: '38.45' }, 60 WY: { fill: colour_low, label: 'WY', stat: '16.78' } 61 }} 62 title="Population by state" 63 summary="Marked by low, medium and high levels" 64 showLegend={true} 65 legend={{ 66 low: colour_low, 67 medium: colour_medium, 68 high: colour_high, 69 }} 70 // width="500px" 71 // height="400px" 72 background="darkblue" 73 titleSize="2rem" 74 summarySize="1.2rem" 75 legendSize="1rem" 76 iconSize="2rem" 77 strokeColor="#fff" 78 textColor="#fff" 79 strokeWidth="1.8" 80 nameColor="#fff" 81 fnc={handleTooltip} 82/>
The InTen
component renders a responsive SVG visualisation where the width of a colored bar is controlled by the value
prop, representing a percentage.
1<InTen 2 width="300px" 3 foreground="lightblue" 4 background="darkblue" 5 value={15} 6 type={2} // option 1 or 2 7/> 8 9<InTen 10 value={45} // percentage 11/>
The ArcadeBar
is a novelty component that looks strangely similar to a maze based arcade classic. It's a fun graph.
1<ArcadeBar 2 data={{ 3 title: 'Player High Scores', 4 // titleSize: 23, 5 // valueSize: 16, 6 // legendTextSize: 12, 7 // textColor: 'yellow', 8 // mazeColor: '#444', 9 // background: '#333', 10 // foreground: '#ff6f61', 11 // hideLegend: true, 12 series: { 13 values: [3143, 1984, 1512, 733], 14 // colors: ['#6b5b95', '#88b04b', '#92a8d1', '#f7cac9'], 15 legend: ['Jenny W', 'Rupert B', 'Gemma D', 'Edgar T'] 16 } 17 }} 18/>
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.
1<HistoryChart 2 title="History Timeline" 3 // titleSize={6} 4 // labelSize={1.9} 5 // defaultColor="darkBlue" 6 // labelColor="yellow" 7 // background="#000" 8 // foreground="#fff" 9 // timelineColor='red' 10 // spacing={40} 11 // lineHeight={1.6} 12 data={[ 13 { title: '2003', description: 'The year we launched our first product', color: '#cc5200' }, 14 { title: '2004', description: 'Expansion into new markets', color: '#0000cc' }, 15 { title: '2005', description: 'Acquired by a larger company', color: '#cc0026' }, 16 { title: '2006', description: 'Launched second product line', color: '#00cccc' }, 17 { title: '2007', description: 'Entered international markets', color: '#cc9900' }, 18 { title: '2008', description: 'Established major partnerships', color: '#660066' }, 19 { title: '2009', description: 'Achieved record-breaking sales', color: '#cc5200' }, 20 ]} 21/>
This project is licensed under the MIT License.
No vulnerabilities found.
No security vulnerabilities found.