How to keep all activeDots always “active” rather than hovering over data points (recharts)

136
April 22, 2019, at 10:50 PM

I have the package "recharts" (latest version 1.5.0) from npm installed and properly loaded with data on my react project.

Data lines and chart are always active. I need all the "activeDots" to always be active rather than active only when hovering over data points.

   <LineChart
        width={240}
        height={180}
        data={data}
        margin={{top: 15, right: 10, left: 10}}
      >
         <CartesianGrid horizontal={false} />
         <XAxis
          dataKey="x"
          stroke="rgba(0,0,0,0.4)"
          strokeWidth=".4"
          scale="time"
          type="number"
          domain={['auto', 'auto']}
          tick={{fontSize: 12}}
          tickFormatter = {(unixTime) => moment(unixTime).format('MMM D')}
         />
         <YAxis hide={true} />
         <Tooltip content={<CustomTooltip/>}/>
         <Line
          connectNulls={false}
          type="linear"
          dataKey="pv"
          stroke="#3F99F7"
          strokeWidth="3"
          activeDot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 3, r: 11, className: "boxShadow" }}
          dot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 2, r: 7, className: "boxShadow" }}
         />
      </LineChart>

not hovering over data points:

hovering over data point:

Answer 1

This looks about like what you want (the purple line):

const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = 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 SimpleLineChart = React.createClass({ 
	render () { 
  	return ( 
    	<LineChart width={600} height={300} data={data} 
            margin={{top: 5, right: 30, left: 20, bottom: 5}}> 
       <XAxis dataKey="name"/> 
       <YAxis/> 
       <CartesianGrid strokeDasharray="3 3"/> 
       <Tooltip/> 
       <Legend /> 
       <Line  
        type="monotone"  
        dataKey="pv"  
        stroke="#8884d8"  
        activeDot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 3, r: 11, className: "boxShadow" }} 
          dot={{ fill: '#3F99F7', stroke:'#fff', strokeWidth: 2, r: 7, className: "boxShadow" }} 
        /> 
       <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> 
      </LineChart> 
    ); 
  } 
}) 
 
ReactDOM.render( 
  <SimpleLineChart />, 
  document.getElementById('container') 
);
body { 
  margin: 0; 
} 
 
#container { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  padding: 10px; 
  width: 800px; 
  height: 800px; 
  background-color: #fff; 
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> 
<script type="text/javascript" src="https://npmcdn.com/react@15.6.2/dist/react-with-addons.min.js"></script> 
<script type="text/javascript" src="https://npmcdn.com/react-dom@15.6.2/dist/react-dom.min.js"></script> 
<script type="text/javascript" src="https://npmcdn.com/prop-types/prop-types.min.js"></script> 
<script type="text/javascript" src="https://npmcdn.com/recharts/umd/Recharts.min.js"></script> 
<div id="container"> 
  <!-- This element's contents will be replaced with your component. --> 
</div>

Which is the same code more or less that you have in your example, which leads me to believe there may be something more going on in your code that you haven't located.

READ ALSO
select.prev(&ldquo;.class&rdquo;).val(); returning undefined value

select.prev(“.class”).val(); returning undefined value

I am trying to return the value linked to a class within the html pageIt doesn't return the value stated, it returns undefined

150
$.Connection cannot initialize my hub, it&#39;s always undefined

$.Connection cannot initialize my hub, it's always undefined

I am unable to get my hub to initialize in the javascript file:

112
JQuery basic text replacement on click/change using .parent() and .closest() [on hold]

JQuery basic text replacement on click/change using .parent() and .closest() [on hold]

I have this dropdown styled with ul and I need to replace the heading with the very first content inside the <span class=“parent”>

131
How to efficiently sort a Multidimensional Arrray

How to efficiently sort a Multidimensional Arrray

I was given a task to sort multidimensional array into ascending order without using the pre-made functions in the Array class (such assort)

142