Highcharts Demo

author(s): Torstein Hønsi

by AlexLvovsky

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id=main>
  <div id="chart" style="min-width: 310px; height: 170px; margin: 0 auto"></div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#main {
  position: relative;
  overflow: hidden;
  height: 100%;
}

#chart {
  border: 1px solid black;
  overflow: hidden;
  position: fixed;
  bottom: 0%;
  width: 100%;
}

JavaScript

Highcharts.chart('chart', {
  chart: {
    backgroundColor: "beige",
    type: "spline"
  },
  legend: {
    enabled: false
  },
  xAxis: {
    type: "datetime"
  },
  yAxis: {
    offset: 0,
    min: 0,
    title: {
      text: "",
    },
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false
      },
      states: {
        hover: {
          enabled: false
        }
      }
    },
    spline: {
      softThreshold: false
    }
  },
  tooltip: {
    outside: true,
    shared: true,
    shadow: false,
    backgroundColor: "rgba(255,255,255, 0.8)",
    borderColor: "#e6e7e8",
    borderWidth: 1,
    valueSuffix: " seconds",
    positioner(labelWidth, labelHeight, point) {
      var chart = this.chart,
        plotLeft = chart.plotLeft,
        plotTop = chart.plotTop,
        plotWidth = chart.plotWidth,
        plotHeight = chart.plotHeight,
        distance = this.options.distance || 12, // You can use a number directly here, as you may not be able to use pick, as its an internal highchart function 
        pointX = point.plotX,
        pointY = point.plotY,
        x = pointX + plotLeft + (chart.inverted ? distance : -labelWidth - distance),
        y = pointY - labelWidth + plotTop + 15, // 15 means the point is 15 pixels up from the bottom of the tooltip
        alignedRight;
        // It is too far to the left, adjust it
    if (x < 7) {
        x = plotLeft + pointX + distance;
    }

    // Test to see if the tooltip is too far to the right,
    // if it is, move it back to be inside and then up to not cover the point.
    if ((x + labelWidth) > (plotLeft + plotWidth)) {
        x -= (x + labelWidth) - (plotLeft + plotWidth);
        y = pointY - labelHeight + plotTop - distance;
        alignedRight = true;
    }

    // If it is now above the plot area, align it to the top of the plot area
    if (y < plotTop + 5) {
        y = plotTop + 5;

        // If the tooltip is still covering the point, move it below instead
        if...