react-chartjs-2#Scatter JavaScript Examples
The following examples show how to use
react-chartjs-2#Scatter.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ChartJs.js From Purple-React with MIT License | 5 votes |
|
render() {
return (
<div>
<div className="page-header">
<h3 className="page-title">
Chart-js
</h3>
<nav aria-label="breadcrumb">
<ol className="breadcrumb">
<li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Charts</a></li>
<li className="breadcrumb-item active" aria-current="page">Chart-js</li>
</ol>
</nav>
</div>
<div className="row">
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Line Chart</h4>
<Line data={this.data} options={this.options} />
</div>
</div>
</div>
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Bar Chart</h4>
<Bar data={this.data} options={this.options} />
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Area Chart</h4>
<Line data={this.areaData} options={this.areaOptions} />
</div>
</div>
</div>
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Doughnut Chart</h4>
<Doughnut data={this.doughnutPieData} options={this.doughnutPieOptions} />
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Pie Chart</h4>
<Pie data={this.doughnutPieData} options={this.doughnutPieOptions} />
</div>
</div>
</div>
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Scatter Chart</h4>
<Scatter data={this.scatterChartData} options={this.scatterChartOptions} />
</div>
</div>
</div>
</div>
</div>
)
}
Example #2
| Source File: data-plot.js From OpenSource_ventilator_lungs with GNU General Public License v3.0 | 4 votes |
|
render() {
const title = this.props.title;
const chartData = {
datasets: [],
};
if (this.props.data.length > 0) {
if (this.props.multipleDatasets) {
for (let i = 0; i < this.props.data.length; i++) {
chartData.datasets.push({
label: 'dataset' + i,
borderColor: this.props.data[i].color,
borderWidth: 2,
borderJoinStyle: 'round',
pointRadius: 0,
pointBorderWidth: 1,
lineTension: 0,
data: this.props.data[i].data,
showLine: true,
fill: this.props.data[i].fill,
backgroundColor: this.convertHex(this.props.data[i].color, 0.3),
hiddenLegend: true,
});
}
} else {
chartData.datasets.push({
label: 'dataset',
borderColor: this.props.data.color,
borderWidth: 2,
borderJoinStyle: 'round',
pointRadius: 0,
pointBorderWidth: 1,
lineTension: 0,
data: this.props.data.data,
showLine: true,
fill: false,
hiddenLegend: true,
});
}
}
if (this.props.peak) {
chartData.datasets.push({
label: 'set value',
borderColor: '#1cc88a',
borderDash: [10, 5],
borderWidth: 2,
borderJoinStyle: 'round',
pointRadius: 0,
pointBorderWidth: 1,
lineTension: 0,
data: [{ x: 0, y: this.props.peak }, { x: this.props.timeScale, y: this.props.peak }],
showLine: true,
fill: false,
});
}
if (this.props.breathingCycleStart) {
chartData.datasets.push({
label: 'breathing cycle start',
borderColor: '#000',
borderWidth: 1,
borderJoinStyle: 'round',
pointRadius: 0,
pointBorderWidth: 1,
lineTension: 0,
data: [{ x: this.props.breathingCycleStart, y: this.props.minY + 1 }, { x: this.props.breathingCycleStart, y: this.props.maxY - 1 }],
showLine: true,
fill: false,
});
}
if (this.props.breathingCycleEnd) {
chartData.datasets.push({
label: 'breathing cycle end',
borderColor: '#000',
borderWidth: 1,
borderJoinStyle: 'round',
pointRadius: 0,
pointBorderWidth: 1,
lineTension: 0,
data: [{ x: this.props.breathingCycleEnd, y: this.props.minY + 1 }, { x: this.props.breathingCycleEnd, y: this.props.maxY - 1 }],
showLine: true,
fill: false,
});
}
if (this.props.exhaleMoment) {
chartData.datasets.push({
label: 'exhale',
borderColor: '#000',
borderWidth: 1,
borderJoinStyle: 'round',
pointRadius: 0,
pointBorderWidth: 1,
lineTension: 0,
data: [{ x: this.props.exhaleMoment, y: this.props.minY + 1 }, { x: this.props.exhaleMoment, y: this.props.maxY - 1 }],
showLine: true,
fill: false,
});
}
if (this.props.thresholdLow) {
chartData.datasets.push({
label: 'lower threshold',
borderColor: '#e74a3b',
borderDash: [5, 5],
borderWidth: 3,
borderJoinStyle: 'round',
pointRadius: 0,
pointBorderWidth: 1,
lineTension: 0,
data: [{ x: 0, y: this.props.thresholdLow }, { x: this.props.timeScale, y: this.props.thresholdLow }],
showLine: true,
fill: false,
});
}
if (this.props.thresholdHigh) {
chartData.datasets.push({
label: 'uppder threshold',
borderColor: '#e74a3b',
borderDash: [5, 5],
borderWidth: 3,
borderJoinStyle: 'round',
pointRadius: 0,
pointBorderWidth: 1,
lineTension: 0,
data: [{ x: 0, y: this.props.thresholdHigh }, { x: this.props.timeScale, y: this.props.thresholdHigh }],
showLine: true,
fill: false,
});
}
const chartOptions = {
layout: { padding: { top: 0, bottom: 0, left: 0, right: 0 } },
maintainAspectRatio: false,
animation: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
display: true,
suggestedMin: this.props.minY,
suggestedMax: this.props.maxY,
},
}],
xAxes: [{
ticks: {
beginAtZero: false,
display: true,
suggestedMin: 0,
suggestedMax: this.props.timeScale,
},
}],
},
legend: {
display: false,
},
tooltips: {
enabled: false,
},
title: {
display: true,
position: 'left',
text: title,
padding: 10,
lineHeight: 1,
fontSize: 20,
fontColor: '#677',
},
};
return (
<div style={{ height: '280px' }}>
<Scatter data={chartData} options={chartOptions} />
</div>
);
}
