I am just getting started learning React and React Native for Web these days. I tried to make a LineChart by using Recharts Library. I expected that the all XAxis name should be shown in the graph; 10시, 11시 ... 24시.
This is my LineData. name is XAsis label name and UV is its value.
let lineData = [
{ name: "10시", uv: 44 },
{ name: "11시", uv: 32 },
{ name: "12시", uv: 14 },
{ name: "13시", uv: 14 },
{ name: "14시", uv: 14 },
{ name: "15시", uv: 34 },
{ name: "16시", uv: 4 },
{ name: "17시", uv: 54 },
{ name: "18시", uv: 14 },
{ name: "19시", uv: 0 },
{ name: "20시", uv: 34 },
{ name: "21시", uv: 54 },
{ name: "22시", uv: 14 },
{ name: "23시", uv: 24 },
{ name: "24시", uv: 34 },
];
In the Linechart I am using ResponsiveContainer, XAsis, and YAxis for customizing the graph.
This is my code
<ResponsiveContainer width="100%" height={250}>
<LineChart
data={lineData}
margin={{ top: 20, right: 0, left: -15, bottom: 5 }}
>
<Line type="monotone" dataKey="uv" stroke="red" />
<XAxis
dataKey="name"
tick={{ fontSize: 10 }}
// width="-100"
// ticks={[
// 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
// ]}
// domain={[10, 24]}
/>
<YAxis tick={{ fontSize: 10 }} ticks={[0, 10, 20, 30, 40]} />
</LineChart>
</ResponsiveContainer>
What I mentioned above, the XAsis name should be shown in the graph all of them but part of name only show like this.
10시, 12시, 14시, 16시, 18시, 20시, 22시, 23시 are disapeared.
Could you help me with what part do I missing or wrong?
I would be really appreciated your help!
I think because you set the width 100% for ResponsiveContainer and you are rendering this graph in narrow screen, Recharts automatically cut some x-axis values.
Have you tried adding interval props for XAxis?
If you set interval={0} in XAxis component, you can see all the x-axis values in the screen even it is not wide enough.
<XAxis
dataKey="name"
tick={{ fontSize: 10 }}
interval={0}
/>
Related
I am having this Apex chart in my react app ,
What I want to do is add more space between the x-axis label which is the month labels and the series name below it (Session Duration, Page Views, Total Visits). How can I achieve that
This is my code below
............................................................................................................................
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: "Session Duration",
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
},
{
name: "Page Views",
data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
},
{
name: 'Total Visits',
data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
}
],
options: {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [5, 7, 5],
curve: 'straight',
dashArray: [0, 8, 5]
},
title: {
text: 'Page Statistics',
align: 'left'
},
legend: {
tooltipHoverFormatter: function(val, opts) {
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
}
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
'10 Jan', '11 Jan', '12 Jan'
],
},
tooltip: {
y: [
{
title: {
formatter: function (val) {
return val + " (mins)"
}
}
},
{
title: {
formatter: function (val) {
return val + " per session"
}
}
},
{
title: {
formatter: function (val) {
return val;
}
}
}
]
},
grid: {
borderColor: '#f1f1f1',
}
},
};
}
render() {
return (
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="line" height={350} />
</div>
);
}
}
Based on some fiddling around with the Appchart demo, found 2 options that seem to provide result here.
Both use the legend key inside options, which you have in your code
You can add specific height to the legend container
legend: {
height: 100
}
This will allow you to add margin to each legend.
legend: {
itemMargin: {
horizontal: 20
}
}
Hopefully someone with more experience with AppChart can provide a better solution but till then you can look into these.
I wants to know that if there is any way to plot unequal scale of Y Axis in the Recharts Library of React.js
Like in the example in the image
Link for the image: https://i.stack.imgur.com/ZyF49.png
it is an example of Stacked Bar Charts
Area of all the bars will be same but their values on y axis will be different
like for red it will be 0 - 70
yellow 70 - 80
lightgreen 80 - 90
green 90 - 100
but their height should be same only their value will be different
const data = [
{
name: "Page A",
uv: 10
},
{
name: "Page B",
uv: 20
},
{
name: "Page C",
uv: 30
},
{
name: "Page D",
uv: 40
},
{
name: "Page E",
uv: 50
},
{
name: "Page F",
uv: 60
},
{
name: "Page G",
uv: 70
},
{
name: "Page H",
uv: 80
},
{
name: "Page I",
uv: 90
},
{
name: "Page J",
uv: 100
}
];
export default function App() {
return (
<ComposedChart
width={500}
height={400}
data={data}
>
<CartesianGrid stroke="#f5f5f5" />
<XAxis dataKey="name" scale="band" />
<YAxis domain={[0,100]} />
<Tooltip />
<Legend />
<Bar dataKey="uv" barSize={20} fill="#413ea0" />
</ComposedChart>
);
}
so basically i have this data:
const bodyWeightAndFatData = [
{
name: 'salim',
style:'#57c0e8',
category:'Body Weight',
data: [
{ day: 23, value: 100 },
{ day: 24, value: 101 },
{ day: 25, value: 104 },
{ day: 26, value: 107 },
{ day: 27, value: 108 },
{ day: 28, value: 105 },
{ day: 29, value: 106 },
{ day: 30, value: 107 },
{ day: 31, value: 107 },
],
},
{
name: 'salim',
style:'pink',
category:'Fat Percentage',
data: [
{ day: 23, value: 134 },
{ day: 24, value: 135 },
{ day: 25, value: 131 },
{ day: 26, value: 133 },
{ day: 27, value: 137 },
{ day: 28, value: 131 },
{ day: 29, value: 130 },
{ day: 30, value: 139 },
{ day: 31, value: 138 },
],
},
];
coming from one component. and i'm drawing a rechart from another component like this:
<div className={styles.outer}>
<div className={styles.inner}>
<p className={styles.title}>Average Measurments</p>
<ResponsiveContainer width="95%" height={300}>
<LineChart >
<CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
<XAxis yAxisId="right" tickLine={false} axisLine={false} dataKey="day" allowDuplicatedCategory={false} />
<YAxis tickCount={5} axisLine={false} dx={-15} dataKey="value"/>
<Tooltip/>
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
props.data.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{props.data.map(s => (
<Line dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
</LineChart>
</ResponsiveContainer>
</div>
</div>
the result is working great its drawing the data and everything, but what i'm stuck on is that i need two Y axis to be shown instead of just one which is present. i have looked it up but i don't know how to create it using .map can anyone help?
Here is how I did it.
const bodyWeightAndFatData = [
{
name: 'salim',
style:'#57c0e8',
category:'Body Weight',
data: [
{ day: 23, value: 100 },
{ day: 24, value: 101 },
{ day: 25, value: 104 },
{ day: 26, value: 107 },
{ day: 27, value: 108 },
{ day: 28, value: 105 },
{ day: 29, value: 106 },
{ day: 30, value: 107 },
{ day: 31, value: 107 },
],
},
{
name: 'salim',
style:'pink',
category:'Fat Percentage',
data: [
{ day: 23, value: 134 },
{ day: 24, value: 135 },
{ day: 25, value: 131 },
{ day: 26, value: 133 },
{ day: 27, value: 137 },
{ day: 28, value: 131 },
{ day: 29, value: 130 },
{ day: 30, value: 139 },
{ day: 31, value: 138 },
],
},
];
export default function App() {
return (
<div >
<div >
<p>Average Measurments</p>
<ResponsiveContainer width="95%" height={300}>
<LineChart >
<CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
<XAxis tickLine={false} axisLine={true} dataKey="day" allowDuplicatedCategory={false} />
<YAxis yAxisId="left" tickCount={5} dx={-15} dataKey="value"/>
<YAxis yAxisId="right" orientation="right" tickCount={5} dx={-15} dataKey="value"/>
<Tooltip/>
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
bodyWeightAndFatData.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{bodyWeightAndFatData.map(s => (
<Line yAxisId="left" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
{bodyWeightAndFatData.map(s => (
<Line yAxisId="right" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
</LineChart>
</ResponsiveContainer>
</div>
</div>
);
}
Two axis one on left and one on right.
I've built a bubble chart on quadrant graph using google-charts in reactjs but I can only had two labels on my axis and I need four.
I've tried fiddling with the code but unsuccessfully. I don't want to append dummy data and additional series elements. Is overlay the only option to add axis?
<Chart
width={"800px"}
height={"600px"}
chartType="BubbleChart"
loader={<div>Loading Chart</div>}
data={[
["Age", "Weight", "4", "Group", "Size"],
["Name", -12, 34, 1, 7],
["Name", -5.5, 6, 1, 8],
["Name", 22, 35, 1, 4],
["Name", 14, 4, 2, 5],
["Name", -5, -5, 2, 6],
["Name", 15, 34, 3, 1],
["Name4", 7, -21, 4, 22]
]}
options={{
bubble: {},
chartArea: { left: 20, top: 0, width: "90%", height: "95%" },
colors: ["red", "green", "yellow", "blue"],
hAxis: {
title: "Low Importance",
ticks: "none",
baseline: 0,
ticks: ["none"],
minValue: -50,
gridlines: { count: 0 },
maxValue: 50
},
vAxis: {
title: "Low Urgency",
baseline: 0,
ticks: ["none"],
minValue: -50,
gridlines: { count: 0 },
maxValue: 50
},
legend: "none"
}}
/>;
As you can see in the graph below, I can only get left and bottom labels but not top and right. Any ideas how I could achieve that using google-chart library for reactjs?
I am here because I am trying to build a chart using recharts library and after many different attempts to get the desired result I still do not get it.
My target graphic should look similar to this:
I tried many different things like bar charts, stacked bar charts, composed charts, error bars, etc and I can't get my desired result.
The closest result I get so far is this:
But in the moment I try to align the black bars on top of the orange ones (with the stackId prop) I get this:
Does someone know if I can get the graphic I want with this library? Any help would be appreciated.
The code of the second graphic is this:
const customData = [
{ name: 'food', uv: 1000, pv: [1001,2000], amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 2300, pv: [2301,3700], amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 2200, pv: [2201,3500], amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 1800, pv: [1801,3300], amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<ComposedChart width={400} height={400} data={customData}>
<XAxis />
<YAxis />
<Bar dataKey="uv" fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" direction="y" />
</Bar>
<Bar dataKey="pv">
</Bar>
</ComposedChart>
</div>
);
}
}
The code of the third graphic is the same but I add the prop stackId="0" to both bars.
Thanks in advance to anyone that can help me.
Finally I found the solution by my self.
While googling the web I found this Rechart's issue which linked me to this other one. There I found a jsfiddle demo, with that code and a few changes I got the result I wanted.
This is the final result:
And this is the code:
const data = [
{ name: 'food', uv: 2000, pv: 1600, amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
{ name: 'cosmetic', uv: 3300, pv: 2000, amt: 6500, time: 2, uvError: 120, pvError: 50 },
{ name: 'storage', uv: 3200, pv: 1398, amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
{ name: 'digital', uv: 2800, pv: 2400, amt: 4000, time: 4, uvError: 100, pvError: 30 },
];
class POC extends React.Component {
render() {
return (
<div className="bar-chart-wrapper">
<BarChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis xAxisId={0} />
<XAxis xAxisId={1} hide/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Bar dataKey="uv" xAxisId={1} fill="#000" />
<Bar dataKey="pv" xAxisId={0} fill="#ff7300">
<ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" />
</Bar>
</BarChart>
</div>
);
}
}
I hope this helps someone else too.
Thanks !