tanstack / react-charts Goto Github PK
View Code? Open in Web Editor NEW⚛️ Simple, immersive & interactive charts for React
Home Page: https://react-charts.tanstack.com
License: MIT License
⚛️ Simple, immersive & interactive charts for React
Home Page: https://react-charts.tanstack.com
License: MIT License
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
... ;-)
How can I change tooltip label not using default? Example on https://www.npmjs.com/package/react-charts not helping.
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 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>
)
}
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?
Are there any way to listen to user selection?
Something like onSelect
receiving the selected data/series/etc.
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?
Twitter Thread where we discussed it, including the agreed upon solution.
The bubble chart sample has bubbles that are small and very hard to see. The default size should be increased.
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>
);
}
Hi, the Charts work great, is there an API that I can use to show the legend similar to re-charts?
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>; } }
how to use custome css, colors for charts ? is there a additional way to send options ?
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
Awesome lib! I'm wondering if this library can render color coordinated keys that correlate to a chart?
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
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.
The sample code on https://react-charts.js.org/ does not work.
I tried the AreaChart and found:
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?
How can you get Pie/Donut to work !
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
.
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
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.
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.
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.
Hi,
Thanks for this great library. Do you have any plan to support also typescript?
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.
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.
Currently axis styles are hardcoded and there's no way to override them.
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
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)
This chart.js code is not working here
ticks: {
beginAtZero: true,
min: 0,
max: 100,
}
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?
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.
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?
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>
)
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 all,
I have this implementation:
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'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)`.
<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>
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
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!
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
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.
Surprised there's no Pie charts available in this lib!
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.