Created
May 3, 2019 01:42
-
-
Save gpDA/a91317ec25dbab1f795dbe0d3dbd2b4d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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