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

The educational technology and digital learning wiki
< InkStitch - data visualization
Revision as of 12:03, 22 August 2018 by Daniel K. Schneider (talk | contribs) (Created page with " <source lang="javascript> // This was made to create SVG for embroidery with InkStitch // See: https://edutechwiki.unige.ch/en/InkStitch_-_data_visualization // Original: ht...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search


// 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';

.highcharts-title {
    fill: black;
    font-weight: bold;
    letter-spacing: 0.3em;
    // margin-top: -50px;
    // padding-top: -50px;
    line-height: 80%;
    font-size: 33pt;
}
.highcharts-data-label {
    fill: black;
    font-weight: bold;
    letter-spacing: 0.3em;
    font-size: 33pt;
}
.highcharts-data-label-box {
  
}