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:

1npm install infocharts

How to import

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

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:

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/>

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:

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/>

3. Comparison Chart

The ComparisonChart allows you to compare different categories and their respective values.

Demo

Example Usage:

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/>

4. Horizontal Bar Chart

The HorizontalBarChart is ideal for displaying data as horizontal bars, where each bar represents a category.

Demo

Example Usage:

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

5. Horizontal List

The HorizontalList allows you to visualize a list of categories with values, each represented by a horizontal bar.

Demo

Example Usage:

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/>

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:

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/>

7. Spline Area Chart

The SplineAreaChart provides smooth, curved lines connecting data points in an area chart.

Demo

Example Usage:

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

8. Pie Chart

The PieChart is a circular chart that divides data into slices to illustrate numerical proportions.

Demo

Example Usage:

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/>

9. Risk Matrix

The RiskMatrix displays a matrix to visually represent risk levels across categories like impact and likelihood.

Demo

Example Usage:

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/>

10. Heat Map

The HeatMap allows you to visualise data through variations in coloring, with a focus on grid-based data.

Demo

Example Usage:

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/>

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:

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/>

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:

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/>

13. Benchmark Chart

The BenchmarkChart visualises actual performance versus target values with customisable bars and benchmarks.

Demo

Example Usage:

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/>

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:

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/>

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:

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/>

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:

1<SparkHorizontalBar
2    title="Sales Progress"
3    total={100}
4    value={75}
5    suffix="%"
6    barColor="green"
7    background="#f9f9f9"
8    foreground="darkgreen"
9/>

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:

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/>

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:

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/>

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

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/>

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

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/>

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:

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/>

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:

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/>

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:

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/>

License

This project is licensed under the MIT License.