What code changes would I need to make to replace 1 with YES and 0 with NO?
It seems like it should be possible from the examples on http://recharts.org/ or just finding it from a general search, however I haven't found anything that resolves this.
The only part of the code that is I didn't post here are the imports at the top of the file.
Here is the graph
const data = [
{yl: "YES",name: "p1",'X axis': 1,},
{yl: "YES",name: "p2",'X axis': 1,},
{yl: "NO" ,name: "p3",'X axis': 0,},
];
export const esChart: React.FC = () => {
return (
<LineChart
width={500}
height={300}
data={data}
margin={{
top: 100,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis tickCount={1} />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey='X axis'
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
</LineChart>
);
}
export default esChart;
You need to add tickFormatter prop to customize the same. (Working codesandbox)
<YAxis tickCount={1} tickFormatter={(...allArgs)=>{ console.log(allArgs) if(allArgs[0] ===0){ return "Y" }else{ return "N" } }}/>
Related
I want to show this percentage after the bar chart. I have made this with react recharts
Check photo
<BarChart
width={window.innerWidth < 900 ? 280 : 380}
height={200}
data={data}
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
layout='vertical'
>
{/* <CartesianGrid strokeDasharray="3 3" /> */}
<XAxis type='number' tick={false} axisLine={false} />
<YAxis type='category' dataKey='name' width={window.innerWidth < 900 ? 110 : 120}
stroke="#fff" style={{ fontSize: '14px' }} />
<Bar dataKey="pv" stackId="a" fill="#4EDCF0" />
</BarChart>
You can use cutom tooltips to write your own logic to show percentage
Working example if u want to take a look - https://codesandbox.io/s/epic-cache-kx8ze2?file=/src/App.js
<BarChart
width={500}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip content={<CustomTooltip />} />
<Legend />
<Bar dataKey="amt" barSize={20} fill="#8884d8" />
</BarChart>
Custom tooltip
const CustomTooltip = ({ active, payload, label }: any) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}</p>
<p> percentage : {percentage (payload)}</p>
</div>
);
}
return null;
};
the function to calculate the percentage
const percentage = (data)=>{
console.log(data[0].value);
const total = 10000
const calcualtion = (data[0].value/total) * 100 // total to be replaced by the totla value
return calcualtion
}
hope it helps
I have a scattered and a line chart type. I am trying to sync between these charts type.
I have these problems:
the tooltip does not appear in scattered chart when I hover to line chart, but the "cursor line" sync
when I hover in the scattered chart, there is no sync between line and scattered chart
the details can be seen here:
here is the code I have
const Chart = ({ type, matrixData, index, diagcodeLabel }) => {
const getMinValue = Math.min(...matrixData.map((data) => data[type]));
const getMaxValue = Math.max(...matrixData.map((data) => data[type]));
return (
<div className="chart">
<div className="title">{type}</div>
<ResponsiveContainer key={"responsiveInformation"} width="100%" height={170}>
{type === "DIAGCODE" ? (
<ScatterChart
syncId="chart"
width={1200}
height={400}
margin={{
top: 20,
right: 20,
bottom: 20,
left: 20,
}}
>
<YAxis
type="number"
dataKey="dLevel"
tickFormatter={(value) => {
return Object.keys(diagcodeLabel).find((k) => diagcodeLabel[k] === value);
}}
/>
<Tooltip />
<CartesianGrid strokeDasharray="3 3" className="chartGrid" />
<Legend layout="vertical" content={<CustomLegend />} />
<Scatter name="DiagCode" data={matrixData} fill="#8884d8" shape={"circle"}>
{matrixData.map((entry, index) => {
return (
<Cell
key={"cell-${index}"}
fill={entry.IsLockout === "Lockout" ? "#5fb0ff" : "rgb(172, 45, 45)"}
/>
);
})}
</Scatter>
</ScatterChart>
) : (
<LineChart
syncId="chart"
width={500}
height={50}
data={matrixData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" className="chartGrid" />
<YAxis dataKey={type} domain={[getMinValue, getMaxValue]} />
<Tooltip />
<Line type="monotone" dataKey={type} stroke="#8884d8" activeDot={{ r: 8 }} />
</LineChart>
)}
</ResponsiveContainer>
</div>
);};
Is there a way I could sync them ?
I think this kind of feature is underdevelopment https://github.com/recharts/recharts/issues/1541
So, I ended up using composed charts (Scattered and Bar) https://recharts.org/en-US/examples/LineBarAreaComposedChart and I set the fillOpacity transparent for Bar. but I am not sure if it is the best workaround...
I have a line chart that displays several lines of data, everything works as expected, the only issue is that when the chart is displayed there is huge blank space inside the chart itself, I have been checking the data range I am sending but seems fine, all values appear, have been also checking for some styling issue but I dont seem to see anything strange, sadly the docs are very limited for the styling regard that I am not able yet to find a solution.
<ResponsiveContainer aspect={10.0 / 3.0}>
<LineChart margin={{left: 30, top: 30}} width={730} height={300}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="month"
type="category"
allowDuplicatedCategory={false}
allowDecimals={false}
/>
<YAxis
padding={{top: 28}}
interval={0}
ticks={range}
tickSize={2}
tickFormatter={val => getLocaleString(val)}
label={{
value: 'EUR',
position: {x: 40, y: 0},
className: 'chart__label',
}}
/>
<Tooltip />
<Legend
onMouseOver={mouseOverLegend}
onMouseLeave={mouseLeaveLegend}
/>
{data.map((data, index) => {
const namePostfix = `EUR ${yearsDataChart[index]}`
const stroke =
hoverIndex === index || !legendHover
? colorsChart[index]
: COLOR_HOVER
const costName = `${translate('cost')} ${namePostfix}`
const revenueName = `${translate('revenue')} ${namePostfix}`
return [
<>
<Line
dataKey="revenue"
data={data}
name={revenueName}
stroke={stroke}
/>
<Line
dataKey="cost"
data={data}
name={costName}
stroke={
hoverIndex === index || !legendHover
? colorsChartProvider[index]
: stroke
}
/>
</>,
]
})}
</LineChart>
</ResponsiveContainer>
the result is :
hope someone has an idea of what could be the issue here
<BarChart
isAnimationActive={false}
width={400}
height={200}
data={value}
margin={{
top: 5, right: 30, left: 20,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="x"
/>
<YAxis label={{ value: `no.`, angle: -90, position: 'insideBottomLeft' }} />
<Tooltip
content={<CustomTooltip />}
/>
<Bar dataKey="y" /* fill={colors[0]} */ >
</BarChart>
My data on x axis is numerical [0,1,2,3...] but I want my ticks to be [A1,A2,A3...]
you can use formatter attribute, here is an example
<XAxis dataKey="x" tickFormatter={(t) => `A${t+1}`} />
Change your value key
const value = [
{
x: 'A1', ......
},
{
x: 'A2', .....
},
]
Or you can use this:
<XAxis
dataKey="x"
tickFormatter={(t) => {
const count = parseInt(t) + 1
return 'A'+ count;
}
}
/>
I have a line chart with two lines.
For one of the lines, I want to use a custom svg to represent it in the chart. See screenshot.
How can I do this?
Here's my code:
<LineChart
// width={800}
onClick={() => {}}
height={300}
data={this.state.data}
// margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<XAxis dataKey="to_char" />
<YAxis
tickFormatter={value => {
let val = value / 1000000;
return `$${new Intl.NumberFormat("en").format(val)}m`;
}}
/>
<CartesianGrid strokeDasharray="3" vertical={false} />
<Tooltip />
<Legend />
<Line
dot={false}
type="monotone"
dataKey="predictedprice"
stroke="#1C85E8"
activeDot={{ r: 8 }}
name="True Home Estimate™"
strokeWidth={3}
/>
<Line
type="monotone"
name="Sold Price"
dataKey="soldprice"
stroke="#82ca9d"
shape="star"
/>
</LineChart>
You should be able to add the shape property to ReferenceDot or ReferenceArea - I'm not sure if the shape properly can be used on regular properties, but here's a link I found to a GitHub conversation that talks more about this:
https://github.com/recharts/recharts/issues/922