react-charts

react-charts copied to clipboard

Thanks for your interest in v3! Here's what needs to happen to hit a stable release:

• [ ] Documentation
• [x] Finish converting examples into the v3 "simple" example
• [x] Convert Stress Test example to v3
• [x] Automatic scale type inference (get first non-null/non-undefined value and use it to determine scale type)

A simple fix. I’ll get right on it.

Tanner Linsley On Jul 17, 2021, 9:45 PM -0600, Michael MacDonald @.***>, wrote:

The area fill is overflowing the xaxis when the y origin is greater than 0. I used the DynamicContainer example. I just converted it to .js import React from 'react'; import { Chart } from 'react-charts'; // import useDemoConfig from '../hooks/useDemoConfig';

export default function DyanmicContainer() { // const { data, randomizeData } = useDemoConfig({ // series: 2, // dataType: 'time', // });

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: 'area', // stacked: true, }, ], [] );

return ( <>

This example demos a chart's ability to position itself responsively in elements while respecting the box-model (margin, padding, and borders). It also showcases the tooltip's ability to portal outside of an overflow element (the blue border-box).

{/* <button onClick={randomizeData}>Randomize Data

*/} <div style={{ display: 'flex', flexDirection: 'column', padding: '12px', border: '2px solid black', height: '400px', }} > <div style={{ flex: '0 0 auto', padding: '10px', border: '1px solid red', }} > Header <div style={{ flex: 2, border: '5px solid blue', maxHeight: '400px', margin: '10px', overflow: 'hidden', }} > <Chart options={{ data, primaryAxis, secondaryAxes, }} /> </> ); }

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, }, ], }, { 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, }, ], }, ]; — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

Hi @tannerlinsley, first of all, thank you for your work.

Any update on this? How can I help?

How about React18 support?

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

hi @tannerlinsley, great work so far, will you support doughnut charts?

Hi @tannerlinsley thanks for amazing library :) Can you please update dependency d3-scale:3.3.0 to latest version? There is a vulnerability in d3-color:2.0.0 which is transient dependency