Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<CartesianGrid /> ignores props

See original GitHub issue

Do you want to request a feature or report a bug? Bug

What is the current behavior? CartesianGrid ignores x ,y, width, height, horizontalPoints, verticalPoints props.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/9y45ut13/).

http://jsfiddle.net/zm89jyrp/

What is the expected behavior? I would have expected there to be horizontal lines as specified by let horizontalPoints = [100, 200, 300, 400]; I would have also expected the grid to start at x={20} y={20}. Discovered when tried to limit the size of the CartesianGrid.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts? Chrome. Haven’t used previous versions.

Issue Analytics

State:
Created 7 years ago
Reactions:4
Comments:5

Top GitHub Comments

4reactions

mrt123commented, May 9, 2018

Meanwhile for those who need either vertical or horizontal lines on a graph … i propose to use :
referenceLines = myAxisTicks.map(t=><ReferenceLine x={t} stroke="#ccc"/> <LineChart>{referenceLines}</LineChart> Where myAxisTicks is array of numbers. Customise ReferenceLine to suit your needs as per API docs : http://recharts.org/

3reactions

fangjcommented, May 2, 2017

It also happens when use CartesianGrid inside LineChart

Top Results From Across the Web

Exploring Recharts: what can be rendered inside a Recharts ...

Recharts checks the type of the element being rendered, and if does not match the allowed types, it would just simply ignore that...

recharts CartesianGrid TypeScript Examples

This page shows TypeScript code examples of recharts CartesianGrid. ... 3" /> <XAxis height={60} dataKey="date" // @ts-ignore tick={<CustomizedAxisTick ...

Recharts: Setting X-Axis Label Margin - Stack Overflow

React ignores 'for' attribute of the label element · 86 · Remove x-axis label/text in chart.js · 481 · Setting a backgroundImage With...

Code coverage report for node-npmtest-recharts/node_modules ...

renderLineItem(horizontal, props); }); return _react2.default.createElement( 'g', { className: 'recharts-cartesian-grid-horizontal' }, items ); } /** * Draw ...

fable-compiler/Fable - Gitter

let view (model : Model) dispatch = let pureTimeline (props : obj) = let containerWidth = props?width |> unbox<float> let containerHeight = props?height ......