Highcharts Demo

author(s): Torstein Hønsi

by mehulkar

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div class="parent">
  <main>
     <div id="container"></div>
  </main>
</div>  


<button id="large">Large</button>
<button id="small">Small</button>

CSS

#container {
	height: 300px;
	min-width: 310px;
	max-width: 800px;
}

.parent {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "main"
}

main {
  grid-area: main
}

JavaScript

const data = {
  "chart": {
    "type": "line"
  },
  "series": [
    {
      "name": "app.js",
      "data": [
        1292217,
        1292217,
        1292476,
        1292612,
        1292612,
        1295869,
        1295548,
        1295548,
        1295694,
        1295858
      ],
      "point": {
        "events": {}
      },
      "yAxis": 1,
      "connectNulls": true
    },
    {
      "name": "vendor.js",
      "data": [
        1143377,
        1143377,
        1143377,
        1143377,
        1143386,
        1143386,
        1143386,
        1143386,
        1143386,
        1143386
      ],
      "point": {
        "events": {}
      },
      "yAxis": 1,
      "connectNulls": true
    },
    {
      "name": "Landing page",
      "data": [
        68,
        68,
        69,
        66,
        68,
        70,
        73,
        69,
        71,
        72
      ],
      "yAxis": 0,
      "connectNulls": true
    },
  ],
  "plotOptions": {
    "series": {
      "allowPointSelect": true
    }
  },
  "title": {
    "text": "Bundle JS Size vs Lighthouse Scores"
  },
  "tooltip": {
    "shared": true
  },
  "xAxis": {
    "categories": [
      "2022.5.0",
      "2022.6.0",
      "2022.7.0",
      "2022.8.0",
      "2022.9.0",
      "2022.10.0",
      "2022.11.0",
      "2022.12.0",
      "2022.13.0",
      "2022.14.0"
    ],
    "crosshair": true,
    "labels": {
      "staggerLines": 2,
      "autoRotation": [
        -45
      ]
    }
  },
  "yAxis": [
    {
      "min": 0,
      "connectNulls": true,
      "labels": {
        "style": {
          "color": "#90ed7d"
        }
      },
      "title": {
        "text": "Lighthouse Performance Score",
        "style": {
          "color": "#90ed7d"
        }
      },
      "index": 0
    },
    {
      "min": 0,
      "labels": {
        "style": {
          "color": "#7cb5ec"
        }
      },
      "title": {
        "style": {
          "color": "#7cb5ec"
        },
        "text": "File Size"
   ...