React-ChartJS-2 Disappearing Chart when using Labels

Question

I'm currently learning React and trying to implement a Polar Area Chart. When I add all of my labels in the chart disappears. I have extended the height and width to see if that fixes the issue. I realise the code probably isn't the best as I'm learning so any suggestions are welcomed. Additionally if anyone has any tips on styling as I want the labels to surround the chart so January to be next to the data for January etc.

datasets: [
    {
      data: [11, 16, 7, 3, 14, 11, 16, 7, 3, 14, 55, 87],
      backgroundColor: [
        "#FF6384",
        "#4BC0C0",
        "#FFCE56",
        "#E7E9ED",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB",
        "#36A2EB"
      ]
    }
  ],
  labels: [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ]
};

 <div id="chartjs">
     <Polar id="chart" data={data} />
 </div>

Answer 1

I would do this in a instance instead. The way I did this was like this -

export default class ChangeHere extends Component {
  ChangeHere = React.createRef();

  componentDidMount() {
    const ChangeHere = this.ChangeHere .current.getContext("2d");

    new Chart(PendingOrdersChart, {
      type: "polarArea",
      data: {
        labels: ["1", "2", "3", "4"],
        datasets: [
          {
            data: [125, 375, 300, 240],
            backgroundColor: "#57C5C8",
            borderWidth: 4,
            hoverBorderColor: "white",
            label: "Pending Orders"
          }
        ]
      },