Skip to content

Instantly share code, notes, and snippets.

@nielsuit227
Created September 16, 2021 07:50
Show Gist options
  • Save nielsuit227/ab0db942bc19161f5d89444dd49f1de9 to your computer and use it in GitHub Desktop.
Save nielsuit227/ab0db942bc19161f5d89444dd49f1de9 to your computer and use it in GitHub Desktop.
React & uPlot - Graph with Brush
import React from 'react';
import UplotReact from 'uplot-react';
import 'uplot/dist/uPlot.min.css';
export default function SelectBrushTimeSeries(props) {
let data = [props.data[0], props.data[3]];
let initXmin = props.data[0][0];
let initXmax = props.data[0][Math.max(10, Math.floor(props.data[0].length / 10))];
let series = [{},
{
stroke: '#007bff'
}]
const opts = {
width: 1800,
height: 600,
cursor: {
sync: {
key: 'moo',
},
},
scales: {
x: {
time: false,
},
},
series: series,
};
const brushOpts = {
width: 1800,
height: 150,
legend: {
show: false
},
cursor: {
y: false,
points: {
show: false,
},
drag: {
setScale: false,
x: true,
y: false,
},
sync: {
key: 'moo',
},
},
scales: {
x: {
time: false,
},
},
series: series,
}
return(
<div>
<UplotReact options={opts} data={data}/>
<UplotReact options={brushOpts} data={data}/>
</div>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment