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>
Related
I'd like to put more than one line in the x-axis ticks in a bar chart, something like this:
But all the props I have to control what renders there, underneath each group of bars, is the dataKey, so all I can get with Recharts is:
This is just rendering one value from my data.
Ideally I'd like to be able to pass XAxis a prop to render this such as:
<XAxis dataKey="name" render={(value, dataPoint) => (
<CustomXAxisName>
<p>{value}</p>
<p>{dataPoint.total} Principals</p>
</CustomXAxisName>
)} />
but I can find no affordances for this. There is a more flexible prop to configure label, but that refers to one label for the whole axis.
Is there anyway to get this? I'm quite surprised that I can't find a natural way to do this, since Rechart since so flexible in other regards and I don't think this is such a weird idea.
Have you looked at https://recharts.org/en-US/examples/CustomizedLabelLineChart?
It shows how to put something diagonally in the x-axis, surely it can be used to put multiple lines.
It uses the tick={<CustomTick/>} prop to the XAxis component.
You can do it like:
const customizedGroupTick = (props: any) => {
const { index, x, y, payload } = props;
return (
<g>
<g>
<text x={x} y={y}>
data
</text>
<text x={x} y={y }>
data
</text>
</g>
</g>
);
};
and then
<XAxis
dataKey="Date"
axisLine={false}
tickLine={false}
scale="band"
tick={customizedGroupTick}
interval={0}
/>
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 want to plot data points on a composed chart, consisting of Bars and Lines, each having their own datasets, respectively.
For instance, I want each Bar to get a value from data.points, but Lines to get their value from an array of objects, data.content.
There's a difference in the two datasets, though they're both time series.
Example of data shape:
const data = {
points: [{
value: 80,
timestamp: 2010-01-09
}],
content: [{
date_posted: 2010-01-10,
content_id: 'xewr23r3g29w0'
}]
}
Would I be able to use these datasets separately per chart component or do I have to loop through the data and normalize it all somehow?
Also for reference is my code for the instance of ComposedChart.
<ComposedChart width={600} height={400} data={data} margin={margin} legendType="circle">
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timestamp" tickFormatter={this.formatDate} height={40} />
<YAxis />
<Legend iconType="circle" />
<Bar dataKey="content_id" barSize={20} fill="#413ea0" />
<Line name="Selected Period" type="monotone" dataKey="value" stroke={colors.blue} />
</ComposedChart>
You should be able to add the data attribute to Bar & Line separately:
<Bar data={data.content} ... />
<Line data={data.points} ... />
I had the issue while trying to combine 2 datasets for Area & Line, where Area does not accept the data attribute. I solved it like this:
<ResponsiveContainer width="100%" height={300}>
<ComposedChart
data={myAreaData}
...
>
<XAxis ... />
<YAxis ... />
<Legend layout="vertical" align="right" verticalAlign="middle" />
<Area
// does not accept 'data' attribute (!)
...
/>
<Line data={myLineData} ... />
</ComposedChart>
</ResponsiveContainer>
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