<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Highcharts.setOptions({
  colors: ["#b9d4f8", "#f8b9d4"] //['#71BF45','#01BAF2',  '#FAA74B']
});
Highcharts.chart("container", {
  chart: {
    type: "bar"
  },
  title: {
    text: "Swedish top 10 professions dominated by women (16-64 years) in 2017"
  },
  subtitle: {
    text:
      'Source: <a href="https://www.scb.se/">Swedish National Statistics</a>'
  },
  xAxis: {
    categories: [
      "Preschool teacher",
      "Home care nurse",
      "	Nurse	",
      "Nanny",
      "Nurse practitioner",
      "Finance Assistant",
      "Accountant",
      "	Nurse assistant",
      "Office assistant/secretary"
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    max: 130000,
    title: {
      text: null
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat:
      '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.f}</b></td></tr>',
    footerFormat: "</table>",
    shared: true,
    useHTML: true
  },
  plotOptions: {
    bar: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [
    {
      name: "Men",
      data: [3100, 11200, 3400, 9500, 5000, 5000, 5600, 16800, 16400]
    },
    {
      name: "Women",
      data: [67500, 125300, 33700, 79100, 41200, 34000, 20400, 61300, 59000]
    }
  ]
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.