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/highcharts-more.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">
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<div id="container"></div>

JavaScript

// GENAERATE ARROWS
(function(H) {
  H.wrap(H.Axis.prototype, 'getLinePath', function(proceed, lineWidth) {
    let path = proceed.call(this, lineWidth),
      arrowLength = 10,
      horiz = this.horiz,
      endX, endY;

    if (horiz) {
      endX = path[1][1];
      endY = path[1][2];

      path.push(
        ['M', endX, endY],
        ['L', endX - arrowLength, endY - arrowLength / 2],
        ['M', endX, endY],
        ['L', endX - arrowLength, endY + arrowLength / 2]
      );
    } else {
      endX = path[0][1];
      endY = path[0][2];

      path.push(
        ['M', endX, endY],
        ['L', endX - arrowLength / 2, endY + arrowLength],
        ['M', endX, endY],
        ['L', endX + arrowLength / 2, endY + arrowLength]
      );
    }

    return path;
  });
}(Highcharts));

// GENAERATE PARABOLE
function generateParabolaData(a, b, c, xStart, xEnd, step) {
  const data = [];
  for (let x = xStart; x <= xEnd; x += step) {
    const y = a * x * x + b * x + c;
    data.push({
      x,
      y
    });
  }
  return data;
}

const options = {
  chart: {
    type: 'spline',
    animation: false,
    style: {
      fontFamily: 'Montserrat, sans-serif'
    },
    zoomType: 'xy',
    events: {
      load: function() {
        const yAxis = this.yAxis[0];
        yAxis.tickPositions.pop();
        yAxis.tickPositions[0] = undefined;

        this.redraw()
      },
      render: function() {
        const yAxis = this.yAxis[0];
        yAxis.tickPositions.pop();
        yAxis.tickPositions[0] = undefined;
      }
    }
  },
  title: {
    text: 'Graph'
  },
  legend: {
    enabled: false
  },
  xAxis: [{
    title: {
      text: ''
    },
    min: -6,
    max: 6,
    tickPositions: [, -5, -4, -3, -2, -1, 1, 2, 3, 4, 5],
    tickLength: 10,
    zIndex: 100,
    gridLineColor: '#E2E2E2',
    gridLineWidth: 0,
    lineWidth: 1,
    //lineColor: '#E2E2E2',
    height: '50%',
    labels: {
      step: 1,
      style: {
        fontSize: '12px',
      }
    }
  }],
 ...