⚛️ Simple, immersive & interactive charts for React

Overview

React Charts Header

Simple, immersive and interactive charts for React

#TanStack Join the community on Spectrum

Enjoy this library? Try the entire TanStack! React Table, React Query, React Form

Visit react-charts.tanstack.com for docs, guides, API and more!

Quick Features

  • Line Charts
  • Bar Charts
  • Column Charts
  • Bubble Charts
  • Area Charts
  • Axis Stacking
  • Inverted Axes
  • Hyper Responsive
  • Invisibly Powered by D3
  • Declarative
  • Mutliple Axes

Become a Sponsor!

Contributors

Thanks goes to these wonderful people (emoji key):


Tanner Linsley

💻 🤔 💡 🚧 👀

This project follows the all-contributors specification. Contributions of any kind welcome!

Comments
  • Can't resolve 'performance-now'

    Can't resolve 'performance-now'

    Hi there,

    I ran into the following error:

    Module not found: Can't resolve 'performance-now' in 'my-folder/node_modules/react-charts/dist'
    

    I am using the exact code example from the npm page under "Quick Start".

    To also note, I am using NextJS, although I don't think that matters

    This is on react-charts 2.0.0-beta.7

    opened by alex-r89 11
  • Odd behavior when the chart is initially rendered at certain widths

    Odd behavior when the chart is initially rendered at certain widths

    Here is another one for ya Tanner :P

    When the chart is initially rendered at certain widths, it doesn't seem to be filling the parent container properly. It initially has a bunch of extra space on the bottom and the xaxis overflows the right side of the container. render1

    However when moving the dev tools panel over 1px the chart resizes and snaps to the position I would expect on initial render. render2

    import React from 'react';
    import { Chart } from 'react-charts';
    
    export default function CustomChart() {
      const primaryAxis = React.useMemo(
        () => ({
          isPrimary: true,
          scaleType: 'time',
          position: 'bottom',
          getValue: (datum) => datum.primary,
        }),
        []
      );
    
      const secondaryAxes = React.useMemo(
        () => [
          {
            scaleType: 'linear',
            position: 'left',
            getValue: (datum) => datum.secondary,
            elementType: 'line',
          },
        ],
        []
      );
    
      return (
        <div style={{ height: 300, border: '1px solid black' }}>
          <Chart
            options={{
              data,
              primaryAxis,
              secondaryAxes,
            }}
          />
        </div>
      );
    }
    
    const data = [
      {
        label: 'Series 1',
        data: [
          {
            primary: new Date('2021-07-18T00:00:00.000Z'),
            secondary: 100,
          },
          {
            primary: new Date('2021-07-19T00:00:00.000Z'),
            secondary: 36,
          },
          {
            primary: new Date('2021-07-20T00:00:00.000Z'),
            secondary: 20,
          },
          {
            primary: new Date('2021-07-21T00:00:00.000Z'),
            secondary: 30,
          },
          {
            primary: new Date('2021-07-22T00:00:00.000Z'),
            secondary: 92,
          },
          {
            primary: new Date('2021-07-23T00:00:00.000Z'),
            secondary: 85,
          },
          {
            primary: new Date('2021-07-24T00:00:00.000Z'),
            secondary: 45,
          },
          {
            primary: new Date('2021-07-25T00:00:00.000Z'),
            secondary: 60,
          },
          {
            primary: new Date('2021-07-26T00:00:00.000Z'),
            secondary: 16,
          },
          {
            primary: new Date('2021-07-27T00:00:00.000Z'),
            secondary: 16,
          },
          {
            primary: new Date('2021-07-28T00:00:00.000Z'),
            secondary: 16,
          },
        ],
      },
      {
        label: 'Series 2',
        data: [
          {
            primary: new Date('2021-07-18T00:00:00.000Z'),
            secondary: 10,
          },
          {
            primary: new Date('2021-07-19T00:00:00.000Z'),
            secondary: 85,
          },
          {
            primary: new Date('2021-07-20T00:00:00.000Z'),
            secondary: 90,
          },
          {
            primary: new Date('2021-07-21T00:00:00.000Z'),
            secondary: 15,
          },
          {
            primary: new Date('2021-07-22T00:00:00.000Z'),
            secondary: 60,
          },
          {
            primary: new Date('2021-07-23T00:00:00.000Z'),
            secondary: 18,
          },
          {
            primary: new Date('2021-07-24T00:00:00.000Z'),
            secondary: 63,
          },
          {
            primary: new Date('2021-07-25T00:00:00.000Z'),
            secondary: 87,
          },
          {
            primary: new Date('2021-07-26T00:00:00.000Z'),
            secondary: 23,
          },
          {
            primary: new Date('2021-07-27T00:00:00.000Z'),
            secondary: 83,
          },
          {
            primary: new Date('2021-07-28T00:00:00.000Z'),
            secondary: 83,
          },
        ],
      },
    ];
    
    opened by MA-MacDonald 9
  • Tooltip for 'time' primary axis not showing time correctly

    Tooltip for 'time' primary axis not showing time correctly

    A random number less than 1 is appearing where a date should appear.

    Screen Shot 2020-04-13 at 3 01 49 pm (2)
    function StatsChart(props: JosekiStatsModalProperties) {
        const stats_data = React.useMemo(() => (
            [
                {
                    label: 'Total Page Visits',
                    data: props.daily_page_visits.map(day => ({x: new Date(day.date), y: day.pageVisits}))
                },
                {
                    label: 'Explore Page Visits',
                    data: props.daily_page_visits.map(day => [new Date(day.date), day.explorePageVisits])
                },
                {
                    label: 'Play Mode Visits',
                    data: props.daily_page_visits.map(day => [new Date(day.date), day.playPageVisits])
                },
                {
                    label: 'Guest Visits',
                    data: props.daily_page_visits.map(day => [new Date(day.date), day.guestPageVisits])
                }
            ]), [props]);
    
        const axes =
            [
                { primary: true, type: 'time', position: 'bottom' },
                { type: 'linear', position: 'left' }
            ];
    
        const series = {
              showPoints: false
            };
    
        return (
            <Chart
                data={stats_data} axes={axes} series={series} tooltip
            />
        );
    }
    
    export class JosekiStatsModal extends Modal<Events, JosekiStatsModalProperties, any> {
    
        render() {
            //console.log(this.props.daily_page_visits);
            return (
                <div className="Modal JosekiStatsModal" ref="modal">
                    <div className="header">{_("Joseki Explorer Stats - Daily Position Loads")}</div>
                    <div className="daily-visit-results">
                        <StatsChart daily_page_visits={this.props.daily_page_visits}/>
                    </div>
                </div>
            );
        }
    }
    
    
    opened by GreenAsJade 9
  • Bump elliptic from 6.5.2 to 6.5.3 in /examples/animated

    Bump elliptic from 6.5.2 to 6.5.3 in /examples/animated

    Bumps elliptic from 6.5.2 to 6.5.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 8
  • useCallback received a final argument...

    useCallback received a final argument...

    I get this error when include a Chart component into my project.

    useCallback received a final argument that is not an array (instead, received `function`). When specified, the final argument must be an array.
    
    function MyChart(){
      const data = React.useMemo(
        () => [
          {
            label: "Series 1",
            data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
          },
          {
            label: "Series 2",
            data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
          }
        ],
        []
      );
    
      const series = React.useMemo(
        () => ({
          showPoints: false
        }),
        []
      );
    
      const axes = React.useMemo(
        () => [
          { primary: true, type: "linear", position: "bottom" },
          { type: "linear", position: "left" }
        ],
        []
      );
    return (
          <div
            style={{
              width: "400px",
              height: "300px"
            }}
          >
            <Chart data={data} series={series} axes={axes} tooltip />
          </div>
    )
    }
    
    bug 
    opened by sibuser 8
  • Maximum update depth exceeded at AxisLinear

    Maximum update depth exceeded at AxisLinear

    Getting the following errors occasionally:

    react-dom.development.js:25671 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
        at checkForNestedUpdates (react-dom.development.js:25671)
        at scheduleUpdateOnFiber (react-dom.development.js:23674)
        at dispatchAction (react-dom.development.js:17076)
        at AxisLinear.js:253
        at AxisLinear.js:292
        at commitHookEffectList (react-dom.development.js:22030)
        at commitLifeCycles (react-dom.development.js:22080)
        at commitLayoutEffects (react-dom.development.js:25344)
        at HTMLUnknownElement.callCallback (react-dom.development.js:336)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
        at invokeGuardedCallback (react-dom.development.js:440)
        at commitRootImpl (react-dom.development.js:25082)
        at unstable_runWithPriority (scheduler.development.js:697)
        at runWithPriority$2 (react-dom.development.js:12149)
        at commitRoot (react-dom.development.js:24922)
        at finishSyncRender (react-dom.development.js:24329)
        at performSyncWorkOnRoot (react-dom.development.js:24307)
        at react-dom.development.js:12199
        at unstable_runWithPriority (scheduler.development.js:697)
        at runWithPriority$2 (react-dom.development.js:12149)
        at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
        at flushSyncCallbackQueue (react-dom.development.js:12182)
        at scheduleUpdateOnFiber (react-dom.development.js:23709)
        at Object.enqueueSetState (react-dom.development.js:13994)
        at Router.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:325)
        at Router.js:33
        at listener (history.js:155)
        at history.js:173
        at Array.forEach (<anonymous>)
        at Object.notifyListeners (history.js:172)
        at setState (history.js:561)
        at history.js:598
        at Object.confirmTransitionTo (history.js:145)
        at handlePop (history.js:596)
        at handleHashChange (history.js:586)
    
    The above error occurred in the <AxisLinear> component:
        in AxisLinear (created by Axis)
        in Axis (created by ForwardRef(ChartInner))
        in g (created by ForwardRef(ChartInner))
        in g (created by ForwardRef(ChartInner))
        in svg (created by ForwardRef(ChartInner))
        in div (created by ForwardRef(ChartInner))
        in ForwardRef(ChartInner) (created by Chart)
        in Chart (at ActivityGraphWidget.js:50)
        in div (created by CardBody)
        in CardBody (created by Styled(CardBody))
        in Styled(CardBody) (at Widget.js:50)
        in div (created by Card)
        in Card (created by Styled(Card))
        in Styled(Card) (at Widget.js:38)
        in Widget (at ActivityGraphWidget.js:46)
        in ActivityGraphWidget (at view.js:58)
    

    Stack trace points to this call: https://github.com/tannerlinsley/react-charts/blob/master/src/components/AxisLinear.js#L76

    I'm using version react-charts 2.0.0-beta.6 under react 16.12.0

    My code:

    import React, {useCallback, useMemo} from "react"
    import {Chart} from 'react-charts'
    // ...
    
    const ActivityWidget = ({activityData}) => {
      const series = useMemo(
        () => ({
          showPoints: false
        }),
        []
      )
    
      const tooltip = useMemo(
        () => ({
          render: ({datum}) =>
            datum
              ?
              <div>
                <div>Point:</div>
                {datum.group.map((series, index) =>
                  <div key={index}> {`${series.seriesLabel}: ${series.originalDatum.count}`}</div>)}
              </div>
              : null
        }),
        []
      )
    
      const axes = useMemo(
        () => [
          {primary: true, type: 'utc', position: 'bottom', showGrid: false},
          {type: 'linear', position: 'left', showGrid: false}
        ],
        []
      )
    
      const getPrimaryAxisValue = useCallback(
        datum => new Date(datum.date),
        []
      )
    
      return (
            <Chart
              series={series}
              data={activityData}
              axes={axes}
              getSecondary={getSecondaryAxisValue}
              getPrimary={getPrimaryAxisValue}
              tooltip={tooltip}/>
      )
    }
    
    opened by liiri 7
  • How to change line color

    How to change line color

    First of all thank you for the react chart. Help me a lot in my project. This is not really an issue i just want to know how to change the line color.

    Thanks

    opened by dgana 7
  • Cannot read property '0' of null

    Cannot read property '0' of null

    I am trying to render a simple line chart with multiple series. My data is formatted like this according to the example:

    [
       {
          "label":"Respiratory Rate",
          "data":[
             {
                "x":108,
                "y":108
             }
          ]
       },
       {
          "label":"Blood Pressure",
          "data":[
             {
                "x":88,
                "y":88
             },
             {
                "x":116,
                "y":116
             }
          ]
       },
       {
          "label":"Heart Rate",
          "data":[
             {
                "x":72,
                "y":72
             }
          ]
       }
    ]
    

    Whenever the data renders in the chart it throws the following error:

    Cell.js:75 Uncaught TypeError: Cannot read property '0' of null
        at clipCells (Cell.js:75)
        at new Diagram (Diagram.js:57)
        at voronoi (voronoi.js:11)
        at Voronoi.js:136
    

    Here is my component and how I am using the it:

    function Dashboard(props) {
     const data = useMemo(
            () => [
               // Same data format listed above (and yes the data is set and not null/undefined)
                ...props.metrics
            ],
            [props.metrics]
        );
    
         const axes = useMemo(
            () => [
                { primary: true, type: 'linear', position: 'bottom' },
                { type: 'linear', position: 'left' }
            ],
            []
        );
    
        return (
                     <Chart
                            data={data}
                            axes={axes}
                            tooltip
                        />
        )
    }
    

    Oddly enough changing out the data with the example data seems to solve the issue. I just dont understand why its happening with my data because they are both formatted exactly the same.

    question 
    opened by cbartram 6
  • How to change the width of the bar in bar chart?

    How to change the width of the bar in bar chart?

    Hello @tannerlinsley

    Thanks for the amazing library.

    I am implementing the bar chart and I am stuck with the following thing:

    Sometimes, the width of the bar is too much, it looks like the graph is broken as it overlaps with the axes. What approach should I follow to keep the bar width in control according to data?

    Here is the data sample and how the graph looks like. I have added the code sandbox also.

    I am using useMemo as mentioned in the docs, the below one is just sample data.

    const dataOne = [
        {
          label: Translate.string('Events'),
          data: [[2018, 3], [2019, 2], [2020, 1]],
        },
      ];
    
    

    Screenshot from 2020-03-09 16-11-37

    Edit react charts bar chart

    Let me know if I have to provide any other information.

    bug 
    opened by ParthS007 6
  • Error when trying to display a line chart

    Error when trying to display a line chart

    I get the same error consistently when trying to draw a line chart:

    react-dom.production.min.js:28 Error: <path> attribute d: Expected number, "M0,NaNZM0,NaNL0,NaN…".
    G @ react-dom.production.min.js:28
    react-dom.production.min.js:28 Error: <path> attribute d: Expected number, "…428617724867724,NaNZM-19.4286177…".
    G @ react-dom.production.min.js:28
    react-dom.production.min.js:28 Error: <path> attribute d: Expected number, "…8.2936433883142,NaNZM618.2936433…".
    G @ react-dom.production.min.js:28
    react-dom.production.min.js:28 Error: <path> attribute d: Expected number, "….64922263730773,NaNZM413.6492226…".
    G @ react-dom.production.min.js:28
    

    The series has 136 points, with values primary values being dates, and secondary values number ranging from 0 to 100,000,000. I've verified all the items are indeed valid dates and numbers.

    The result is see is a bunch of dots at the top of the chart, and a stream of errors like the ones mentioned above.

    I can share the data if needed. I managed to reproduce it with a single chart just showing this set.

    Is there a limit to number of points/range of dates/range of values that I missed in the documentation?

    Thanks for your time!

    opened by TravelingTechGuy 5
  • setup size-plugin-bot

    setup size-plugin-bot

    Items:

    • [x] Add rollup plugin rollup-plugin-size
    • [x] Add configuration file(.github/size-plugin.yml) for size-plugin 🤖
    • [x] Install Github App 👈@tannerlinsley
    opened by kuldeepkeshwar 5
  • Support tickCount for X axis

    Support tickCount for X axis

    tickCount can be set on a Y axis to reduce the amount of ticks that are shown.

    I would like to be able to do the same for the X axis.

        const primaryAxis = React.useMemo(
            () => ({
                // ...
                tickCount: 5
                // ...
            }), []
        );
    

    Currently, since I am showing every day for the next year, the X axis labels become unreadable. I am doing this to get a chart that is as detailed as possible.

    chrome_pJd9pGa2uK

    opened by Zandor300 0
  • Disable interaction with an UserSerie

    Disable interaction with an UserSerie

    I am rendering a chart with 2 series;

    • Actual data I want to show. Data can dip below 0.
    • A series that draws a line along 0.

    This line at 0 is there to exagerate that the data drops below 0.

    What I want is to disable interaction with the line that is drawn at 0 so that when the user's cursor is closer to the 0 series than the data series, it will still focus the data series.

    image

    opened by Zandor300 0
  • Fix dependency vulnerability d3-color < 3.1.0

    Fix dependency vulnerability d3-color < 3.1.0

    Wanted to share a recently discovered vulnerability, showing as High in npm audit.

    d3-color vulnerable to ReDoS Patched in >=3.1.0 Path: react-charts > d3-scale > d3-interpolate > d3-color

    image

    opened by j3r3myp1pp3n 1
  • Can't get React charts running on Next.js

    Can't get React charts running on Next.js

    I am on the latest Next.js version and I can't seem to get React charts working. Here's my package.json file for versions: { "name": "next13-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@types/node": "18.11.9", "@types/react": "18.0.25", "@types/react-dom": "18.0.8", "eslint": "8.27.0", "eslint-config-next": "^13.0.3", "next": "^13.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "4.8.4" }, "devDependencies": { "autoprefixer": "^10.4.13", "postcss": "^8.4.19", "tailwindcss": "^3.2.4" } }

    The file where I am trying to display the charts: `import React from 'react' import dynamic from 'next/dynamic';

    const Chart = dynamic(() => import("react-charts").then((mod) => mod.Chart), { ssr: false, }); const AxisOptions = dynamic(() => import("react-charts").then((mod) => mod.AxisOptions), { ssr: false, }); type MyDatum = { date: Date, stars: number }

    export default function MyChart() { const data = [ { label: 'React Charts', data: [ { date: new Date(), stars: 23467238, }, ], }, ]

    const primaryAxis = React.useMemo( (): AxisOptions => ({ getValue: datum => datum.date, }), [] )

    const secondaryAxes = React.useMemo( (): AxisOptions[] => [ { getValue: datum => datum.stars, }, ], [] )

    return ( <Chart options={{ data, primaryAxis, secondaryAxes, }} /> ) }`

    The error I am getting: ` error - ./node_modules/react-charts/lib/utils/buildAxis.linear.js:18:20 Module not found: ESM packages (d3-time-format) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

    Import trace for requested module: ./node_modules/react-charts/lib/components/Chart.js ./node_modules/react-charts/lib/index.js ./app/dashboard/charts.tsx ./app/page.tsx ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2FUsers%2Fanuragkanoria%2FDocuments%2Fwebprojects%2Fnext13-demo%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fanuragkanoria%2FDocuments%2Fwebprojects%2Fnext13-demo&isDev=true&tsconfigPath=tsconfig.json!

    https://nextjs.org/docs/messages/module-not-found `

    If I add esmExternals: 'loose' in next.config.js I get this error: Error: React.createContext is not a function

    opened by anuragk15 1
  • Is this library maintained anymore?

    Is this library maintained anymore?

    There are many unresolved issues in this library, some of which are critical problems that have existed for almost a year.

    There appear to be no fixes for major problems like #261 or #301.

    Is there a new expected release date for fixes? Or should we migrate to a different library?

    opened by rfdrake27 3
Releases(v3.0.0-beta.50)
Owner
Tanner Linsley
Husband, Co-Founder, Open source fanatic, React Junkie, Javascripter
Tanner Linsley
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

React Google Charts A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.3k Nov 30, 2022
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.3k Dec 2, 2022
Highly customizable library for building interactive node-based UIs, editors, flow charts and diagrams

React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls.

webkid 13k Dec 4, 2022
A Simple Charts Built With React

React-charts Please change the Label manually for now from: while (counter <= js

Ghassen Eljday 2 Dec 28, 2021
A declarative, efficient, and simple JavaScript library for building responsive charts

A declarative, efficient, and simple JavaScript library for building responsive charts

ZingChart 253 Nov 12, 2022
React minimal pie chart🍰 Lightweight but versatile SVG pie/donut charts for React. < 2kB gzipped.

React minimal pie chart Lightweight React SVG pie charts, with versatile options and CSS animation included. < 2kB gzipped. ?? Demo ?? . Why? Because

Andrea Carraro 338 Dec 2, 2022
A collection of composable React components for building interactive data visualizations

an ecosystem of composable React components for building interactive data visualizations. Victory Contents Getting Started Victory Native API Document

Formidable 10.1k Dec 3, 2022
📊 📈 📉 React.js plugin for building charts using CSS

Chartify React.js plugin for building charts using CSS. Demo The source for this module is in the main repo. Example app is here. Backend service for

Kirill Stepkin 683 Nov 18, 2022
📊 📈 📉 React.js plugin for building charts using CSS

Chartify React.js plugin for building charts using CSS. Demo The source for this module is in the main repo. Example app is here. Backend service for

Kirill Stepkin 683 Nov 18, 2022
React components for building composable and flexible charts

rumble-charts React components for building composable and flexible charts to visualize your data. It's based on D3.js under the hood, but most of the

null 336 Dec 6, 2022
Modular React charts made with d3.js

Update Important update: The actively maintained fork of this project is now at the Github of react-d3 co-creator yang-wei, who has recently taken the

Eric S. Bullington 1.8k Oct 27, 2022
Customizable React-based editor panel for Plotly charts

Customizable React-based editor panel for Plotly charts

Plotly 441 Nov 30, 2022
react d3 charts

CRA-MHL A Professional Starter Create React App (CRA) with Must-Have Libraries (MHL) Template A very opinionated starter Create React App (CRA) templa

Oscar Cardoso Garcia 6 Oct 19, 2022
Reactochart is a library of React components for creating data visualization charts and graphs.

Reactochart is a library of React components for creating data visualization charts and graphs. Components include line chart, bar chart, area chart, heat maps, scatterplot, histogram, pie chart, sankey diagram, and tree map.

Spotify 518 Nov 11, 2022
A React library for creating animated charts visualizations based on dynamic data.

react-dynamic-charts (demo) A React library for creating animated charts visualizations based on dynamic data. Install npm install --save react-dynami

Daniel Sternlicht 214 Nov 18, 2022
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Nov 20, 2022
Plug and play React charts

Orama [DEPRECATED] This package has been deprecated as it is no longer used by Kensho internally and we do not plan to continue maintaining it. We hop

Kensho 124 Nov 12, 2022
A collection of easy to use charts created in D3 for your React applications.

react-charts-d3 A collection of easy to use charts created in D3 for your React applications. Area Chart Bar Chart Bubble Chart Line Chart Pie Chart S

Nick Turner 4 Jan 19, 2021
React-based drag'n'drop pivot table with Plotly.js charts

react-pivottable react-pivottable is a React-based pivot table library with drag'n'drop functionality. It is a React port of the jQuery-based PivotTab

Plotly 876 Nov 30, 2022