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

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.

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

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,
      },
    ],
  },
];

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

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>
        );
    }
}

Bumps elliptic from 6.5.2 to 6.5.3.

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.

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>
)
}

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

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

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.

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]],
    },
  ];

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

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!

Items:

• [x] Add rollup plugin rollup-plugin-size
• [x] Add configuration file(.github/size-plugin.yml) for size-plugin 🤖
• [x] Install Github App 👈@tannerlinsley

This might not be the best way to go, but it WFM, @tannerlinsley :smiley_cat:

I'm not a React person, but as I best understand what is going on, React 18 changed the render API. That new API is picky over portal element destruction and related setState() calls, c.f. added/moved useRef()s.

Additionally, the location move of Object.assign() is to handle the element being added in the project implementation.

Relevant to #256 #301 #316

Happy to make additional changes, or if you have better ideas please feel free to poach whatever is useful for a better PR.

const data = [
    {
      label: "Data 1",
      data: [
        {
          date: "01",
          kilometers: 10,
        },
        {
          date: "03",
          kilometers: 9,
        },
      ],
    },
    {
      label: "Data 2",
      data: [
        {
          date: "01",
          kilometers: 70,
        },
        {
          date: "02",
          kilometers: 50,
        },
        {
          date: "04",
          kilometers: 100,
        },
      ],
    },
  ]
  
  const primaryAxis = React.useMemo(
    () => ({
      getValue: (datum) => datum.date,
    }),
    []
  )

  const secondaryAxes = React.useMemo(
    () => [
      {
        getValue: (datum) => datum.kilometers,
        elementType: "bar",
        stacked: true,
      },
    ],
    []
  )
  
<Chart
  options={{
    data,
    primaryAxis,
    secondaryAxes,
/>

Here an example: https://codesandbox.io/s/goofy-haslett-00zw0n?file=/src/useDemoConfig.tsx When the secondary axis only have one value to represent, 5 in my example, no bars are shown.

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.

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.

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