title: Chart Js invisible horizontal bar
body: <p>FIXED.</p>
  
  <p>Fixed this issue now. Had a rounded bars function that caused the chart not to display.</p>
  
  <p>When implementing a horizontal bar into my project the bars are invisible. Changing the type to bar makes the code run fine. Any ideas what is causing this?</p>
  
  <pre><code>import React, { Component } from "react";
  import Chart from "chart.js";
  
  export default class NewOrdersChartData extends Component {
      NewOrdersChartData = React.createRef();
  
      componentDidMount() {
          const NewOrdersChartData = this.NewOrdersChartData.current.getContext(
              "2d"
          );
  
          new Chart(NewOrdersChartData, {
              type: "horizontalBar",
              data: {
                  labels: ["Total Orders", "Pending", "Acknowledged", "Completed", "Committed"],
                  datasets: [
                      {
                          label: "Test",
                          data: [238, 147, 182, 128, 81],
                          backgroundColor: ["rgba(0, 135, 136)",
                              "rgba(0, 193, 189)",
                              "rgba(0, 193, 189)",
                              "rgba(0, 193, 189)",
                              "rgba(0, 193, 189)"],
                          hoverBackgroundColor: ["rgba(0, 135, 136)",
                              "rgba(0, 193, 189)",
                              "rgba(0, 193, 189)",
                              "rgba(0, 193, 189)",
                              "rgba(0, 193, 189)"]
                      }
                  ]
              },
              options: {
                  responsive: true,
  
                  legend: {
                      display: false,
                      position: "bottom",
  
                      labels: {
                          fontColor: "#333",
                          fontSize: 50
                      }
                  },
                  scales: {
                      //yaxes change
                      yAxes: [
                          {
                              stacked: true,
                              gridLines: {
                                  drawBorder: false,
                                  display: false
                              },
                              ticks: {
                                  beginAtZero: true
  
                              }
                          }
                      ],
                      //xaxes change
                      xAxes: [
                          {
                              ticks: {
                                  display: false
                              },
                              gridLines: {
                                  drawBorder: false,
                                  display: false,
                                  scaleShowLabels: false
  
  </code></pre>
  
  <p>EDIT</p>
  
  <p>Fixed this issue now. Had a rounded bars function that caused the chart not to display.</p>
  
  <p>I have nothing else to add.</p>