Create time series example for a line chart (or any chart). Lots of asks for this addition to documentation

recharts/recharts#956
recharts/recharts#3052

I noticed that the changes that were merged in #62 are no longer present, and that the file does not show the change in its history (https://github.com/recharts/recharts.org/blob/master/src/app.js)

Perhaps a bad merge, but It's odd... I can't see any commit after #62 was merged that reverts the file.

http://recharts.org/examples/#ComposedResponsiveContainer

The charts container is always shaking in my browser - Chrome Version 50.0.2652.0 (64-bit) for Mac OS X 10.11.12, and my colleagues also encountered this issue when they browsed that page in Chrome for Windows 10.

Add documentation for strokeWidth for the Area. Something like this would work:

strokeWidth Number optional

The width of the stroke for the plot lines in pixels. The higher the number, the thicker the line.

DEFAULT: false
FORMAT:

<Area strokeWidth={1} />
<Area strokeWidth={2} />
<Area strokeWidth={5.3} />

When navigating to the home page, in the list of users using Recharts, some of the company logo links are outdated:

I'm using Firefox 62.0.3 and I can't scroll to the bottom of sidebar on the API and Examples pages.

Example 1

Example 2

You can navigate to http://recharts.org/en-US/examples by going to recharts.org, but if you click the link or refresh the page once you get there it 404s.

Safari Version: 13.0.3 (15608.3.10.1.4)
macOS Version: 10.15.1 (19B88)

The window that displays example code has a maximum size of 30 characters wide by 24 lines tall. This is very small, and too small to be very useful for anyone looking at the longer examples without having to copy and paste the code to an external text editor.

Screenshot of code window from "Examples" section:

Using Chrome 81 on Ubuntu 18.04 on a 4K monitor with the default zoom level, the code window only was only capable of using about 1.33% of the total area inside the browser viewport.

One possible remedy would be to display the code under the example window, similar to the API example code windows (as shown below).

Screenshot of code window from "API" section for comparison:

The examples in the documentation guide and API don't tell the user what exactly the data should look like, and it doesn't even correspond between the data parameter description, and the JSX markup provided.

The "Getting Started" guide has the following code:

import { LineChart, Line } from 'recharts';

<LineChart width={400} height={400} data={data}>
  <Line type="monotone" dataKey="uv" stroke="#8884d8" />
</LineChart>

Without saying what data should look like.

And the BarCharts example in the API has the following code:

<BarChart width={730} height={250} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Bar dataKey="uv" fill="#82ca9d" />
</BarChart>

Where the description for the data parameter is missing any mention of pv or uv:

dataArray
The source data, in which each element is an object.
FORMAT:
[{ name: 'a', value: 12 }]
[{ name: 'a', value: [5, 12] }]

The examples should correspond to the parameter description, and the data variable should be provided in every example.

Problem

Clone recharts.org repo to local, start dev server at 127.0.0.1:4000.
Direct to http://127.0.0.1:4000/en-US/examples (or other locations), refresh page.
Got a blank page with error: Cannot GET ***

Screenshot

AreaChartFillByValue jsfiddle link opens the jsfiddle of SimpleAreaChart.

In the side bar for the examples page, everything is labeled as a linechart

When navigating to any of the code examples, the code section is cut off and you have to use sideways scroll bars. Although there is plenty of real-estate to expand out into on my 1920x1080 monitor. It would be nice to have the code examples responsive.

http://recharts.org/en-US/examples/AreaChartConnectNulls

#56 Makes this issue a whole lot worse as you can't get back to where you were without re-entering via recharts.org and manually navigating to the page you were on 😅

https://github.com/recharts/recharts.org/settings

The link at this:

http://recharts.org/en-US/api/ReferenceArea#alwaysShow

is broken, will raise a small PR to fix it.

navigating to http://recharts.org/en-US/api/Customized yeilds:

a blank white page with the following errors:

backend.js:6 TypeError: Cannot read property 'desc' of undefined
    at i.value (APIView.js:232)
    at lo (react-dom.production.min.js:163)
    at so (react-dom.production.min.js:162)
    at ho (react-dom.production.min.js:169)
    at Qo (react-dom.production.min.js:204)
    at Ko (react-dom.production.min.js:205)
    at ka (react-dom.production.min.js:220)
    at Da (react-dom.production.min.js:219)
    at Fa (react-dom.production.min.js:231)
    at En (react-dom.production.min.js:85)
r @ backend.js:6
_o @ react-dom.production.min.js:179
Lo.n.callback @ react-dom.production.min.js:190
di @ react-dom.production.min.js:128
ci @ react-dom.production.min.js:128
ja @ react-dom.production.min.js:229
ka @ react-dom.production.min.js:220
Da @ react-dom.production.min.js:219
Fa @ react-dom.production.min.js:231
En @ react-dom.production.min.js:85
APIView.js:232 Uncaught TypeError: Cannot read property 'desc' of undefined
    at i.value (APIView.js:232)
    at lo (react-dom.production.min.js:163)
    at so (react-dom.production.min.js:162)
    at ho (react-dom.production.min.js:169)
    at Qo (react-dom.production.min.js:204)
    at Ko (react-dom.production.min.js:205)
    at ka (react-dom.production.min.js:220)
    at Da (react-dom.production.min.js:219)
    at Fa (react-dom.production.min.js:231)
    at En (react-dom.production.min.js:85)

Hi, I used this Library for the website and then,
I really appreciate that there are many properties for each component 👍

But, When I used the Line component and I wanted to change the width of lines,
there is no explanation. So, I had to confirm the source code.

It is troublesome, I think it is better to add this explanation like the following.
(Maybe, many people want to change the default width of the line !!)

strokeWidth : Number optional

The width of the stroke for the plot lines in pixels. The higher the number, the thicker the line.

DEFAULT: 1
FORMAT:

<Line strokeWidth={1} />
<Line strokeWidth={2} />
<Line strokeWidth={5.3} />

I tried to submit the PR by adding this explanation, but I can't write the chinese.
https://github.com/recharts/recharts.org/blob/master/src/docs/api/Line.js
So, I gave up submitting this PR 🙇 .

ReferenceArea allows easy replacement of Rectangle inside using shape prop. Unfortunately we only discovered this after two days of coding when we checked the source 😅

I'd send a pull request but unfortunately I don't know Chinese :(

The examples hosted on jsfiddle have seen compiler problems, e.g.:

recharts/recharts#2375

Also, it may be worthwhile to move all the code examples into a source repo belonging to recharts, in case those code boxes go offline. I recommend not using storybook, but rather whatever tool can do this as simply as possible.

When I navigate to the api -> ResponsiveContainer link, and I refresh the page, I get a 404 error.

http://recharts.org/en-US/api/ResponsiveContainer

Actually, if I go to recharts.org, and I refresh the web page, I get 404 error. It looks all link is broken

I copied some code from your JSFiddle example (I'm using typescript). Typescript complains about the ratio prop. Although it works on JSFiddle, the prop documented in the API is aspectRatio not ratio.

Typescript would not compile until I updated my example code to use aspectRatio.

JSFiddle examples:
https://jsfiddle.net/alidingling/u702a3Lx/ (Simple)
https://jsfiddle.net/alidingling/Ldvvz2ak/ (Customised content)

Treemap API:
http://recharts.org/en-US/api/Treemap#aspectRatio

The strokeDasharray prop in the [https://github.com/recharts/recharts.org/blob/master/src/docs/api/Line.js#L359](Line component documentation) is incorrect. It's listed as strokeDashArray but the actual prop appears to be strokeDashArray.

Expected
The documentation should match the actual prop

Actual
The casing of the prop in the documentation does not match the casing of the prop in the source code

The example for "ReferenceArea with shape" on http://recharts.org/en-US/api/ReferenceArea#shape points to a Historgram example on jsfiddle, which does not use a ReferenceArea at all. I believe this is unintentional.

The example should point to: https://jsfiddle.net/jashanbhullar/a9wxodz1/

recharts: 2.0.4

http://recharts.org/en-US/api/Bar#label

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): Bar', gave the following error.
    Type '{ position: string; }' is not assignable to type 'boolean | ReactElement<SVGElement, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ((props: any) => SVGElement) | { ...; }'.
      Object literal may only specify known properties, and 'position' does not exist in type 'ReactElement<SVGElement, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ((props: any) => SVGElement) | { ...; }'.
  Overload 2 of 2, '(props: Props, context: any): Bar', gave the following error.
    Type '{ position: string; }' is not assignable to type 'boolean | ReactElement<SVGElement, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ((props: any) => SVGElement) | { ...; }'.
      Object literal may only specify known properties, and 'position' does not exist in type 'ReactElement<SVGElement, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ((props: any) => SVGElement) | { ...; }'.  TS2769

    28 |           <BarChart data={data} margin={{ top: 20, bottom: 5 }}>
    29 |             <XAxis dataKey="name" />
  > 30 |             <Bar dataKey="value" fill="#8884d8" label={{ position: 'top' }}>
       |                                                          ^
    31 |               {data.map((entry, index) => (
    32 |                 <Cell key={`cell-${index}`} fill={entry.color} />
    33 |               ))}

http://recharts.org/en-US/examples/CustomShapeBarChart

has the following example:

<Bar dataKey="female" fill="#8884d8" shape={<TriangleBar />} label={{ position: 'top' }}>

First off, thank you for producing a really nice charting library for React!

I think a minor change that could make the English documentation a little better is some rewording in Line.js.

The English string for the Line.js docs is currently: 'en-US': 'The dot is shown when muser enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. If object set, active dot will be drawn which have the props mergered by the internal calculated props and the option. If ReactElement set, the option can be the custom active dot element.If set a function, the function will be called to render customized active dot.'.

This contains some minor typos and I'd like to propose rewording it to:
'en-US': 'The active dot is shown when a user enters a line chart and this chart has tooltip. If set to false, no active dot will be drawn. If set to true, active dot will be drawn with the props calculated internally. If passed an object, active dot will be drawn, and the internally calculated props will be merged with the key value pairs of the passed object. If passed a ReactElement, the option can be the custom active dot element. If passed a function, the function will be called to render a customized active dot.'

I can submit a pull request which will also include this change. Thank you!

I noticed #62 was merged (thanks!) however the gh-pages branch needs building for this to be active on recharts.org

fillOpacity is used in the AreaChart example

https://recharts.org/en-US/api/AreaChart

but it's not in the Area page

https://recharts.org/en-US/api/Area

I found some bugs:

• Font icons are not being included.
  • The font icons rely on an SCSS file: simple-line-icons/scss/simple-line-icons.scss
    https://github.com/recharts/recharts.org/blob/master/src/views/IndexView.js#L7
  • The SCSS file references other font files within the node_module folder
• Script for Github Button not included in the build index.html.
  • Make sure the index.html that gets built includes the script:
    https://github.com/recharts/recharts.org/blob/master/index.html#L14

The bottom of the left side-bar of the API and Examples pages in recharts.org cannot be reached on Firefox or Edge.

Nothing is being rendered into <div id="app"></div>

When navigating to the examples, if a user clicks on the "Run" button, the chart will go blank.

Chart before clicking "Run":

Chart after clicking "Run":

Failed to load resource: the server responded with a status of 404 (Not Found) app.js:1

I noticed that the Tooltip is before the Scatterplot in the example code:
https://github.com/recharts/recharts.org/blob/master/src/docs/exampleComponents/ScatterChart/SimpleScatterChart.js

but after in the jsFiddle: http://jsfiddle.net/8ueLrpya/20/

and I noticed that when its after, the tooltip disappears even when the mouse is still over the point, which is frustrating. I wanted to mention it in case maybe there was a bug, or perhaps it was just something to document.

Last image for companies that use rechars returns 404. It's not a good idea to use images generated by GitHub to cache the results.

The color and formatter props are undocumented in the tooltip payload section. These props are very useful when creating a custom tooltip and should be documented.

I've been having a lengthy discussion with the definitely typed team about adding these attributes. They understandably are hesitant to add undocumented types. Since the underlying code base makes use of these types, and they are useful when creating a custom tooltip, they should be documented.

See the PR on definitely typed here
I also opened an issue on the recharts main repo here

I have opened PR #47 to correct this

What problem does this feature solve?
At the moment the Area component has the dataKey property which can be a number, a string or an functions. However in the documentation (https://recharts.org/en-US/api/Area#dataKey) it just refers number or string.
This should be fixed in order to avoid confusion and unnecessary searches online (Until the user finds this #383)

What does the proposed API look like?
Documentation should be added in order to inform the user of the API that this property also accepts functions.

Both SankeyChart and FunnelChart are missing in @types/recharts, making it hard to import them directly into a new project.

Hi, I would like to help with updating the documentation and the examples. I have been experimenting with this library and feel that it can gain a lot more usage and contribution if documentation and examples are maintained. Can you help me get started? I have opened a few issues/PRs already but there seems to be no activity in this repo.

Documentation request recharts/recharts#3102 for more detailed customized component docs, see details in recharts issue

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

http://recharts.org/en-US/examples/HighlightAndZoomLineChart * Fixed the URL, had the wrong one to start with

Steps to reproduce

Click "Run", or open the JSFiddle page.

What is expected?

When you click and drag on the graph, it will zoom.

What is actually happening?

The zoom works when the first page is loaded, but when you click "Run" it breaks (might indicate that the code that's initially loaded isn't the same as the code in the pane on the right?). Also, the JSFiddle version doesn't work at all.

The code in the JSFiddle and the example page is different

Navigating to http://recharts.org/en-US/ directly gives a 404 or for, where as going to http://recharts.org/ redirects me to http://recharts.org/en-US/ and loads fine.

This problem occurs for any other routes under http://recharts.org/en-US/ as well. It makes bookmarking and sharing links difficult.

Update the Bar Chart API HERE -- It describes how to use the label prop in [email protected] and not consistent with the modern label usage at major [email protected].

I hope the whole documentation gets updated & fixed quickly. A lot of JSFiddle iframes are not working as well.

This project should have a prettier configuration (similar to recharts repo)

None of the charts or components event handlers are documented well. They accept functions but, information on how passed function is invoked is lacking.

Currently recharts is in version - v1.0.0-beta.10
Can you please let us know when will we have the stable version released?

See this issue. The URL for this page is broken, so it results as a blank page with some errors in the console.