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.