How to display text on both axis in react chart?

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

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;

Answer 2

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'
      }
    }],
  }     
}