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>
Related
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}
/>
I want to introduce a Packed circle chart (a variation of bubble chart which contains only the radius as its dimension). React Chartjs and even Chartjs support only Bubble chart but not Packed circle chart. Here is an example of the expected chart I want to add
Can I get something like this using react-chartjs? For example, one needs to do something like below for a regular initiation of a bubble chart.
const defaultDatasets = [
{
label: ["China"],
backgroundColor: "rgba(255,221,50,0.2)",
borderColor: "rgba(255,221,50,1)",
data: [{
x: 735,
y: 50,
r: 15
}]
}, {
label: ["Denmark"],
backgroundColor: "rgba(60,186,159,0.2)",
borderColor: "rgba(60,186,159,1)",
data: [{
x: 116,
y: 50,
r: 10
}]
}, {
label: ["Germany"],
backgroundColor: "rgba(0,0,0,0.2)",
borderColor: "#000",
data: [{
x: 2116,
y: 50,
r: 15
}]
}
]
Since my requirement is a Packed circle chart, so I have two options.
I could omit x and y values. But then all bubbles get messed up.
I could randomise the x and y values and hide the axes. But then the randomisation won't guarantee any bubble overlapping or may bring some bubbles concentrated to one point.
Is there any hack or workaround to show bubbles in a nice order like in the picture above?
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
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 generated a bar chart for the data to show ratings of five topics on scale of 5 (Ratings).On x-axis I showed Topic names.
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.label;
},
y: function(d) {
return d.value;
},
showValues: true,
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
$scope.data = [{
values: $scope.Details.ratings
}];
HTML:
<nvd3 options="options" data="data"></nvd3>
On y-axis the max value should be 5, but here it is taking the maximum value among the data and the bars in the bar chart are having large width. How can I change the bar width and max range on y-axis?
i used the following code to set bar width and adjust the bar curvature
enter code here
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
putting
groupSpacing : 0.57,
in chart dict will also help to adjust width dynamically