Highcharts Demo

author(s): Torstein Hønsi

by quangcanh2975

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 200px; max-width: 800px; margin: 0 auto"></div>

JavaScript

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {
    return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

const data = new Array(1000).fill(1);
console.log(data);
const data1 = [1,1,1,1,1,1,1]

Highcharts.chart('container', {
    title: {
        text: 'Camera X'
    },
		yAxis: {
    	visible: false
    },
    xAxis: {
    type: 'datetime'
        , categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        name: 'Predefined symbol',
        data: data1,
        marker: {
            xsymbol: 'url(https://image0.flaticon.com/icons/png/128/832/832656.png)',
        },
        showInLegend: false,
        lineWidth: 0,
        states: {
          hover: {
            lineWidthPlus: 0
          }
        }
    }],

    credits: {
        enabled: false
    },
    tooltip: {
      useHTML: true,
      formatter: function() {
        return '<div>Datetime: xx.yy.2021<br/><img height="50px" width="50px" src="https://finmeasonline.com/images/icons8-bird-50.png"/></div>';
      } 
    }
});