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>
);
}
}
Related
I would like to be able to provide a custom layer on each of my bars in a Nivo responsive bar chart. I have been using this guide as a reference. I am creating a warning level and would like to have a line representing that level set on each bar. The issue I have is that the level is moving around when resizing the page.
The expected response upon screen resizing is for the warning level line to retain its expected position on the chart. What I am getting instead is the warning line moving from its desired position.
"next": "~12.2.4",
"#nivo/bar": "~0.79.1",
"#nivo/core": "~0.78.0",
My chart component using mock data -
import CardComponent from '#components/CardComponent';
import NivoWrapper from '#components/NivoWrapper';
import {
ResponsiveBar,
} from '#nivo/bar';
import React from 'react';
const data = [
{
x: '0',
name: 'weight5',
current: 200,
warningLevel: 100,
},
{
x: '1',
name: 'weight2',
current: 300,
warningLevel: 150,
},
{
x: '2',
name: 'weight3',
current: 400,
warningLevel: 200,
},
{
x: '3',
name: 'weight4',
current: 500,
warningLevel: 250,
},
{
x: '4',
name: 'weight5',
current: 600,
warningLevel: 300,
},
];
const MarginTop = 0;
const Marginright = 24;
const Marginbottom = 24;
const Marginleft = 64;
function Line({ bars, xScale }) {
return (
{bars.map((bar: any) => {
return (
<line
key={bar.key}
y1={bar.absY}
y2={bar.absY + bar.height}
x1={xScale(bar.width - bar.data.data.warningLevel - bar.data.data.warningLevel)}
x2={xScale(bar.width - bar.data.data.warningLevel - bar.data.data.warningLevel)}
stroke="black"
/>
);
})}
);
}
function PackageStockLevelChart() {
return (
<NivoWrapper>
<ResponsiveBar
data={data}
indexBy="name"
keys={['current']}
layout="horizontal"
enableLabel={false}
axisLeft={{
tickValues: 7,
}}
margin={{
top: MarginTop, right: Marginright, bottom: Marginbottom, left: Marginleft,
}}
enableGridY={false}
colors="green"
legendLabel="legend label"
legends={[{
dataFrom: 'keys',
anchor: 'bottom-right',
direction: 'column',
itemWidth: 80,
itemHeight: 16,
translateY: -16,
}]}
layers={['axes', 'bars', Line, 'legends']}
/>
</NivoWrapper>
);
}
export default PackageStockLevelChart;
View before resizing -
View before resizing
During / After resizing
View during after reszing
So currently I have this as my code for the victory line chat
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { VictoryLine, VictoryChart } from 'victory-native'
let data = [
{
x: 1,
y: 0
},
{
x: 2,
y: 0
},
{
x: 3,
y: 0
},
{
x: 4,
y: 70
},
{
x: 5,
y: 73
},
{
x: 5,
y: 73
},
{
x: 5,
y: 73
},
{
x: 5,
y: 73
}
]
export default function Graph() {
return (
<VictoryLine style={styles.graph} height={150} width={350} data={data} style={{data: {stroke: 'orange', strokeWidth: 2.5}}} />
)
}
const styles = StyleSheet.create({
graph: {
marginRight: 0
}
})
which gives me a line chart that looks like this. Is there a way to:
A) Plot dotted point on the line for each data point
B) Just dot the last data point in the data list. Example image here of what I want to achieve
You can wrap your VictoryLine with an VictroyChart and hide the axis, like this sample
<View>
<VictoryChart polar={this.state.polar} height={390}>
<VictoryAxis style={{
axis: {stroke: "transparent"},
ticks: {stroke: "transparent"},
tickLabels: { fill:"transparent"}
}} />
<VictoryLine
interpolation={this.state.interpolation} data={data}
style={{ data: { stroke: "#c43a31" } }}
/>
<VictoryScatter data={[data[data.length-1]]}
size={5}
style={{ data: { fill: "#c43a31" } }}
/>
</VictoryChart>
</View>
I want to make a chart like this in Recharts.
They have a similar chart but the edges of it's lines are straight and not round like I need. Can it be configured?
Yeah we can make that double radial bar chart using recharts. This is react/ next js Component. You can modify Bar Radius, Inner radius. For Inner text there is a single number given from Recharts you can use Positioning for rendering that inner text and stylings.
import React from 'react';
import { RadialBarChart, PolarAngleAxis, RadialBar } from 'recharts';
const index = () => {
// Sample data
const data = [
{ name: 'A', x: 1, fill: 'green' },
{ name: 'B', x: 2, fill: 'yellow' },
// { name: 'C', x: 3, fill: 'aqua' },
// { name: 'D', x: 4, fill: 'blue' },
// { name: 'E', x: 5, fill: 'orange' },
// { name: 'F', x: 6, fill: 'red' },
// { name: 'G', x: 7, fill: 'black' },
// { name: 'H', x: 8, fill: 'purple' },
// { name: 'I', x: 9, fill: 'gray' },
];
return (
<RadialBarChart width={143} height={143} data={data}
// cx={30 / 2}
// cy={30 / 2}
innerRadius={25}
// outerRadius={18}
barSize={4}
startAngle={90}
endAngle={-270}>
<PolarAngleAxis
type="number"
domain={[0, 10]}
angleAxisId={0}
tick={false}
/>
<RadialBar
background
dataKey="value"
cornerRadius={30 / 2}
fill="#0BEFF2"
/>
<text
x={30 / 2}
y={33 / 2}
textAnchor="middle"
dominantBaseline="middle"
className="progress-label"
>
89
</text>
</RadialBarChart>
);
};
export default index;
I am making a line graph in React.js using react-chartjs-2. I am using a zoom and pan option. I imported zoom from react-chartjs-2 and used it later in my code. Note: If I remove this import line, the zoom function in the graph stop working:
import * as zoom from 'chartjs-plugin-zoom';
<Line
data={data}
options={{
title: {
display: true,
text: `${data.title}`,
fontSize: 20
},
legend: {
display: true,
position: 'right'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
pan: {
enabled: true,
mode: 'x',
rangeMin: {
x: 20,
y: 20
},
rangeMax: {
x: 40,
y: 40
},
speed: 0.5
},
zoom: {
enabled: true,
mode: 'x',
rangeMin: {
x: 15,
y: 10
},
rangeMax: {
x: 20,
y: 20
},
speed: 0.5
}
}}
/>
But still getting this error:
./src/components/LineGraph.jsx
Line 3:13: 'zoom' is defined but never used no-unused-vars
Your code doesn't use the imported zoom. You have an object with a key named zoom, but nowhere do you use the imported zoom variable.
Try import 'chartjs-plugin-zoom'; instead of import * as zoom from 'chartjs-plugin-zoom'; because you just want to load the module, not reference it.
I am creating a weather application where I am consuming OpenWeatherMap to get forecast data. I want to plot the data similar to google weather widget in an area chart.
I could not find much documentation for D#, I found react-d3-componetns npm package.
Documentaton shows to use ReactDOM.render
Below way of consuming is not working
import React from "react";
import ReactDom from 'react-dom';
import "./styles.css";
import ReactD3 from "react-d3-components";
export class WeatherGraph extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{
label: "somethingA",
values: [
{ x: 0, y: 2 },
{ x: 1.3, y: 5 },
{ x: 3, y: 6 },
{ x: 3.5, y: 6.5 },
{ x: 4, y: 6 },
{ x: 4.5, y: 6 },
{ x: 5, y: 7 },
{ x: 5.5, y: 8 }
]
}
]
};
}
ReactDom.render(
<ReactD3.AreaChart
data={this.state.data}
width={400}
height={400}
yOrientation='right' // if you do not provide right default left orientation for yAxis will be used
margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
document.getElementById('location')
)
}
Below is the codesandbox link
https://codesandbox.io/s/weather-report-rgu7y-regtl
Could you suggest the right way of consuming it or refer to any examples ?