InkStitch - data visualization/highcharts area chart

This is an outdated copy (backup) of

• https://codepen.io/danielkschneider/pen/qMBrKx

// 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/area-stacked
// Daniel K. Schneider, University of Geneva, Aug 2018

Highcharts.chart("container", {
  chart: {
    type: "area",
    spacingTop: 20,
    width: 670, //pixels only. That will be DPI dependant.
    height: "72%"
  },
  title: {
    text: "Worldwide Population Growth",
    align: "left",
    style: { fontSize: "27pt", fontWeight: "bold", color: "black" }
  },
  legend: {
    itemStyle: {
      fontSize: "20pt"
    }
  },
  // subtitle: {text: 'Source: Wikipedia.org'},
  xAxis: {
    categories: ["1750", "1800", "1850", "1900", "1950", "1999", "2050"],
    tickmarkPlacement: "on",
    title: {
      enabled: false
    },
    labels: {
      // padding: 10,
      align: "center",
      reserveSpace: true,

      style: {
        fontSize: "20pt",
        fontWeight: "bold",
        color: "red"
      }
    }
  },
  yAxis: {
    title: {
      text: "Billions",
      style: {
        fontSize: "24pt",
        fontWeight: "bold",
        color: "black",
        whiteSpace: "nowrap"
      }
    },
    labels: {
      formatter: function() {
        return this.value / 1000;
      },
      style: {
        fontSize: "20pt",
        fontWeight: "bold",
        color: "red"
      }
    }
  },
  tooltip: {
    split: true,
    valueSuffix: " millions"
  },
  plotOptions: {
    area: {
      stacking: "normal",
      lineColor: "#666666",
      lineWidth: 1,
      marker: {
        // little markers cannot be stitched easily
        enabled: false,
        lineWidth: 1,
        lineColor: "#666666"
      }
    }
  },
  series: [
    {
      name: "Asia",
      data: [502, 635, 809, 947, 1402, 3634, 5268]
    },
    {
      name: "Africa",
      data: [106, 107, 111, 133, 221, 767, 1766]
    },
    {
      name: "Europe",
      data: [163, 203, 276, 408, 547, 729, 628]
    },
    {
      name: "America",
      data: [18, 31, 54, 156, 339, 818, 1201]
    }
    // too small {name: "Oceania",data: [2, 2, 2, 6, 13, 30, 46]    }
  ]
});