Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

#container {
    height: 400px;
}

JavaScript

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    alignTicks: false,
    zoomType: 'xy',
    resetZoomButton: {
      position: {
        align: 'left',
        verticalAlign: 'top',
        x: 10,
        y: 10
      },
      relativeTo: 'chart'
    },

  },

  xAxis: {
    categories: ["2022-06-06", "2022-06-07", "2022-06-08", "2022-06-09", "2022-06-10", "2022-06-11", "2022-06-12", "2022-06-13"],
    breaks: [{
      from: 2,
      to: 3,
      //breakSize: 1
    }],
    tickInterval: 1,
    labels: {
      //rotation: 45,
      //step: 2,
      //staggerLines: 2
    }
  },
  yAxis: {
    title: {
      text: '%'
    },
    max: 100,
  },
  series: [{
    color: "#e88307",
    type: "spline",
    data: [99.68, 99.69, 99.68, 99.62, 99.62, 99.59, 99.57, 99.67]
  }, {
    color: "#9d07e8",
    type: "spline",
    data: [99.89, 99.89, 99.89, 99.88, 99.88, 99.88, 99.88, 99.89]
  }, {
    color: "#0738e8",
    type: "spline",
    data: [98.86, 98.85, 98.94, 98.55, 97.42, 96.75, 96.79, 96.46]
  }, {
    color: "#07e838",
    type: "spline",
    data: [98.4352499872, 98.4351670785, 98.5149062688, 98.057699388, 96.9333442352, 96.23770101, 96.2581544364, 96.0359261498]
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 1000
      },
      chartOptions: {
        xAxis: {
          labels: {
            rotation: -45,
          }
        }
      }
    }]
  }
});