React-recharts LineChart does not render

Asked
Active3 hr before
Viewed126 times

9 Answers

react
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,Join Stack Overflow to learn, share knowledge, and build your career.,Stack Overflow en español

Pretag
 Pretag team - issue, fix, solve, resolve
88%

I believe the data is formatted correctly but I'm not sure as recharts throws no error,In my opinion it would be good if recharts could throw an error message or something if it cannot render. This issue was caused by me and can be closed but some lessons learned maybe :), The text was updated successfully, but these errors were encountered:

Pretag
 Pretag team - issue, fix, solve, resolve
72%

As seen in our example above and as mentioned in the Recharts documentation, every top level container (or rather, every Recharts component) can only render certain Recharts provided components. For example, LineChart can render Line, Tooltip, ReferenceArea, xAxis, yAxis, and so on, but not a Bar.,So, what can you render inside a top level container ?,Can we create a new React component which returns an svg element and render it inside the top level chart container ? No.

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

NPM is the easiest and fastest way to get started using Recharts. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.,Recharts is a Redefined chart library built with React and D3.,The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:

<LineChart
  width={400}
  height={400}
  data={data}
  margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
  <XAxis dataKey="name" />
  <Tooltip />
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
  <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
</LineChart>
load more v
40%

Creating React Application And Installing Module:,Introduction: Rechart JS is a library that is used for creating charts for React JS. This library is used for building Line charts, Bar charts, Pie charts, etc, with the help of React and D3 (Data-Driven Documents). ,Step 1: Create a React application using the following command.

Step 1: Create a React application using the following command.

npx create - react - app foldername
load more v
22%

Pretag
 Pretag team - issue, fix, solve, resolve
60%

const CartesianChart = ({ resultSet, legend, children, ChartComponent, height }) => (
 <ResponsiveContainer width="100%" height={height || 250}>
  <ChartComponent
   margin={{
      top: 16,
      right: 16,
      bottom: 0,
      left: 0,
     }}
   data={resultSet.chartPivot()}>
   <XAxis axisLine={false} tickLine={false} tickFormatter={xAxisFormatter} dataKey="x" minTickGap={20} />
   <YAxis axisLine={false} tickLine={false} tickFormatter={numberFormatter} />
   <CartesianGrid vertical={false} />
   {children}
   { legend && <Legend /> }
   <Tooltip labelFormatter={dateFormatter} formatter={numberFormatter} />
  </ChartComponent>
 </ResponsiveContainer>
)
load more v
48%

So in my situation, I was using the brand new React Hooks for the PieChart component and therefore had to use inline arrow functions for onMouseEnter props of <Pie> component:, So in my situation, I was using the brand new React Hooks for the PieChart component and therefore had to use inline arrow functions for onMouseEnter props of <Pie> component: ,I would like to report a bug. Animation rendering fails into Pie Chart, there is space for improvement on the fallback.

    // FAILS ANIMATION
    const [activeIndex, setActiveIndex] = useState(-1)

    <Pie
        isAnimationActive={true}
        activeIndex={activeIndex}
        activeShape={renderActiveShape}
        dataKey="duration"
        data={data}
        onMouseEnter={()=> setActiveIndex(i)}>
load more v

Other "react-undefined" queries related to "React-recharts LineChart does not render"