npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

infocharts

v1.1.63

Published

<img src="https://raw.githubusercontent.com/garethslinn/public_infocharts/refs/heads/main/logo.svg" />

Downloads

279,543

Maintainers

gslinngslinn

Keywords

chartschartdoughnut chartbar chartline chartpie chartstacked chartarea chartspline chartreact chartsdata visualizationdata vizinteractive chartsresponsive chartsinfographicsvisual storytellingcharting librarydata presentationdata displayreact componentstypescripttypescript librarytypescript componentstypescript chartsfront-endfrontend developmentui componentssvg chartscssscsssassjavascripthtml5 chartssvg renderingdata analyticsdynamic datadata sciencedata reportingHigh Chartsd3d3.jsgslinnchart librarychart templateschart customizationanimationdynamic chartsnpm packagemodern web developmentopen sourcedeveloper toolsui toolkitchart toolkitdashboard componentsdata dashboardsdata-drivenscalable vector graphicsinteractive visualizationsbusiness intelligencedata insightsdata trendschart frameworkweb developmentreact hooksthemingtheme supportresponsive designmobile chartsdesktop chartstablet chartscross-platformweb analyticsdata insightsreactjschart typesmulti-series chartssingle-series chartstrendlinehistorical dataforecasting chartsreal-time datalive data chartsperformance visualizationstatistical graphsdata modelingcomparison chartsreact graph librarygraph librarychart componentsmodular componentswidget librarythemeable chartschart themeslight modedark modechart layoutsdashboard layoutsdata structure visualizationweb graphicsdeveloper experiencedesign toolsdata designbusiness chartscorporate chartsfinancial chartsmarket analysisstock chartsreact native chartsperformance chartsaccessibilitya11yaccessible chartscolor blindness supportchart legendslegend supportlabelsdata labelstooltipshover effectsclick eventsevent handlingcustom eventscustom tooltipscustom labelssvg pathssvg manipulationcanvas renderinganimation effectschart transitionscustomizable tooltipschart interactionsvisual analyticsdrag and drop chartschart builderchart editordata editorreal-time updatesdata streamdata feedschart APIAPI integrationREST APIGraphQL chartsJSON chartsAPI supportdata fetchingaxios chartsdata fetching librarydata processinglightweight chartsperformance optimizationoptimized renderingcanvas chartsDOM manipulationchart optimizationresponsive SVGCSS animationsreact transitionsanimation libraryreact libraryfrontend componentscomponent-based architecturecomponent librarymodular designcode splittinglazy loadingtypescript supportcss gridflexbox layoutstyled-componentsemotionchart aestheticscolor palettescustom themescolor customizationstyle customizationvisual designdesign systemvisual componentschart legendsdynamic themingprops managementcomponent propstypescript typestypescript definitionscomponent flexibilitychart propscustom propswidth settingsheight settingssvg scalingchart scalinggraph scalingfont settingstext elementsgrid linesaxis settingsaxis labelstick customizationgrid customizationaxis customizationdata bindingdata binding librarydataviz librarydata renderingperformance trackingrender optimizationchart performanceresource-efficientresponsive utilitieswidth managementbreakpointsmedia queriescustom stylescss modulesscss modulessvg utilitieshtml chartsUI patternsdata integrationnode modulesnode packagenpm releasepackage managementversion controlsemantic versioningcontinuous integrationcontinuous deploymentCI/CDchart demoscode examplesusage examplesproject documentationdeveloper documentationstyled systemstyled-systememotion componentswebpack configurationbabeljsx supporttsx supportcomponent patternsstyled-components themetypescript integrationreact developersjavascript developersfrontend toolsdev toolsgraph visualizationsdata graphcustom chartschart builder toolchart configurationdrag and drop interfacetheme switcherdark mode togglesvg supportcanvas supportcustom colorstheme librarytheme enginetheme customizerchart exampleschart playgrounddeveloper-friendlylightweight libraryhigh performancemapus mapusa mapinteractive mapone in tenpercentage menpercentage womentimelinehistoryhistorical

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.