JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container',

  {
    series: [{
      data: [{
          name: "Rental Housing",
          y: 56,
          footnote: "4",
          addToTitle: "y",
        },
        {
          name: "Industrial",
          y: 23,
          footnote: "",
          addToTitle: "y",
        },
        {
          name: "Net Lease",
          y: 6,
          footnote: "",
          addToTitle: "",
        },
        {
          name: "Data Centers",
          y: 4,
          footnote: "",
          addToTitle: "y",
        },
        {
          name: "Hospitality",
          y: 3,
          footnote: "",
          addToTitle: "",
        },
        {
          name: "Self Storage",
          y: 3,
          footnote: "",
          addToTitle: "",
        },
        {
          name: "Retail",
          y: 3,
          footnote: "",
          addToTitle: "",
        },
        {
          name: "Office",
          y: 2,
          footnote: "",
          addToTitle: "",
        },
      ],
    }],

    chart: {
      type: 'pie',
      reflow: true,
      alignTicks: false,
      height: 450,
      backgroundColor: "transparent",
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      animation: false,
      events: {
        load: function() {
          var chart = this,
            legend = chart.legend;
          this.update({
            series: [{}],
          });

        },
        redraw: function() {
          console.log("chart width: " + this.chartWidth);

          // this.tooltip.refresh(this.series[0].points[0]);
          var chart = this,
            legend = chart.legend,
            legendWidth = legend.legendWidth,
            chartWidth = chart.chartWidth,
            sumFirstThree = this.series[0].data.reduce(function(a, b) {
              if (b.addToTitle === "y") {
                return a + b.y;
              }
              return a;
            }, 0),
            calculatedFontSize =...