CapsuleTime

by mariusseiceanu

HTML

<script src="https://code.highcharts.com/9.2.2/highcharts.src.js"></script>
<!-- 
<script src="https://code.highcharts.com/modules/boost.js"></script>
 --> 
<div id="container" style="height: 630px"></div>

<button id="addSeries" onClick="addSeries()">Add Series</button>
<button id="addData">Add Data</button>
<button id="removeSeries"onClick="removeSeries()">Remove Series</button>

JavaScript

let chart;
function yAxisFormatter() {

}
function getNumericTickPositions() {

}
function createChart() {
    let chartConfig;
    chartConfig = {
      chart: {
        alignTicks: false,
        animation: false,
        spacing: [0, 5, 5, 0],
        zoomType: 'x',
				boost: {
          enabled: false,
           useGPUTranslations: false
        },
        tooltip: {
          split: false,
          shared: true,
          animation: false,
          shadow: false
        },
        resetZoomButton: {
          theme: {
            display: 'none'
          }
        },
      },

      title: {
        style: {
        	display: 'none'
    		}
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      xAxis: {
        ordinal: false,
        type: 'datetime',
        dateTimeLabelFormats:				{
          millisecond: '%l:%M:%S.%L %P',
          second: '%l:%M:%S %P',
          minute: '%l:%M %P',
          hour: '%l:%M %P',
          day: '%b %e',
          week: '%b %e',
          month: '%b \'%y',
          year: '%Y'
		    },
        minRange: 1,
        minTickInterval: 0,
        tickLength: 5,
        //categories: [0,300000,600000,900000,1200000,1500000,1800000,2100000,2400000,2700000,3000000,3300000,3600000],
        labels: {
          enabled: true,
          style: {
            color: '#869298',
            fontSize: '12px',
            fontFamily: 'Helvetica, sans-serif',
            paddingTop: '0px'
          },
				},
      },

      plotOptions: {
        series: {
          turboThreshold: 1,
          boostThreshold: 0,
          allowPointSelect: false,
          animation: false,
          cursor: 'pointer',
          linecap: 'square',
          dataGrouping: {
            enabled: false
          },
          line: {
            connectNulls: false
          },
       		
          marker: {
            enabled: false,
            symbol: 'circle',
            states: {
             ...