I have a chart where the X axis shows numbers, but I only want this numbers show on the tooltip, not in the axis. What I mean is the numbers 3, 5, 4 shouldn't be displayed. The problem is that if I hide the axis then the text Labels doesn't show.
<XAxis dataKey="x">
<Label value="Labels" position="bottom" />
</XAxis>
Use tick={false} as a prop to <XAxis> component, in your case:
<XAxis dataKey="x" tick={false}>
<Label value="Labels" position="bottom" />
</XAxis>
Docs
JSFiddle Example without X axis values(ticks)
Related
I need a help with recharts library. I need to build the chart below:
As you can see, there is only 15 bars but the line chart is made out of thousands points. Is there a way to use composed chart, were one Bar component is not connected with Line component?
This is the closest i could make:
Found the solution: Apparently, you can use have multiple x-axis. I have provided the bar chart data for ComposedChart component, made 2 XAxis components and gave them xAxisId. One of the XAxis (the one for line chart) is hidden with property hide={true}.
Line component has data property, where I passed the line chart data. Please find the code below:
<ComposedChart data={barData}>
<XAxis xAxisId={1} />
<XAsis xAxisId={2} hide={true} />
<Tooltip />
<Legend />
<Bar xAxisId={1} dataKey="pv" barSize={20} />
<Line xAxisId={2} data={lineData} dataKey="uv" dot={false} stroke="#000000" />
</ComposedChart>
Here is the result:
I'm trying to change text Legend colors in recharts
By default, legend takes colors based on lines/bars :
And I want :
Seems like what I want was the previous default setting, because doc explain us how to have colorful legend texts : https://codesandbox.io/s/legend-formatter-rmzp9
https://recharts.org/en-US/api/Legend
I can't find how to do the reverse
Ran into the same issue, solution is to the use the formatter:
<Legend
formatter={(value, entry, index) => <span className="text-color-class">{value}</span>}
/>
The span returned from this function only renders in place of the text portion of the legend, the coloured shapes (circles in your example) aren't effected.
You can change the stroke prop of both Line components as follows. Codesandbox example given here.
stroke="#FF0000" refers to red color and stroke="#000000" refers to black color.
<Line
type="monotone"
dataKey="pv"
stroke="#FF0000"
activeDot={{ r: 8 }}
/>
<Line type="monotone" dataKey="uv" stroke="#000000" />
Hope this would answer your question.
I am using React Recharts for my visualization, however, I am having a challenge displaying a line chart with different corresponding object contents. I have JSON object, I would like to have the months of subcriptions as my XAxis and total of annual_payment moves as my YAxs. Ideally, the image below is representation of how I want to display my data. Instead of week, I need to display months. Thank you
Ciao, at first you have to manipulate your subscriptions array:
lets say you want to show month of date_purchased in your XAxis. So you can do:
subscriptions_manipulated = subscriptions.map(el => {
el.date_purchased = new Date(el.date_purchased).getMonth() + 1 // + 1 because for January getMonth returns 0...
return el;
});
Then you can make your graph:
<LineChart data={subscriptions_manipulated}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date_purchased" interval="preserveStartEnd" />
<YAxis />
<Tooltip/>
<Legend />
<Line name="annual_payment" type='monotone' dataKey='annual_payment' />
</LineChart>
I am using recharts in my project. The chart that I'm using is CustomizedLabelLineChart. My problem is that the values that I'm using for X-axis are too long, so I need to kinda remove them from the X-axis but still have them in the chart-hoverover tooltip. How to do that? In other words, I need to have some extra data added to each point/hoverover tooltip.
You can create a custom tooltip component and pass it as the prop called content in , here is an example with custom tooltip called
<CustomizedLabelLineChart width={600} height={300} data={data}>
<XAxis dataKey="name" tick={<CustomAxisTick />} />
<YAxis />
<Tooltip content={<CustomTooltip />}/>
...
</CustomizedLabelLineChart>
Reference: http://recharts.org/en-US/guide/customize
I'm working on a react-vis chart that will dynamically update the data that is displayed when a user clicks on/off the legend item for that series.
If a user clicks clicks off all of the series the JSX that I render essentially looks like this:
<div>
<XYPlot
xDomain={paretoOrder}
margin={{left: 150, bottom: 150}}
width={450}
height={450}
xType="ordinal"
stackBy="y"
>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis
tickLabelAngle={-45}
/>
<YAxis
tickFormat={ tick => translator.formatTime(tick, {hideZero: true})}
/>
<VerticalBarSeries
data={[]}
/>
</XYPlot>
<DiscreteColorLegend
orientation="horizontal"
width={300}
items={legendItems}
onItemClick={this.onLegendClick}
/>
</div>
I would expect that this would still render the axes, the grid lines, etc, but the entire chart is removed from the DOM instead. How do I render a chart with empty data but keep the axes, grid lines, etc in the DOM?
Add dontCheckIfEmpty prop (as true, default is false) to <XYPlot> tag.
<XYPlot
dontCheckIfEmpty
>
<XAxis/>
<YAxis/>
<VerticalBarSeries
data={data}
/>
<VerticalGridLines />
<HorizontalGridLines />
</XYPlot>