CSS theming

author(s): Torstein Hønsi

by ipoly

HTML

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

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

CSS

@import url("https://code.highcharts.com/css/highcharts.css");

#container {
    height: 400px;
    max-width: 800px;
    min-width: 320px;
    margin: 0 auto;
}

:root {
    /* Colors for data series and points */
    --highcharts-color-0: #b3597c;
    --highcharts-color-1: #c4688c;
    --highcharts-color-2: #78a8d1;
    --highcharts-color-3: #7991d2;
    --highcharts-color-4: #7d7bd4;
    --highcharts-color-5: #977dd5;
    --highcharts-color-6: #b3597c;
    --highcharts-color-7: #b27fd6;

    /* UI colors */
    --highcharts-background-color: #333;

    /*
        Neutral color variations
        https://www.highcharts.com/samples/highcharts/css/palette-helper
    */
    --highcharts-neutral-color-100: rgb(255, 255, 255);
    --highcharts-neutral-color-80: rgb(214, 214, 214);
    --highcharts-neutral-color-60: rgb(173, 173, 173);
    --highcharts-neutral-color-40: rgb(133, 133, 133);
    --highcharts-neutral-color-20: rgb(92, 92, 92);
    --highcharts-neutral-color-10: rgb(71, 71, 71);
    --highcharts-neutral-color-5: rgb(61, 61, 61);
    --highcharts-neutral-color-3: rgb(57, 57, 57);

    /* Highlight color variations */
    --highcharts-highlight-color-100: rgb(122, 167, 255);
    --highcharts-highlight-color-80: rgb(108, 144, 214);
    --highcharts-highlight-color-60: rgb(94, 121, 173);
    --highcharts-highlight-color-20: rgb(65, 74, 92);
    --highcharts-highlight-color-10: rgb(58, 63, 71);
}

JavaScript

Highcharts.chart('container', {

  chart: {
    type: "area",
    styledMode: true
  },

  title: {
    text: 'Pie point CSS'
  },

  series: [{
      name: "USA",
      data: [
        null,
        null,
        null,
        null,
        null,
        2,
        9,
        13,
        50,
        170,
        299,
        438,
        841,
        1169,
        1703,
        2422,
        3692,
        5543,
        7345,
        12298,
        18638,
        22229,
        25540,
        28133,
        29463,
        31139,
        31175,
        31255,
        29561,
        27552,
        26008,
        25830,
        26516,
        27835,
        28537,
        27519,
        25914,
        25542,
        24418,
        24138,
        24104,
        23208,
        22886,
        23305,
        23459,
        23368,
        23317,
        23575,
        23205,
        22217,
        21392,
        19008,
        13708,
        11511,
        10979,
        10904,
        11011,
        10903,
        10732,
        10685,
        10577,
        10526,
        10457,
        10027,
        8570,
        8360,
        7853,
        5709,
        5273,
        5113,
        5066,
        4897,
        4881,
        4804,
        4717,
        4571,
        4018,
        3822,
        3785,
        3805,
        3750,
        3708,
        3708
      ]
    },
    {
      name: "USSR/Russia",
      data: [
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        1,
        5,
        25,
        50,
        120,
        150,
        200,
        426,
        660,
        863,
        1048,
        1627,
        2492,
        3346,
        4259,
        5242,
        6144,
        7091,
        8400,
        9490,
        10671,
        11736,
        13279,
        14600,
        15878,
        17286,
        19235,
        22165,
        24281,
        26169,
        28258,
       ...