I'm using recharts and trying to use the position property of the label object in the Bar component to set the label at the top-inner position but I couldn't find the correct approach for it.
code:
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={data}
>
<XAxis
type={"category"}
hide={false}
tickLine={false}
axisLine={false}
dataKey={"age"}
/>
<YAxis hide={true} dataKey={""} axisLine={false} tickLine={false} type={"number"} />
<Bar
dataKey="age"
background={{ fill: "theme.darkblue" }}
label={{ position: "top" }}
>
{data.bar.map((d: IData, index: number) => (
<Cell
key={index}
fill={"green"}
/>
))}
</Bar>
</BarChart>
</ResponsiveContainer>
current:
desirable:
Related
I was wondering If someone could help me design something like this using Recharts:
I have something simillar:
I tried to add more Axis, I modified the position of the bars, I put a padding but nothing works
Here is my code:
<BarChart
barGap={-55}
data={data}
height={300}
margin={{ top: 30, left: -15, right: 5, bottom: 20 }}
width={100}
>
<pattern height='8' id='pattern-stripe' patternTransform='rotate(45)' patternUnits='userSpaceOnUse' width='8'>
<rect fill='white' height='8' transform='translate(0,0)' width='4' />
</pattern>
<mask id='mask-stripe'>
<rect fill='url(#pattern-stripe)' height='100%' width='100%' x='0' y='0' />
</mask>
<CartesianGrid vertical={false} />
<XAxis dataKey='period' xAxisId={0} hide />
<XAxis allowDuplicatedCategory={false} dataKey='period' tickLine={false} xAxisId={1}>
{groupName && (
<ChartLabel position='insideBottomRight' style={{ transform: 'translateY(1rem)' }} value={groupName} />
)}
</XAxis>
<YAxis name={t('conceptionRate')} type='number'>
<ChartLabel
position='right'
style={{ transform: 'translateY(-45%)' }}
value={`${t('Rate')} (%)`}
/>
</YAxis>
<Tooltip content={<ReproductionTooltip />} cursor={{ fill: 'rgba(0, 0, 0, 0.1)' }} />
<ReferenceLine stroke={WUZZY} strokeDasharray='3 3' y={referenceValue} />
<Bar barSize={100} dataKey='bar' fill={GREEN} shape={<HashedBar />} xAxisId={1} />
<Bar barSize={100} dataKey='reference' fill={BLUE} shape={<HashedBar />} xAxisId={0} />
<Bar barSize={10} dataKey='labelList' fill={DARK_GRAY} xAxisId={0} />
</BarChart>
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 am building react nextJs application with tailwind-css and i am using Pie-charts of recharts. my charts used to work fine but i am not getting, how to increase the width and height of a chart?
// <ResponsiveContainer width="100%" height="100%">
<PieChart width={400} height={400}>
<Pie
data={payments.payments}
cx="50%"
cy="50%"
labelLine={true}
label={renderCustomizedLabel}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{payments.payments.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
// </ResponsiveContainer>
and if i use tailwind grid system it do not apply changes. Also how position it on the screen using screen sizes in tailwind?
I think you can try this.
<div className="w-64 h-48 use tailwind classes here">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={payments.payments}
cx="50%"
cy="50%"
labelLine={true}
label={renderCustomizedLabel}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{payments.payments.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
you can change outerRadius property to increase the piechart size
I am using recharts to display a composite chart.
const Chart = ({ responseAverage }) => {
responseAverage = responseAverage.sort((a, b) => a.label - b.label);
return (
<ResponsiveContainer width={700} height={400}>
<ComposedChart
data={responseAverage}
>
<CartesianGrid horizontal={false} strokeDasharray="4 4" />
<XAxis scale="point" dataKey="label" />
<YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} height={20} />
{/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
<Bar dataKey="count" barSize={40} fill="#AAE5F9" />
<Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
{/* <LabelList dataKey="name" position="insideTop" /> */}
</ComposedChart>
</ResponsiveContainer>
);
};
In this I am specifying the barSize. But it dosent work in all cases. I want the Bar size to calculate automatically based on the number of values
Is there any workaround for this problem ?
Any help would be really thankfull
If you want to remove the gaps between the bars, you need to remove the barSize parameter from the Bar and add the barCategoryGap={0} parameter to the ComposedChart component.
const Chart = ({ responseAverage }) => {
responseAverage = responseAverage.sort((a, b) => a.label - b.label);
return (
<ResponsiveContainer width={700} height={400}>
<ComposedChart
barCategoryGap={0}
data={responseAverage}
>
<CartesianGrid horizontal={false} strokeDasharray="4 4" />
<XAxis scale="point" dataKey="label" />
<YAxis label={{ value: 'No.Of Employees', angle: -90, position: 'insideLeft' }} tick={false} height={20} />
{/* <Tooltip cursor={false} content={<CustomTooltip teamData={teamData} />} /> */}
<Bar dataKey="count" fill="#AAE5F9" />
<Line connectNulls={true} strokeWidth={3} dot={false} type="monotone" dataKey="count" stroke="#3080ED" />
{/* <LabelList dataKey="name" position="insideTop" /> */}
</ComposedChart>
</ResponsiveContainer>
);
};
If as a result, thin lines remain between the bars, then you can do this:
<Bar dataKey="count" fill="#AAE5F9" stroke="#AAE5F9" strokeWidth={2} />
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