Basic area

author(s): Torstein Hønsi

by fekkyDev s

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Demonstrating a basic area chart, also known as a mountain chart.
        Area charts are similar to line charts, but commonly used to visualize
        volumes.
    </p>
</figure>

JavaScript

// Data retrieved from https://fas.org/issues/nuclear-weapons/status-world-nuclear-forces/
var colors =['#3e48bb',"#ea4052","#e3c432","#29abe2","#059ea6","#9bce7f","#c19b70","#961b4d","#018768","#b1a733"]
Highcharts.chart('container', {
    
  "chart": {
    "plotBorderWidth": 0,
    "plotBorderColor": "transparent",
    "backgroundColor": "transparent",
    "plotBackgroundColor": "white",
    "ignoreHiddenSeries": false,
     type: 'areaspline',
    "spacing": [
      0,
      5,
      0,
      5
    ],
    "plotShadow": false,
    "shadow": false,
    "zoomType": "x",
    "width": null,
    "height": null,
    "events": {},
    "marginBottom": 90,
    "marginRight": null,
    "renderTo": "highChart2-body"
  },
  "rangeSelector": {
    "enabled": false
  },
  "global": {
    "useUTC": true,
    "timezoneOffset": "-330"
  },
  "lang": {
    "contextButtonTitle": "Print/Download Chart"
  },
  "navigator": {
    "enabled": false
  },
  "yAxis": {
 
    "border": 0,
    "minPadding": null,
    "lineWidth": 1,
    //min: 0, max: 100,
    "gridLineWidth": 0,
    "tickPixelInterval": 50,
    "labels": {
      "style": {
        "color": "#606060",
        "fontFamily": "Roboto",
        "fontSize": "11px",
        "textDecoration": "none",
        "whiteSpace": "normal",
        "fontWeight": 400
      },
      "align": "right",
      
    },
    "showLastLabel": true,
    //"max": null,
   // "min": 0,
    "gridLineColor": "#e1e1e1",
    "lineColor": "#e1e1e1",
    "title": {
      "text": "Percentage(%)",
      "style": {
        "color": "#969696",
        "fontFamily": "Roboto",
        "fontSize": "11px",
        "fontWeight": "400"
      }
    },
    "minorGridLineColor": "#e1e1e1",
    "tickColor": "#e1e1e1"
  },
  "plotOptions": {
  
    "series": {
    "areaspline": {
            
             "marker": {
            "enabled": false
        }},
      "states": {
        "hover": {
          "fillOpacity": 0.9,
          "enabled": true,
          "lineWidth":...