I'm using rechart , in that I've one problem. I'm using scatter chart. If the value of scatter chart is 0 scatter is displaying on top of x-axis(Y value 0), I don't want to display scatter when value is "0"
How can I do that , Some one please help.
Code:
const {ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data01 = [{x: 100, y: 200}, {x: 120, y: 0},
];
const ThreeDimScatterChart = React.createClass({
render () {
return (
<ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
<XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
<YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
<CartesianGrid />
<Tooltip cursor={{strokeDasharray: '3 3'}}/>
<Legend />
<Scatter name='A school' data={data01} fill='#8884d8' shape="star"/>
</ScatterChart>
);
}
})
ReactDOM.render(
<ThreeDimScatterChart />,
document.getElementById('container')
);
Output:
So in this image for 2nd scatter x value is 120 and y value is 0, So if y value is 0 . I don't want to diaplay scatter at all.
Please help me in this
Thanks
Related
What I am trying to do is the following:
But I can't manage to get it working. I was able to get the data to read in from 2 different data sources but it somehow does not render the second line properly on the x-axis.
Here is the example code:
import React from "react";
import { render } from "react-dom";
import { LineChart, Line, XAxis, YAxis, ReferenceLine } from "recharts";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const data = [];
const maxBudget = 300;
for (let i = 0; i < 20; i++) {
let d = {
day: i,
value: Math.random() * (maxBudget + 50) + 100
};
data.push(d);
}
const testline = [{ x: 0, y: 300 }, { x: 20, y: 0 }]
const App = () => (
<div style={styles}>
<LineChart
width={500}
height={300}
margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
>
<Line type="monotone" data={data} dataKey="value" stroke="#8884d8" dot={false} />
<Line type="linear" data={testline} dataKey="y" stroke="#FF3333" dot={false} strokeWidth={2} />
<XAxis dataKey="day" type="number" tickCount={11} />
<YAxis />
<ReferenceLine
y={maxBudget}
label={{
position: "center",
value: "Max budget"
}}
strokeDasharray="5 5"
/>
</LineChart>
</div>
);
render(<App />, document.getElementById("root"));
ok I m stupid. I just found it out by myself. Sometimes you don't see the wood for the trees for days :(.
The x value must be the same as defined in the XAxis so I had to change x:0 to day:0:
const testline = [{ day: 0, y: 300 }, { day: 20, y: 0 }]
Now it works
I am using recharts line chart it's working nicely but sometimes cut off top of the line.
Please check the snippet in jsfiddle.
const {LineChart, Line, XAxis, YAxis, ReferenceLine, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
{"Date":"16 May","Download":"40717"},{"Date":"17 May","Download":"39640"},{"Date":"18 May","Download":"52122"},{"Date":"19 May","Download":"51800"},{"Date":"20 May","Download":"49605"},{"Date":"21 May","Download":"45601"},{"Date":"22 May","Download":"43798"},{"Date":"23 May","Download":"36113"},{"Date":"24 May","Download":"278531"},{"Date":"25 May","Download":"323521"},{"Date":"26 May","Download":"154527"},{"Date":"27 May","Download":"119990"},{"Date":"28 May","Download":"100524"},{"Date":"29 May","Download":"83121"},{"Date":"30 May","Download":"60536"},{"Date":"31 May","Download":"58208"},{"Date":"01 Jun","Download":"304154"},{"Date":"02 Jun","Download":"538870"},{"Date":"03 Jun","Download":"213244"},{"Date":"04 Jun","Download":"130246"},{"Date":"05 Jun","Download":"104131"},{"Date":"06 Jun","Download":"72564"},{"Date":"07 Jun","Download":"69012"},{"Date":"08 Jun","Download":"96166"},{"Date":"09 Jun","Download":"89748"},{"Date":"10 Jun","Download":"80895"},{"Date":"11 Jun","Download":"155434"},{"Date":"12 Jun","Download":"81735"},{"Date":"13 Jun","Download":"56838"}
];
const SimpleLineChart = React.createClass({
render () {
return (
<LineChart width={600} height={300} data={data}
margin={{top: 0, right: 50, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="Date"/>
<YAxis/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="Download" stroke="#8884d8" />
</LineChart>
);
}
})
ReactDOM.render(
<SimpleLineChart />,
document.getElementById('container')
);
https://jsfiddle.net/rafiul_fiddle/tp0zL5s1/
Issue :
The issue is due to "Download":"40717"
Solution :
convert download -> string to int
// data={data.map(d => ({...d , "Download" : +d.Download }))
<LineChart
width={600}
height={300}
data={data.map(d => ({...d , "Download" : +d.Download }))} // <---- HERE
margin={{top: 0, right: 50, left: 20, bottom: 5}}>
WORKING DEMO
We are facing for some time problem with LabelList which is displayed over the elements of Scatter chart. If user is hovering over them, Tooltip is not displayed.
Code:
const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, LabelList, Tooltip, Legend} = Recharts;
const data = [{x: 100, y: 200, z: 200}, {x: 120, y: 100, z: 260},
{x: 170, y: 300, z: 400}, {x: 140, y: 250, z: 280},
{x: 150, y: 400, z: 500}, {x: 110, y: 280, z: 200}]
const SimpleScatterChart = React.createClass({
render () {
return (
<ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
<XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
<YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
<CartesianGrid />
<Tooltip cursor={{strokeDasharray: '3 3'}}/>
<Legend onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />
<Scatter name='A school' data={data} fill='#8884d8'>
<LabelList dataKey="x" />
</Scatter>
</ScatterChart>
);
}
})
ReactDOM.render(
<SimpleScatterChart />,
document.getElementById('container')
);
Example: https://jsfiddle.net/alidingling/gvsspn0h/
Once you will remove LabelList, it is working fine:
const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, LabelList, Tooltip, Legend} = Recharts;
const data = [{x: 100, y: 200, z: 200}, {x: 120, y: 100, z: 260},
{x: 170, y: 300, z: 400}, {x: 140, y: 250, z: 280},
{x: 150, y: 400, z: 500}, {x: 110, y: 280, z: 200}]
const SimpleScatterChart = React.createClass({
render () {
return (
<ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
<XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
<YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
<CartesianGrid />
<Tooltip cursor={{strokeDasharray: '3 3'}}/>
<Legend onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />
<Scatter name='A school' data={data} fill='#8884d8'>
</Scatter>
</ScatterChart>
);
}
})
ReactDOM.render(
<SimpleScatterChart />,
document.getElementById('container')
);
Example: https://jsfiddle.net/gt0uy92a/2/
Problem is, we need LabelList displayed as it is in a first example, we can't change the position, but Tooltip must be working properly.
<LabelList
dataKey="x"
style={{pointerEvents: 'none'}}
/>
will work for you.you can bind onMouseEnter event to LabelList component as well.
Solution was not so simple, it was little bit tricky, but still logical. If we can't do anything with way how is SVG rendering elements, can't use z-index, we still can set them opacity.
const CustomizedCircle = props => {
const {
cx, cy, fill, size, z,
} = props;
const radius = size / 70;
const value = z;
return (
<svg width={radius} height={radius} style={{overflow: 'visible'}}>
<text style={{fontWeight: FONT_WEIGHT, fontSize: FONT_SIZE}} x={cx} y={cy + 5} textAnchor="middle">{value}</text>
<circle style={{opacity: OPACITY}} cx={cx} cy={cy} r={radius} fill={fill} />
</svg>
);
};
So we are first rendering the text, then we render the circle and to see text beneath the circle we are setting the circle some kind of opacity.
I am leveraging VictoryCharts to add charts to my React app. I am trying to accomplish something like:
I combed through the docs and was not able to find a way to add Labels to a single bar chart.
Things I have tried
Nesting <VictoryLabel> andunder``` --> The axes show up and the docs recommend using VictoryGroup
Nesting <VictoryLabel> andunder``` --> VictoryGroup does not support VictoryLabel
Tried making a standalone <VictoryBar> & <VictoryLabel> and embedding it into <svg> --> Cannot see the chart contents on the page
This is the snippet I have right now:
import Box from '#material-ui/core/Box';
import React from 'react';
import { VictoryAxis, VictoryBar, VictoryChart, VictoryContainer, VictoryLabel, VictoryTheme } from 'victory';
const SampleChart = ({ stat=25, title = 'Sample' }) => (
<Box ml={5}>
<svg height={60} width={200}>
<VictoryLabel text={title.toLocaleUpperCase()} textAnchor='start' verticalAnchor='end' />
<VictoryBar
barWidth={10}
data={[{ y: [stat], x: [1] }]}
domain={{ y: [0, 100], x: [0, 1] }}
horizontal
labels={d => d.y}
labelComponent={
<VictoryLabel verticalAnchor='end' textAnchor='start' />
}
standalone
style={{ parent: { height: 'inherit' } }}
theme={VictoryTheme.material}
/>
</svg>
</Box>
);
ReactDOM.render(<SampleChart />, document.querySelector("#app"))
<div id='app'></div>
You could use an axis to this effect like so:
const CHART_WIDTH = 800;
const val = 28
function BarChart() {
return (
<div style={{ width: CHART_WIDTH }}>
<VictoryChart height={200} width={CHART_WIDTH}>
<VictoryAxis
dependentAxis
tickValues={[0,100]}
offsetY={190}
tickFormat={t => t===0 ? 'average age' : val}
style={{axis: { stroke: 'none'}}}
/>
<VictoryBar
barWidth={10}
data={[{ y: [45], x: [1] }]}
domain={{ y: [0, 100], x: [0, 1] }}
horizontal
/>
</VictoryChart>
</div>
);
}
https://codepen.io/anon/pen/RmaxOd?editors=0110#0
Not exactly what you wanted, but it gets the job done, and you can format the tick labels or provide custom components to make it look like your desired result.
I'am using React Recharts (http://recharts.org/en-US/) to show some chart data and I need to show formatted values nearby axis. Axis values is separated by spaces, for example 1 000 000 $. React Recharts is breaking values into separate lines
How to prevent breaking labels and show it fully at the same line?
Have you tried using a tick formatter? I tried to reproduce your problem but it couldn't.
Here is a re-purposed chart that is working just fine for me.
<ResponsiveContainer height={400} width="100%">
<ComposedChart
height={400}
width="100%"
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
>
<CartesianGrid />
<XAxis dataKey="name" />
<YAxis
unit="$"
dataKey="y"
tickFormatter={val => val.toLocaleString().replace(/,/g, " ")}
/>
<Scatter
name="A school"
data={[
{ name: "Jill", y: 3000000 },
{ name: "Eve", y: 5000000 },
{ name: "Audrey", y: 1000000 },
{ name: "Jaqueline", y: 7000000 }
]}
fill="#8884d8"
/>
<Tooltip />
</ComposedChart>
</ResponsiveContainer>
Let me know if misunderstood your question.
You can specify the width for tick
For example,
<YAxis tick={{ width: 75 }} tickFormatter={formatter} domain={yDomain} allowDataOverflow/>