I have a Recharts LineChart with numeric x-Axis. I would like to draw a ReferenceLine on an arbitrary x-value, but if the x property of ReferenceLine is not any of the x values in my data, it is not showing.
with
const data = [{ x: 1, y: 3 }, { x: 1.5, y: 4 }, { x: 2, y: 3 }];
...
<ReferenceLine x={1.7} stroke="green" label="actual" alwaysShow={true} />
nothing is showing, where as
const data = [{ x: 1, y: 3 }, { x: 1.5, y: 4 }, { x: 2, y: 3 }];
...
<ReferenceLine x={1.5} stroke="green" label="actual" alwaysShow={true} />
works.
I have built the sandbox here:
https://codesandbox.io/s/recharts-playground-xxwnl
Is there a way to make the ReferenceLine show for every x?
The problem was that I had not explicitly set the XAxis type to number. After changing
<XAxis dataKey="x" />
this to
<XAxis type="number" dataKey="x" />
it's behaving as expected
Related
I am new to using the Formidable Victory-Charts via victory native. I am learning to use it on a react-native app. Initially, I had the following graph that used the following code:
render() {
return (
<View>
<VictoryChart
domainPadding={{ y: 10 }}
containerComponent={
<VictoryCursorContainer
cursorDimension="x"
cursorLabel={({ datum }) =>
`${datum.x}, ${Math.round(datum.y, 2)}`
}
/>
}
>
<VictoryArea
style={{
data: {stroke: "#4074E6}
}}
data={[
{x: new Date(1982, 1, 1), y: 125,y0: 0 },
{x: new Date(1987, 1, 1), y: 257,y0: 0 },
{x: new Date(1993, 1, 1), y: 345,y0: 0 },
{x: new Date(1997, 1, 1), y: 515,y0: 0 },
{x: new Date(2001, 1, 1), y: 132,y0: 0 },
{x: new Date(2005, 1, 1), y: 305,y0: 0 },
{x: new Date(2011, 1, 1), y: 270,y0: 0 },
{x: new Date(2015, 1, 1), y: 470, y0: 0 }
]} />
</VictoryChart>
</View>
);
This Generates a graph which looks like this:
Initial Graph plot without gradient
Then I was playing around to add gradient to the backfill of the graph:
render() {
return (
<View>
<VictoryChart
domainPadding={{ y: 10 }}
containerComponent={
<VictoryCursorContainer
cursorDimension="x"
cursorLabel={({ datum }) =>
`${datum.x}, ${Math.round(datum.y, 2)}`
}
/>
}
>
<Defs>
<LinearGradient id="blueGrad" x1="0" y1="1" x2="0" y2="0">
<Stop offset="0" stopColor="white" stopOpacity="1" />
<Stop offset="1" stopColor="#3592FF" stopOpacity="1" />
</LinearGradient>
</Defs>
<VictoryArea
style={{
data: {stroke: "#4074E6", fill:"url(#blueGrad)"}
}}
data={[
{x: new Date(1982, 1, 1), y: 125,y0: 0 },
{x: new Date(1987, 1, 1), y: 257,y0: 0 },
{x: new Date(1993, 1, 1), y: 345,y0: 0 },
{x: new Date(1997, 1, 1), y: 515,y0: 0 },
{x: new Date(2001, 1, 1), y: 132,y0: 0 },
{x: new Date(2005, 1, 1), y: 305,y0: 0 },
{x: new Date(2011, 1, 1), y: 270,y0: 0 },
{x: new Date(2015, 1, 1), y: 470, y0: 0 }
]} />
</VictoryChart>
</View>
);
This is the output that I got: Gradient Graph plot
You can see in the output that the x-axis is pretty messed up. If I remove the Defs section it will not add the gradient and function properly. The existence of Defs is causing it to render improperly. Is there any solution to this? or am I doing something wrong?
Here is my data
const DATA = [
{
name: '0',
data: [
{x: "07/16/20 01:50", y: "0.397"},
{x: "07/16/20 02:51", y: "0.480"},
{x: "07/16/20 02:52", y: "0.416"},
{x: "07/16/20 02:53", y: "0.396"},
{x: "07/16/20 02:54", y: "0.418"},
{x: "07/16/20 02:55", y: "0.390"}
]
},
{
name: '1',
data: [
{x: "07/16/20 04:54", y: "0.384"},
{x: "07/16/20 05:57", y: "0.432"}
],
}
]
I am trying to plot these points but failing.
In your data structure, you need to have the general array of data objects only. Here, you are trying to have sub data arrays, that's probably why the graphs won't display.
I assumed you wanted to have a simple line graph, so tweaking your data array, it could result into this:
const customData = [
{x: "07/16/20 01:50", y: "0.397"},
{x: "07/16/20 02:51", y: "0.480"},
{x: "07/16/20 02:52", y: "0.416"},
{x: "07/16/20 02:53", y: "0.396"},
{x: "07/16/20 02:54", y: "0.418"},
{x: "07/16/20 02:55", y: "0.390"},
{x: "07/16/20 04:54", y2: "0.384"},
{x: "07/16/20 05:57", y2: "0.432"}
]
Where x is the label to use on the XAxis, y the data for name: '0' in your data structure, and y2 for name: '1'.
The resulted graph would look like this in the code, where there would be two distinct lines; one for the y1 values, and the other for the y2 values.
export default function App() {
return (
<LineChart
width={500}
height={300}
data={customData}
>
<XAxis dataKey="x" />
<YAxis />
<Line
type="monotone"
dataKey="y"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
<Line
type="monotone"
dataKey="y2"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
</LineChart>
);
}
I creating bar chart. I want to give range to y axis for e.g currently y axis showing 5, 10,15,20 but I want 10,20,30 a range of 10. How can I achieve that?
<VictoryAxis
domain={{y: [0, 30]}}
dependentAxis
orientation="left"
style={{
tickLabels: {fontSize: 12},
axis: {stroke: 'transparent'},
}}
/>
In order to change the default axis of your chart you need to provide one or more <VictoryAxis /> components as children.
To change the interval of the ticks just set the tickCount prop on each axis where tickCount equals the division of your full domain range by the desired interval range e.g.
30 / 10 = 3 for the y-axis
and
20 / 10 = 2 for the x-axis because the domain range here is actual 20, not 40.
<VictoryChart
domain={{ x: [ 20, 40 ], y: [ 0, 30 ]}}
>
<VictoryAxis
tickCount={ 3 }
dependentAxis={ true } /* To target the y-axis */
/>
<VictoryAxis
tickCount={ 2 }
/>
<VictoryScatter
data={ [
{ x: 25, y: 10, label: 'Foo' },
{ x: 32, y: 28, label: 'Bar' }
] }
size={ 3 }
/>
</VictoryChart>
I am writing a React application and want to draw a line chart with an interpolated point, similar to the blue cross in the below:
I have been able to achieve mostly what I want using Nivo but this only drawers points based explicitly on data. What I want to do is illustrate an interpolated point along the trend line based on the x-axis. Is there a way to do this, either using Nivo or D3 directly?
The code I'm using for my line graph currently:
import React, { Component } from 'react';
import { Line } from 'nivo';
class LineGraph extends Component {
render() {
return (
<div className="line-graph">
<Line
width={600}
height={350}
margin={{
top: 20,
right: 20,
bottom: 60,
left: 60,
}}
data={[{
id: 'Distribution',
data: [
{x: '1', y: 0.09 },
{x: '2', y: 0.16 },
{x: '3', y: 0.5 },
{x: '4', y: 0.06 },
{x: '5', y: 0.19 },
]
}]}
colors="#ff6384"
enableArea
yScale={{ type: 'linear', stacked: false }}
curve="monotoneX"
dotSize={8}
dotBorderColor="#ff6384"
dotBorderWidth={2}
/>
</div>
);
}
}
I have a graph to display some values, but the y axis has negative values, as below.
<VictoryChart
theme={VictoryTheme.material}
>
<VictoryLine
style={{
data: { stroke: "#c43a31" },
parent: { border: "1px solid #ccc"}
}}
data={[
{ x: 1, y: -2 },
{ x: 2, y: -3 },
{ x: 3, y: -5 },
{ x: 4, y: -4 },
{ x: 5, y: -7 }
]}
/>
</VictoryChart>
It's displayed like this.
I need to have the x-axis at -7 value of the y-axis. How can I achieve this? Thanks!
Try this:
<VictoryChart
theme={VictoryTheme.material}
domain={{x: [1, 5], y: [-7, -2]}}
>
<VictoryAxis
orientation="top"
/>
<VictoryAxis dependentAxis
orientation="left"
invertAxis
/>
<VictoryLine
style={{
data: { stroke: "#c43a31" },
parent: { border: "1px solid #ccc"}
}}
data={[
{ x: 1, y: -2 },
{ x: 2, y: -3 },
{ x: 3, y: -5 },
{ x: 4, y: -4 },
{ x: 5, y: -7 }
]}
/>
</VictoryChart>