Highcharts Demo

author(s): Torstein Hønsi

by jbara

HTML

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

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

CSS

#container {
    height: 400px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
chart: {
        animation: false,
        events: {
          load: function () {
  
              this.watermarkImage = this.renderer
                  .image('https://www.svgrepo.com/show/148626/test.svg')
                  .attr( {
                    x: 'calc(50% - 285px)',
                    y: 'calc(50% - 75px)',
                    zIndex: 1,
                    width: window.innerWidth < 1025 ? 190 * 3 : 190 * 3,
                    height: window.innerHeight < 750 ? 50 * 3 : 50 * 3
                  })
                  .add();
          },
          redraw: function () {
            
            if (this.watermarkImage) {
              this.watermarkImage.attr( {
                x: 'calc(50% - 285px)',
                y: 'calc(50% - 75px)',
                zIndex: 1,
                width: window.innerWidth < 1025 ? 190 * 3 : 190 * 3,
                height: window.innerHeight < 750 ? 50 * 3 : 50 * 3
              });
            }
          }
        },
        type: 'line',
      },
    title: {
        text: 'Demo of predefined, image and custom marker symbols'
    },

    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
            'Oct', 'Nov', 'Dec'
        ]
    },

    series: [{
        name: 'Predefined symbol',
        data: [
            29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 316.4,
            294.1, 195.6, 154.4
        ],
        marker: {
            symbol: 'triangle'
        }
    }],

    credits: {
        enabled: false
    }
});