Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

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

JavaScript

const data = [{
    x: 1,
    y: 10000000
  },
  {
    x: 2,
    y: 20000000
  },
  {
    x: 3,
    y: 30000000
  },
  {
    x: 4,
    y: 40000000
  },
  {
    x: 5,
    y: 50000000
  },
  {
    x: 6,
    y: 60000000
  },
  {
    x: 7,
    y: 70000000
  }
];

const options = {
  chart: {
    type: 'scatter',
    style: {
      fontFamily: 'Montserrat, sans-serif'
    }
  },
  credits: {
    enabled: false
  },
  title: {
    text: 'Graph',
    style: {
      fontSize: '16px'
    }
  },
  legend: {
    enabled: false
  },
  xAxis: [{
    title: {
      text: ''
    },
    min: 0,
    max: 8,
    tickInterval: 0.1,
    tickLength: 0,
    gridLineWidth: 1,
    labels: {
      step: 10,
      style: {
        fontSize: '14px'
      }
    }
  }, {
    title: {
      text: ''
    },
    min: 0,
    max: 8,
    offset: 0,
    tickInterval: 1,
    tickLength: 10,
    labels: {
      enabled: false
    }
  }],
  yAxis: {
    title: {
      text: ''
    },
    min: 0000000,
    max: 100000000,
    tickInterval: 5000000,
    gridLineColor: '#E2E2E2',
    gridLineWidth: 1,
    labels: {
      step: 2,
      style: {
        fontSize: '14px'
      },
      formatter: function() {
        return this.value.toLocaleString();
      }
    }
  },
  series: [{
    name: 'Values',
    color: '#1B1534',
    data: data
  }]
};

Highcharts.chart('container', options);