Skip to content

Instantly share code, notes, and snippets.

@gpDA
Created May 3, 2019 01:42
Show Gist options
  • Save gpDA/a91317ec25dbab1f795dbe0d3dbd2b4d to your computer and use it in GitHub Desktop.
Save gpDA/a91317ec25dbab1f795dbe0d3dbd2b4d to your computer and use it in GitHub Desktop.
import { Line } from 'react-chartjs-2';
...
// data for LINE
const chart_data = {
// x_axis (time range)
labels: x_axis,
// dataset LINE1
datasets: [{
label: "line1",
lineTension: 0.1,
fill: false,
pointHoverBackgroundColor: "yellow",
borderColor: "purple",
pointRadius: 4,
pointHitRadius: 10,
// data (line1)
data: line_line1,
},
// dataset LINE2
{
label: "line2",
lineTension: 0.1,
fill: false,
pointHoverBackgroundColor: "brown",
borderColor: "green",
pointRadius: 4,
pointHitRadius: 10,
// data (line2)
data: line_line2
},
// dataset LINE3
{
label: "line3",
lineTension: 0.1,
fill: false,
pointHoverBackgroundColor: "brown",
borderColor: "red",
pointRadius: 4,
pointHitRadius: 10,
// data (line3)
data: line_line3
}
]
}
// LINE options
const options = {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero:true,
// y axis min and max
min: -2,
max: 5
}
}]
}
}
return(
<Line
// data fro chart_data
data={chart_data}
// options
options={options}
/>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment