How to display text on both axis in react chart? - reactjs

Question

I am new to react and I wanted to create a chart to display skill level. Where I wanted to display text on both X-axis and Y-axis. I have created bar/line and pie chart using React.js. Currently I am able to display digit on -axis and text on X-axis. However, is there a way to display string(text) on both axis?
I would like to display ["Expert", "Advanced", "Intermediate", "Beginner"] on Y-axis and on X-axis, I would like to display - ["HTML", "CSS", "React JS", "Javascript", "SQL","Drupa].
I am using 'react-chartjs-2' module (https://gor181.github.io/react-chartjs-2/).
I have created component called 'Chart.jsx' and code for that is:
import React, { Component } from "react";
import { Bar, Line, Pie } from "react-chartjs-2";
import "./Chart.css";
class Chart extends Component {
constructor(props) {
super(props);
this.state = {
chartData: props.chartData
};
}
static defaultProps = {
displayTitle: true,
DisplayLegend: true,
LegendPosition: 'right',
level:'Skills'
};
render() {
return (
<div className="chart">
<Bar
data={this.state.chartData}
options={{
title: {
display: this.props.displayTitle,
text: 'Skills I am proficient with '+this.props.level,
},
legend: {
display: this.props.DisplayLegend,
position: this.props.LegendPosition
}
}}
/>
<Line
data={this.state.chartData}
options={{
title: {
display: this.props.displayTitle,
text: 'Skills I am proficient with '+this.props.level,
},
legend: {
display: this.props.DisplayLegend,
position: this.props.LegendPosition
}
}}
/>
<Pie
data={this.state.chartData}
options={{
title: {
display: this.props.displayTitle,
text: 'Skills I am proficient with '+this.props.level,
},
legend: {
display: this.props.DisplayLegend,
position: this.props.LegendPosition
}
}}
/>
</div>
);
}
}
export default Chart;
I have created one page called 'Skills.jsx' and code for that is:
import React, { Component } from "react";
import Navbar from "../components/Navbar.jsx";
import Footer from "../components/Footer.jsx";
import Jumbotron from "../components/Jumbotron.jsx";
import Chart from "../components/Chart.jsx";
class Skills extends Component {
constructor() {
super();
this.state = {
chartData: {}
};
}
componentWillMount() {
this.getChartData();
}
getChartData() {
//Ajax calls here
this.setState({
chartData: {
labels: [
"HTML",
"CSS",
"React JS",
"Javascript",
"SQL",
"Drupal"
],
datasets: [
{
// labels: "Level",
labels: ["Expert", "Advanced", "Intermediate", "Beginner"],
data: [100, 90, 90, 70, 60, 50, 40, 30, 20, 10, 0],
//labels: ["Expert", "Advanced", "Intermediate", "Beginner"],
displays: ["Expert", "Advanced", "Intermediate", "Beginner"],
backgroundColor: [
"rgba(255, 99, 132, 0.6)",
"rgba(54, 162, 235, 0.6)",
"rgba(255, 206, 86, 0.6)",
"rgba(75, 192, 192, 0.6)",
"rgba(153, 102, 235, 0.6)",
"rgba(255, 159, 132, 0.6)",
"rgba(255, 99, 132, 0.6)"
]
}
]
}
});
}
render() {
return (
<div>
<Navbar />
<Jumbotron title="welcome" subtitle="put something" />
<div className="container">
<h2>My Skills</h2>
<p>Look, what I can do ..</p>
</div>
<div>
<Chart chartData={this.state.chartData} lavel="HTML" LegendPosition="bottom" />
</div>
<Footer />
</div>
);
}
}
export default Skills;
Thank you in advance!

Answer 1

you need to use scales title inside the options
options = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Y text'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'X text'
}
}],
}
}

Answer 2

Here, is my code of using 'scales title' and 'ticks' to display text on both axis in react chart. Hope that helps others!
on 'Chart.jsx' file:
import React, { Component } from "react";
import { Bar, Line, Pie } from "react-chartjs-2";
import "./Chart.css";
class Chart extends Component {
constructor(props) {
super(props);
this.state = {
chartData: props.data,
chartOptions: props.options
};
}
static defaultProps = {
displayTitle: true,
DisplayLegend: true,
LegendPosition: "right",
level: "Skills",
data: {
labels: ["HTML", "CSS", "Javascript", "Drupal", "ReactJS", "SQL"],
datasets: [
{
data: [90, 90, 60, 70, 25, 65, 100, 55, 80, 40, 30, 40, 10, 0],
backgroundColor: [
"rgba(255, 99, 132, 0.6)",
"rgba(54, 162, 235, 0.6)",
"rgba(255, 206, 86, 0.6)",
"rgba(75, 192, 192, 0.6)",
"rgba(153, 102, 235, 0.6)",
"rgba(255, 159, 132, 0.6)",
"rgba(255, 99, 132, 0.6)"
]
// label: 2015
}
/* {
data: [90, 90, 60, 70, 60, 70, 100, 55, 80, 40, 30, 20, 10, 0],
backgroundColor: "#FF7",
label: 2016
}*/
]
},
options: {
scales: {
yAxes: [
{
ticks: {
callback: function(label, index, labels) {
console.log("label is: " + label);
if (label > 75) {
return "Expert: " + label;
} else if (label > 50) {
return "Advanced: " + label;
} else if (label > 25) {
return "Intermediate: " + label;
} else {
return "Beginner: " + label;
}
// return '$' + label;
}
}
}
]
}
}
};
render() {
return (
<Bar data={this.state.chartData} options={this.state.chartOptions} />
);
}
}
export default Chart;
and on skills.jsx page-
import React, { Component } from "react";
import Navbar from "../components/Navbar.jsx";
import Footer from "../components/Footer.jsx";
import Jumbotron from "../components/Jumbotron.jsx";
import Chart from "../components/Chart.jsx";
class Skills extends Component {
constructor() {
super();
this.state = {
chartData: {}
};
}
componentWillMount() {
this.getChartData();
}
getChartData() {
//Ajax calls here
this.setState({
chartData: {
labels: [
"HTML",
"CSS",
"React JS",
"Javascript",
"SQL",
"Drupal"
],
datasets: [
{
// labels: "Level",
labels: ["Expert", "Advanced", "Intermediate", "Beginner"],
data: [90, 90, 40, 40, 60, 80, 40, 30, 20, 10, 0, 100],
//labels: ["Expert", "Advanced", "Intermediate", "Beginner"],
displays: ["Expert", "Advanced", "Intermediate", "Beginner"],
backgroundColor: [
"rgba(255, 99, 132, 0.6)",
"rgba(54, 162, 235, 0.6)",
"rgba(255, 206, 86, 0.6)",
"rgba(75, 192, 192, 0.6)",
"rgba(153, 102, 235, 0.6)",
"rgba(255, 159, 132, 0.6)",
"rgba(255, 99, 132, 0.6)"
]
}
]
}
});
}
render() {
return (
<div>
<Navbar />
<Jumbotron title="welcome" subtitle="put something" />
<div className="container">
<h2>My Skills</h2>
<p>Look, what I can do ..</p>
</div>
<div>
<Chart chartData={this.state.chartData} lavel="HTML" LegendPosition="bottom" />
</div>
<Footer />
</div>
);
}
}
export default Skills;