21

I want to render just the line without the points. I'm using: http://recharts.org/#/en-US/api/LineChart

enter image description here

Here is the JSFiddle:

http://jsfiddle.net/gw7v4br8/87/

const {LineChart, Line} = Recharts;
const data = [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
const TinyLineChart = React.createClass({
    render () {
    return (
        <LineChart width={300} height={100} data={data}>
        <Line type='monotone' dataKey='pv' stroke='#8884d8' strokeWidth={1} />
      </LineChart>
    );
  }
})

ReactDOM.render(
  <TinyLineChart />,
  document.getElementById('container')
);

In their API for line chart I don't see a point API, would this even be possible with this library?

http://recharts.org/#/en-US/api/LineChart

Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
  • I'm not sure what exactly you're after, but it might be relevant to check out libraries like [react-trend](https://github.com/unsplash/react-trend) or [react-sparklines](https://github.com/borisyankov/react-sparklines). – Fabian Schultz Jan 27 '18 at 00:04

1 Answers1

41

You need to add a prop to the <Line> components you are rendering in order to hide the "dots".

The props to add is the dot prop and you should provide it the value false in order to hide the dots.

So the line where you render the <Line> components should become:

<Line type='monotone' dataKey='pv' stroke='#8884d8' strokeWidth={1} dot={false} />
casieber
  • 7,264
  • 2
  • 20
  • 34