I'm trying to run a basic line graph in my app (copied from the readme), and I'm getting this error ~136 times:

Warning: Encountered two children with the same key, `Wed Dec 31 1969 19:00:00 GMT-0500 (EST)`.

Usage

<Chart
  data={[
    [[1, 1], [2, 2], [3, 3]],
    [[2, 1], [3, 2], [4, 3]],
    [[3, 1], [4, 2], [5, 3]],
  ]}
>
  <Axis primary type="time" />
  <Axis type="linear" />
  <Series type={Line} />
</Chart>

Hey!

Sorry to mention this in your issue tracker. I am following this library and there is already some great work in here! I was looking into some charts but with timeline selection functionality. Is this possible based on this library or would it be very hard to create this? It is some kind of range selection mechanism.

Surprised there's no Pie charts available in this lib!

This chart.js code is not working here

ticks: {
                beginAtZero: true,
                min: 0,
                max: 100,
              }

Currently you need to convert a date object to a string in order to use it with an axis, we should probably just check for this and support a simple format out of the box, maybe also except a formatting function.

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
    in Tooltip
    in div
    in ForwardRef(ChartInner)
    in Context.Provider
    in Chart (at bubbles.tsx:36)
    in div (at bubbles.tsx:7)
    in Box (at bubbles.tsx:35)
    in main (at Layout.tsx:13)
    in Layout (at bubbles.tsx:34)
    in BubblesPage
    in App
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer

Repro is to SSR the diagram; I'm using NextJS and just placed the demo inside a page:

import { Chart } from 'react-charts'
import useChartConfig from '../lib/useChartConfig'
import Layout from '../components/Layout'

const Box = ({ children }: { children: React.ReactNode }) => {
  return (
    <div style={{
      height: '400px',
      padding: '10%'
    }}>
      {children}
    </div>
  )
}

const series = {
  type: 'bubble',
  showPoints: false
}

const axes = [
  { primary: true, type: 'linear', position: 'bottom' },
  { type: 'linear', position: 'left' }
]

const BubblesPage = () => {
  const { data: rndData } = useChartConfig({
    dataType: 'linear',
    series: 10,
    useR: true
  })

  return (
    <Layout title='Bubbles'>
      <Box>
        <Chart
          data={rndData}
          series={series}
          axes={axes}
          grouping='single'
          tooltip />
      </Box>
      <style global jsx>{`
        body { overflow-x: hidden; }
      `}</style>
    </Layout>
  )
}

export default BubblesPage

https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85

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.

Hi,
Thanks for this great library. Do you have any plan to support also typescript?

Are there any way to listen to user selection?

Something like onSelect receiving the selected data/series/etc.

The bubble chart sample has bubbles that are small and very hard to see. The default size should be increased.

Awesome lib! I'm wondering if this library can render color coordinated keys that correlate to a chart?

I was using the example of Bar Graph from the documentation and then I saw this error. Please guide me.
Thanks.

TypeError: _react2.default.createContext is not a function

Hi!
I have many bar charts with outliers that have really large values compared to other items in the bar chart.

I would like to crop the long bars, so that the chart takes less space. Something like this: (ignore the orientation). Does your bar chart handle scale breaks?

Line, Bar, Bubble, and other components all share a similar structure and a lot of repeated code. It would be pretty simple to expose a component that would aid in building these structures, but allow for custom visual representation. We could use it internally as well as expose it as a way to add new series and primitive types without requiring the user to understand the internals of the library.

Playing around with the line chart and looking at the examples I can't figure out how it's supposed to be formatted. The docs say that that the "type='time'" should be able to handle dates. How do I go about formatting them?

Hi,

I'm trying create a Bar chart with custom X axis ticks.

Here's a snippet:
<Chart
type="bar"
data={[
{
label: "MyData",
data: [[0, 5],[1,7],[2,3]]
}
]}
axes={[
{ primary: true, type: "ordinal", position: "bottom", showGrid: true ,tickValues: ["a,","b","c"]},
{ type: "linear", position: "left", showGrid: true ,hardMin:-1,hardMax:10}
]}
/>

However, this causes the X-axis ticks to be written over each other.
All the x-axis text elements get the same translate3d values:
transform: translate3d(0px, 0px, 0px);

Any idea what's wrong and how to fix it? is it a bug in the code or did i mis-use the bar chart somehow?

thanks.

Getting this error several times with a basic line graph:

TypeError: el.getBoundingClientRect(...).toJSON is not a function

Seems like it's also occurring on the react charts website examples. This is in Firefox, btw.

When I push new data to data[i].data, it has not refreshed.

data = [
      {
        label: 'Series 1',
-       data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
+       data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7], [5, 8]]
      },
      {
        label: 'Series 2',
-       data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
+       data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4], [5, 5]]
      }
]

Could you make this?

Hi, this is a great library! I've built something similar in the past so I'm definitely keeping an eye on this repo. ;-)

I was just playing with your demos, and the custom tooltip example seems to crash fairly quickly/often: https://react-charts.js.org/examples/custom-tooltip

vendors~main.d211a9cb.js:1 Invariant Violation: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
    at https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:169683
    at u (https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:169786)
    at eu (https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:264447)
    at ca (https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:225230)
    at https://react-charts.js.org/main.651d5ede.js:1:41784
    at bi (https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:244545)
    at qi (https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:251507)
    at Vi (https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:254256)
    at https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:267460
    at Object.t.unstable_runWithPriority (https://react-charts.js.org/templates/vendors~main.d211a9cb.js:1:278230)

The full text of the error you just encountered is:

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.

This was on Chrome Version 74.0.3729.169

There were also quite a lot of these errors prior to the crash:

Error: <rect> attribute height: Expected length, "NaN".
Error: <rect> attribute y: Expected length, "NaN".

You might want to consider throwing some error boundaries into the demos as well, using componentDidCatch... ;-)

I'm trying to use the example of line chart in my code: https://react-charts.js.org/examples/line

But can not work well, no any error in console, below is my code:

import React, {Component} from 'react'; import { Chart, Axis, Series,Line,Cursor } from "react-charts"; export default class MoistureChart extends Component { constructor(props) { super(props); this.state = { data: [ { label: "Series 1", datums: [{x: 1, y: 10}, {x: 2, y: 10}, {x: 3, y: 10}] }, { label: "Series 2", datums: [{x: 1, y: 10}, {x: 2, y: 10}, {x: 3, y: 10}] }, { label: "Series 3", datums: [{x: 1, y: 10}, {x: 2, y: 10}, {x: 3, y: 10}] }] }; } render() { return <Chart data={this.state.data} > <Axis type="linear" position="left" /> <Series type={Line} /> <Cursor primary /> </Chart>; } }

This library looks great and the zoom is brush functionality which was the feature i wanted. But i wanted it to extend this for react native as well. Please let me know if there is any possible way to do this.

Twitter Thread where we discussed it, including the agreed upon solution.

Exquisite artist's rendition of the required result

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

Hi there,

When I try to plot my data in time, the x-axis show some not understandable float rather than a date. Is this a correct behavior?

Simplified version of my code is shown below

function App() {
    let currentTime = new Date();
    let currentTime2 = new Date().setHours(new Date().getHours() + 1);
    let currentTime3 = new Date().setHours(new Date().getHours() + 2);
    let workerCount = {
        label: 'Worker Count',
        data: [{x: currentTime, y: 1},
               {x: currentTime2, y: 2},
               {x: currentTime3, y: 3}],
        color: "#00ff00"
    };
    let [plotData, handlePlotDataChange] = useState([workerCount]);
    let [axes, handleAxesChange] = useState([
        { type: 'linear', position: 'left' },
        { primary: true, type: 'time', position: 'bottom' }
    ]);

    return (
            <div style={{ width: '800px', height: '600px', 'marginTop': '10px' }}>
                <Chart data={plotData}
                    axes={axes}
                    primaryCursor
                    secondaryCursor
                    tooltip />
            </div>
        </div>
    );
}

Output:

Hi,
I am facing below error. Please help how to fix this.

index.js:2178 Warning: Encountered two children with the same key, Thu Jan 01 1970 05:00:00 GMT+0500 (Pakistan Standard Time). Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Thanks
Adil

Currently the way to style the ticks (by CSS) is as follows -

.Axis:first-child text {
fill: gray !important;
transform: translate3d(0px, 9px, 0px) !important;
}

first-child = primary/ horizontal axis
text = text element (svg)
!important overrides the default behaviour of 50deg rotation

https://github.com/d3/d3-delaunay

Hi when i am using "ordinal" axis option for plotting categories for Area Chart

how to reduce this issue ?

how to use custome css, colors for charts ? is there a additional way to send options ?

Currently axis styles are hardcoded and there's no way to override them.

Storybook would be a good way to host the samples. Would eliminate the custom app and give a way for controlling properties in a consistent way.

for versions > 0.1.0 I got an error
./node_modules/react-charts/lib/components/Brush.js
Module build failed: Error: ENOENT: no such file or directory, open '/home/tapok/WebstormProjects/sd-wan/sdwan-gui/node_modules/react-charts/lib/components/Brush.js'

for versions <= 0.1.0 I got an error
react2.default.createclass is not a function

Hi Team,

Bubble chart currently takes a prop getSeriesStyle={getSeriesStyle} which allows to set a color for all the data.
But there is no way through which I can specify what color I need for each data. How do one override the default series color?

The bar/dot won't display correctly when there's only one item in datums and { stacked: false }.
Tried with Column Chart example (happens to line chart, too):

export default () => (
    <ChartConfig dataType="ordinal">
        {({ data }) => {
            data = [{
                label: 'Label',
                datums: [{
                    x: 'Test1',
                    y: 26609
                }]
            }]
            return(
                <Chart
                  data={data}
                  series={{ type: 'bar' }}
                  axes={[
                      { primary: true, type: 'ordinal', position: 'bottom' },
                      { position: 'left', type: 'linear', stacked: false },
                  ]}
                  primaryCursor
                  secondaryCursor
                  tooltip
                />
            )}
        }
    </ChartConfig>
)

How can you get Pie/Donut to work !

The sample code on https://react-charts.js.org/ does not work.

I tried the AreaChart and found:

1. hooks/useChartConfig cannot be imported
2. The dependency Box cannot be found
3. I also see a weird option: sourcecode, used for syntax highlighting (this seems like the code contains extra set-up for the website itself.

I know the hook it is this complex beast:
https://github.com/tannerlinsley/react-charts/blob/master/www/src/hooks/useChartConfig.js

Is it possible to add the simplest one specific for this graph?

When viewing the 'custom tooltip' example at the official examples page in Safari version 12.1.1 (14607.2.6.1.1) / macOS v10.14.5 (18F132),

the chart displays normally on initial open, and when moving the mouse over part of the graph, the first tooltip appears as normal. Moving the mouse around different areas of the example graph with moderately swift speed or perhaps with a shaking movement results in the graph disappearing and being replaced with an error message reading An unexpected error has occurred.

Numerous errors (possibly related) are reported in the developer javascript console, eg:

[Error] Error: Invalid value for <rect> attribute y="NaN" we (commons.7cad20dceb80bc668535.js:1:238177) kl (commons.7cad20dceb80bc668535.js:1:311423) (anonymous function) (commons.7cad20dceb80bc668535.js:1:329805) (anonymous function) unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) Nu (commons.7cad20dceb80bc668535.js:1:327744) vu (commons.7cad20dceb80bc668535.js:1:318028) vu (anonymous function) (commons.7cad20dceb80bc668535.js:1:275823) unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) Gi (commons.7cad20dceb80bc668535.js:1:275770) Ki (commons.7cad20dceb80bc668535.js:1:275705) ue (commons.7cad20dceb80bc668535.js:1:345233) Cn (commons.7cad20dceb80bc668535.js:1:259645) On (commons.7cad20dceb80bc668535.js:1:260602) Mn (commons.7cad20dceb80bc668535.js:1:259890) Mn unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) (anonymous function) (commons.7cad20dceb80bc668535.js:1:259260) (anonymous function) [Error] Error: Invalid value for <rect> attribute height="NaN" we (commons.7cad20dceb80bc668535.js:1:238177) kl (commons.7cad20dceb80bc668535.js:1:311423) (anonymous function) (commons.7cad20dceb80bc668535.js:1:329805) (anonymous function) unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) Nu (commons.7cad20dceb80bc668535.js:1:327744) vu (commons.7cad20dceb80bc668535.js:1:318028) vu (anonymous function) (commons.7cad20dceb80bc668535.js:1:275823) unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) Gi (commons.7cad20dceb80bc668535.js:1:275770) Ki (commons.7cad20dceb80bc668535.js:1:275705) ue (commons.7cad20dceb80bc668535.js:1:345233) Cn (commons.7cad20dceb80bc668535.js:1:259645) On (commons.7cad20dceb80bc668535.js:1:260602) Mn (commons.7cad20dceb80bc668535.js:1:259890) Mn unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) (anonymous function) (commons.7cad20dceb80bc668535.js:1:259260) (anonymous function) [Error] Error: Invalid value for <rect> attribute y="NaN" we (commons.7cad20dceb80bc668535.js:1:238177) kl (commons.7cad20dceb80bc668535.js:1:311423) (anonymous function) (commons.7cad20dceb80bc668535.js:1:329805) (anonymous function) unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) Nu (commons.7cad20dceb80bc668535.js:1:327744) vu (commons.7cad20dceb80bc668535.js:1:318028) vu (anonymous function) (commons.7cad20dceb80bc668535.js:1:275823) unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) Gi (commons.7cad20dceb80bc668535.js:1:275770) Ki (commons.7cad20dceb80bc668535.js:1:275705) hu (commons.7cad20dceb80bc668535.js:1:314596) Oa (commons.7cad20dceb80bc668535.js:1:293213) Oa (anonymous function) (commons.7cad20dceb80bc668535.js:1:161385) [Error] Error: Invalid value for <rect> attribute height="NaN" we (commons.7cad20dceb80bc668535.js:1:238177) kl (commons.7cad20dceb80bc668535.js:1:311423) (anonymous function) (commons.7cad20dceb80bc668535.js:1:329805) (anonymous function) unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) Nu (commons.7cad20dceb80bc668535.js:1:327744) vu (commons.7cad20dceb80bc668535.js:1:318028) vu (anonymous function) (commons.7cad20dceb80bc668535.js:1:275823) unstable_runWithPriority (commons.7cad20dceb80bc668535.js:1:3560) Gi (commons.7cad20dceb80bc668535.js:1:275770) Ki (commons.7cad20dceb80bc668535.js:1:275705) hu (commons.7cad20dceb80bc668535.js:1:314596) Oa (commons.7cad20dceb80bc668535.js:1:293213) Oa (anonymous function) (commons.7cad20dceb80bc668535.js:1:161385)

etc

To discover and replicate this issue I was using the Safari Browser:
Safari version 12.1.1 (14607.2.6.1.1) / macOS v10.14.5 (18F132),
and I attempted to replicate this problem in Chrome but was unable to cause the issue to occur. My Chrome build was Chrome 80.0.3987.132 (Official Build) (64-bit)

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

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

react-show v3.0.0 beta used to not call .transition("clean"), but in v 3.0.4 calls .transition("clean") without a second argument. This sets the styles for tooltip-wrap to not have a left, top, height, width defined, and breaks the Tooltip object.

I would suggest updating package.json to point to the beta version (tannerlinsley/react-show@0081679#diff-1fdf421c05c1140f6d71444ea2b27638) or finding a way to update Animate so tooltips still work.

Hi, the Charts work great, is there an API that I can use to show the legend similar to re-charts?

When I do this

class Foo extends React.Component {
  renderTooltip = (...args) => {
      console.info('tooltip', args);
      return (<p>test</p>);
  }
  render() {
    const { data, axes } = this.props;
    return (
      <Chart
        primaryCursor
        tooltip={this.renderTooltip}
        data={data}
        axes={axes}
      />
    );
  }
}

I got

Warning: Failed prop type: Invalid prop `tooltip` supplied to `HookWrapper`.

And it not work.

Can it support class component?

Hi all,

I have this implementation:

https://pastebin.com/HpByVvzj

But it returns this:

With that info of mouse position and all that stuff. The bug disapears removing both Cursor elements.
Could you guys give me a hand, cause I really want to use a cursor.

I tried to use the bar example at https://react-charts.js.org/examples/bar. It doesn't seem to be in sync with the current version. Could you please update this example or provide an example at some other place? It would be most helpful if the kind of needed parameterization would become clear. Thanks!

How can I change tooltip label not using default? Example on https://www.npmjs.com/package/react-charts not helping.

Reproduce

1. go to https://react-charts.js.org/doughnut
2. Mouse over a section of chart
3. Notice that the screen goes blank
4. Check the console and see errors

Stack Trace

TypeError: t is undefined
Stack trace:
children/<@https://react-charts.js.org/demo.f8bb9eb8.js:1:298055
children@https://react-charts.js.org/demo.f8bb9eb8.js:1:297801
render@https://react-charts.js.org/demo.f8bb9eb8.js:1:296406
xdMe/r</e.prototype.render/<@https://react-charts.js.org/demo.f8bb9eb8.js:1:509408
83Fv/p</e.prototype.render@https://react-charts.js.org/demo.f8bb9eb8.js:1:156074
d@https://react-charts.js.org/demo.f8bb9eb8.js:1:44747
beginWork@https://react-charts.js.org/demo.f8bb9eb8.js:1:52786
o@https://react-charts.js.org/demo.f8bb9eb8.js:1:56627
a@https://react-charts.js.org/demo.f8bb9eb8.js:1:56906
w@https://react-charts.js.org/demo.f8bb9eb8.js:1:59849
_@https://react-charts.js.org/demo.f8bb9eb8.js:1:59392
b@https://react-charts.js.org/demo.f8bb9eb8.js:1:59229
batchedUpdates@https://react-charts.js.org/demo.f8bb9eb8.js:1:75378
Ft@https://react-charts.js.org/demo.f8bb9eb8.js:1:13538
xn@https://react-charts.js.org/demo.f8bb9eb8.js:1:30347

I tried to run this library in a fresh create-react-app to make sure no other dependencies were messing with it and I got the error above when I tried to use the Line chart from the stories. I ran yarn add react-charts and yarn add react-resizable.

in particular its neither supported bei IE11 (not a surprise) and Edge (more of a problem)

the offending line: https://github.com/react-tools/react-charts/blob/master/src/components/AxisLinear.js#L88

It would be helpful to have an option that we could add a prefix or suffix to an axis.

For example if you want your Y axis to be dollars, you can add a $ prefix and on the Y axis and inside the tooltip the prefix will show before the value.