React-ChartJS-2 Disappearing Chart when using Labels

user_10778270 0
Viewed 1068

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>
react-chartjs reactjs charts
2 Answers

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"
          }
        ]
      },
user_120517840

you can use the labels plugin (chartjs-plugin-labels) to add labels along the outside of each area.

see following working snippet... 

$(document).ready(function() {
  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'polarArea',
    data: {
      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: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ]
    },
    options: {
      responsive: true,
      plugins: {
        labels: {
          render: 'label',
          arc: true,
          position: 'outside'
        }
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart"></canvas>

user_50907710
Related