react-chartjs-2#Radar JavaScript Examples
The following examples show how to use
react-chartjs-2#Radar.
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: radarchart.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
const data = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "Desktops",
backgroundColor: "rgba(52, 195, 143, 0.2)",
borderColor: "#34c38f",
pointBackgroundColor: "#34c38f",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#34c38f",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "Tablets",
backgroundColor: "rgba(85, 110, 230, 0.2)",
borderColor: "#556ee6",
pointBackgroundColor: "#556ee6",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#556ee6",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
return (
<React.Fragment>
<Radar width={474} height={300} data={data}/>
</React.Fragment>
);
}
Example #2
| Source File: RadarChartComponent.js From project-s0-t1-budget with MIT License | 6 votes |
|
render() {
return (
<div>
<Radar
data={this.state}
options={{
scale: {
angleLines: {
display: false,
},
ticks: {
min: 0,
suggestedMax: 1000,
},
},
}}
/>
</div>
);
}
Example #3
| Source File: Amcat.js From GB-GCGC with MIT License | 5 votes |
|
render(){
if(this.state.id==="NI" || this.state.id=="NA"){
return(<div></div>)
}
return (
<div className="Amcat">
<Card className="Rounded p-3">
<CardSubtitle align="left">Amcat Analysis</CardSubtitle>
<hr></hr>
<Radar
data = {{
labels: ['Logical Ability', 'English Comprehension', 'Quantitative Ability', 'Automata', 'Automata Fix', 'Domain_1', 'Domain_2'],
datasets: [
{
label: 'AMCAT1',
backgroundColor: 'rgba(30,144,255,0.2)',
borderColor: 'rgba(30,144,255,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [this.state.LogicalAbility,this.state.EnglishComprehension,this.state.QuantitativeAbility,this.state.Automata,
this.state.AutomataFix,this.state.Domain1,this.state.Domain2],
},
{
label: 'AMCAT2',
backgroundColor: 'rgba(50,205,50,0.2)',
borderColor: 'rgba(50,205,50,1)',
pointBackgroundColor: 'rgba(255,0,0,1)',
pointBorderColor: '#ff0000',
pointHoverBackgroundColor: '#ff0000',
pointHoverBorderColor: 'rgba(255,0,0,1)',
data: [0, 0, 0, 0, 0, 0, 0]
}
]
}}
/>
</Card>
</div>
);
}
Example #4
| Source File: Cocubes.js From GB-GCGC with MIT License | 5 votes |
|
render(){
if (this.state.id==0){
return( <div>
</div>);
}
else{
return (
<div className="Cocubes">
<Card className="Rounded p-3">
<CardSubtitle align="left">Cocubes Analysis</CardSubtitle>
<hr></hr>
<Radar
data = {{
labels: ['Aptitude', 'English', 'Quantitative', 'Analytical', 'Domain', 'Computer Fundamentals',
'Coding','WET'],
datasets: [
{
label: 'COCUBES1',
backgroundColor: 'rgba(30,144,255,0.2)',
borderColor: 'rgba(30,144,255,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [this.state.Aptitude,this.state.English,this.state.Quantitative,this.state.Analytical,this.state.Domain,
this.state.ComputerFundamentals,this.state.Coding,this.state.WET],
},
{
label: 'COCUBES2',
backgroundColor: 'rgba(50,205,50,0.2)',
borderColor: 'rgba(50,205,50,1)',
pointBackgroundColor: 'rgba(255,0,0,1)',
pointBorderColor: '#ff0000',
pointHoverBackgroundColor: '#ff0000',
pointHoverBorderColor: 'rgba(255,0,0,1)',
data: [0, 0, 0, 0, 0, 0, 0,0,0],
},
],
}}
/>
</Card>
</div>
);
}
}
Example #5
| Source File: Radar.js From devfolio with MIT License | 5 votes |
|
ChartData = () => {
const [chartData, setChartData] = useState({});
const chart = () => {
setChartData({
labels: [
"HTML5",
"CSS3",
"JavaScript",
"Python",
"Git",
"SQL",
"Gatsby.js",
"MongoDB",
"React.js",
"Node.js",
],
datasets: [
{
label: "Interests",
backgroundColor: "rgba(73,174,186,0.2)",
borderColor: "rgba(73,174,186,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [85, 70, 90, 70, 75, 65, 75, 70, 85, 65],
},
],
});
};
const options = {
legend: {
display: false,
},
scale: {
ticks: {
beginAtZero: true,
display: false,
},
},
maintainAspectRatio: false,
};
useEffect(() => {
chart();
}, []);
return (
<div>
<Title title="Interests" />
<div className="canvas-container">
<Radar data={chartData} options={options} />
</div>
</div>
);
}
Example #6
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
ChartsChartjs = () => {
return (
<div>
<Helmet title="Charts / Chartjs" />
<div className="kit__utils__heading">
<h5>
<span className="mr-3">Charts / Chartjs</span>
<a
href="http://www.chartjs.org/"
rel="noopener noreferrer"
target="_blank"
className="btn btn-sm btn-light"
>
Official Documentation
<i className="fe fe-corner-right-up" />
</a>
</h5>
</div>
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Line Chart</strong>
</h5>
<div className="mb-5">
<Line data={lineData} options={lineOptions} width={400} height={200} />
</div>
</div>
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Bar Chart</strong>
</h5>
<div className="mb-5">
<Bar data={barData} options={barOptions} width={400} height={200} />
</div>
</div>
</div>
<div className="row">
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Radar Chart</strong>
</h5>
<div className="mb-5">
<Radar data={radarData} options={radarOptions} width={400} height={200} />
</div>
</div>
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Polar Area Chart</strong>
</h5>
<div className="mb-5">
<Polar data={polarData} options={polarOptions} width={400} height={200} />
</div>
</div>
</div>
<div className="row">
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Pie Chart</strong>
</h5>
<div className="mb-5">
<Pie data={pieData} options={pieOptions} width={400} height={200} />
</div>
</div>
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Doughnut Chart</strong>
</h5>
<div className="mb-5">
<Doughnut data={doughnutData} options={doughnutOptions} width={400} height={200} />
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #7
| Source File: Amcat.js From GB-GCGC with MIT License | 4 votes |
|
render() {
if(this.state.id==="NI" || this.state.id==="NA"){
return(<div></div>)
}
return (
<div class="container-fluid">
<Card className="Rounded p-3">
<CardSubtitle align="left">
<Row>
<Col>
Amcat Analysis
</Col>
<Col style={{"textAlign":"end"}}>
<Button
onClick={() => {
this.handleModalamcat();
}}
>
Edit
</Button>
</Col>
</Row>
</CardSubtitle>
<hr></hr>
<Radar
data = {{
labels: ['Logical Ability', 'English Comprehension', 'Quantitative Ability', 'Automata', 'Automata Fix', 'Domain_1', 'Domain_2'],
datasets: [
{
label: 'AMCAT1',
backgroundColor: 'rgba(30,144,255,0.2)',
borderColor: 'rgba(30,144,255,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [this.state.LogicalAbility,this.state.EnglishComprehension,this.state.QuantitativeAbility,this.state.Automata,
this.state.AutomataFix,this.state.Domain1,this.state.Domain2],
},
{
label: 'AMCAT2',
backgroundColor: 'rgba(50,205,50,0.2)',
borderColor: 'rgba(50,205,50,1)',
pointBackgroundColor: 'rgba(255,0,0,1)',
pointBorderColor: '#ff0000',
pointHoverBackgroundColor: '#ff0000',
pointHoverBorderColor: 'rgba(255,0,0,1)',
data: [0, 0, 0, 0, 0, 0, 0]
}
]
}}
/>
<br></br>
<Modal
show={this.state.show}
onHide={() => this.handleModalamcat()}
size="lg"
style={{ maxWidth: "1600px", width: "80%" }}
>
<Modal.Header closeButton>Edit Amcat Marks</Modal.Header>
<form onSubmit={this.handleSubmit}>
<Modal.Body>
<Table className="amcatedit" responsive>
<thead>
<tr>
<th>Logical</th>
<th>English</th>
<th>Quants</th>
<th>Automata</th>
<th>Automata_Fix</th>
<th>Domain_1</th>
<th>Domain_2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Logical</td>
<td>
<input
type="text"
name="Logical"
style={{ width: "50px" }}
value={this.state.LogicalAbility}
onChange={this.onChangeLogical}
/>
</td>
<td>
<input
type="text"
name="English"
style={{ width: "50px" }}
value={this.state.EnglishComprehension}
onChange={this.onChangeEnglish}
/>
</td>
<td>
<input
type="text"
name="Quants"
style={{ width: "50px" }}
value={this.state.QuantitativeAbility}
onChange={this.onChangeQuant}
/>
</td>
<td>
<input
type="text"
name="Automata"
style={{ width: "50px" }}
value={this.state.Automata}
onChange={this.onChangeAutomata}
/>
</td>
<td>
<input
type="text"
name="Automata_Fix"
style={{ width: "50px" }}
value={this.state.AutomataFix}
onChange={this.onChangeAutomataFix}
/>
</td>
<td>
<input
type="text"
name="Domain_1"
style={{ width: "50px" }}
value={this.state.Domain1}
onChange={this.onChangeDomain1}
/>
</td>
<td>
<input
type="text"
name="Domain_2"
style={{ width: "50px" }}
value={this.state.Domain2}
onChange={this.onChangeDomain2}
/>
</td>
</tr>
</tbody>
</Table>
</Modal.Body>
<Modal.Footer>
<Button>Submit</Button>
</Modal.Footer>
</form>
</Modal>
</Card>
</div>
);
}
Example #8
| Source File: Cocubes.js From GB-GCGC with MIT License | 4 votes |
|
render() {
return (
<div class="container-fluid">
<Card className="Rounded p-3">
<CardSubtitle align="left">
<Row>
<Col>
Cocubes Analysis
</Col>
<Col style={{"textAlign":"end"}}>
<Button
onClick={() => {
this.handleModalcocubes();
}}
>
Edit
</Button>
</Col>
</Row>
</CardSubtitle>
<hr></hr>
<Radar
data = {{
labels: ['Aptitude', 'English', 'Quantitative', 'Analytical', 'Domain', 'Computer Fundamentals',
'Coding','WET'],
datasets: [
{
label: 'COCUBES1',
backgroundColor: 'rgba(30,144,255,0.2)',
borderColor: 'rgba(30,144,255,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [this.state.Aptitude,this.state.English,this.state.Quantitative,this.state.Analytical,this.state.Domain,
this.state.ComputerFundamentals,this.state.Coding,this.state.WET],
},
{
label: 'COCUBES2',
backgroundColor: 'rgba(50,205,50,0.2)',
borderColor: 'rgba(50,205,50,1)',
pointBackgroundColor: 'rgba(255,0,0,1)',
pointBorderColor: '#ff0000',
pointHoverBackgroundColor: '#ff0000',
pointHoverBorderColor: 'rgba(255,0,0,1)',
data: [0, 0, 0, 0, 0, 0, 0,0,0],
},
],
}}
/>
<br></br>
<Modal
show={this.state.show}
onHide={() => this.handleModalcocubes()}
// style={{ maxWidth: "1600px", width: "80%" }}
>
<Modal.Header closeButton>Edit Cocubes Marks</Modal.Header>
<form onSubmit={this.onHandleCocubes}>
<Modal.Body>
<Table responsive>
<tr>
<td>Aptitude</td>
<td>
<input type="text" name="Aptitude" value={this.state.Aptitude} onChange={this.onChangeApptitude} />
</td>
</tr>
<tr>
<td>English</td>
<td>
<input type="text" name="English" value={this.state.English} onChange={this.onChangeEnglish}/>
</td>
</tr>
<tr>
<td>Quants</td>
<td>
<input type="text" name="Quants" value={this.state.Quantitative} onChange={this.onChangeQuant}/>
</td>
</tr>
<tr>
<td>Domain</td>
<td>
<input type="text" name="Domain" value={this.state.Domain} onChange={this.onChangeDomain}/>
</td>
</tr>
<tr>
<td>Analytical</td>
<td>
<input type="text" name="Analytical" value={this.state.Analytical} onChange={this.onChangeAnalytical}/>
</td>
</tr>
<tr>
<td>CF</td>
<td>
<input type="text" name="CF" value={this.state.ComputerFundamentals} onChange={this.onChangeCF}/>
</td>
</tr>
<tr>
<td>Coding</td>
<td>
<input type="text" name="Coding" value={this.state.Coding} onChange={this.onChangeCoding}/>
</td>
</tr>
<tr>
<td>WET</td>
<td>
<input type="text" name="WET" value={this.state.WET} onChange={this.onChangeWET}/>
</td>
</tr>
</Table>
</Modal.Body>
<Modal.Footer>
<Button type="submit">Submit</Button>
</Modal.Footer>
</form>
</Modal>
</Card>
</div>
);
}
Example #9
| Source File: Charts.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<CardColumns className="cols-2">
<Card>
<CardHeader>
Line Chart
<div className="card-header-actions">
<a href="http://www.chartjs.org" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Line data={line} options={options} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Bar Chart
<div className="card-header-actions">
<a href="http://www.chartjs.org" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Bar data={bar} options={options} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Doughnut Chart
<div className="card-header-actions">
<a href="http://www.chartjs.org" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Doughnut data={doughnut} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Radar Chart
<div className="card-header-actions">
<a href="http://www.chartjs.org" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Radar data={radar} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Pie Chart
<div className="card-header-actions">
<a href="http://www.chartjs.org" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Pie data={pie} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Polar Area Chart
<div className="card-header-actions">
<a href="http://www.chartjs.org" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Polar data={polar} options={options}/>
</div>
</CardBody>
</Card>
</CardColumns>
</div>
);
}
