InkStitch - data visualization/highcharts-pie-charts-js-css-code

<link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet">

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

<div id="container" style="height: 128mm; width: 178mm;border:1px solid red"></div>

// This was made to create SVG for embroidery with InkStitch
// See: https://edutechwiki.unige.ch/en/InkStitch_-_data_visualization
// Original: https://www.highcharts.com/demo/pie-semi-circle
// Daniel K. Schneider, University of Geneva, Aug 2018


Highcharts.chart("container", {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: 0,
    plotShadow: false,
    width: 670, //pixels only. That will be DPI dependant.
    height: "72%"
  },
  title: {
    text: "FIFA<br>ALL TIME<br>2018",
    align: "center",
    verticalAlign: "middle",
    y: 50,
  },
  tooltip: {
    pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: -40,
        padding:0,
        x:-2,
        y:-6
      },
      startAngle: -100,
      endAngle: 100,
      center: ["50%", "75%"]
    }
  },
  series: [
    {
      type: "pie",
      name: "All-time table of the FIFA World Cup",
      innerSize: "50%",
      data: [
        ["BR", 237],
        ["DE", 221],
        ["IT", 156],
        ["AR", 144],
        ["FR", 115],
        ["EN", 108]
      ]
    }
  ]
});

  
@import 'https://code.highcharts.com/css/highcharts.css';

* {font-family: Barlow, sans-serif;}

.highcharts-title {
  fill: black;
  font-family: Barlow, sans-serif;
  font-weight: 900;
  letter-spacing: 0em;
  // margin-top: -50px;
  // padding-top: -50px;
  line-height: 80%;
  font-size: 33pt;
}
.highcharts-data-label {
  fill: black;
  font-weight: 900;
  font-family: Barlow, sans-serif;
  // letter-spacing: 0.1em;
  font-size: 33pt;
}
.highcharts-data-label-box {
}