type flags with custom legend icon in stock chart - Javascript highcharts

Javascript examples for highcharts:Stock Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Stock Chart

Description

type flags with custom legend icon in stock chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {// w  ww . jav  a2  s . co  m
    // legend wrapper
    (function (H) {
        H.seriesTypes.flags.prototype.drawLegendSymbol = function (legend, series) {
              var size = legend.itemHeight || 18,
               url = series.userOptions.legendImage || 'https://www.highcharts.com/samples/graphics/snow.png';
            series.legendSymbol = this.chart.renderer.image(
                url,
                0,
                0,
                size,
                size
            ).add(series.legendGroup);
        };
    })(Highcharts)
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
  data = data.splice(-50,50);
    // Create the chart
    $('#container').highcharts('StockChart', {
      legend: {enabled:true},
      series: [{
        name: 'USD to EUR',
        data: data,
        id: 'dataseries'
        // the event marker flags
      }, {
        type: 'flags',
        onSeries: 'resources',
        colorByPoint: false,
        shape: 'circlepin',
        width: 16,
        color: '#939598',
        fillColor: '#fff',
        style: {
          color: '#262626'
        },
        legendImage: 'https://www.highcharts.com/samples/graphics/sun.png',
        data: [{
          x: Date.UTC(2015, 5, 26),
          title: 'F',
          text: 'Greek Negotiations Take Sharp Turn for Worse, US Dollar set to Rally '
        }]
      },{
        type: 'flags',
        onSeries: 'resources',
        colorByPoint: false,
        shape: 'circlepin',
        width: 16,
        color: '#939598',
        fillColor: '#fff',
        style: {
          color: '#262626'
        },
        //legendImage: 'https://www.highcharts.com/samples/graphics/sun.png',
        data: [{
          x: Date.UTC(2015, 5, 8),
          title: 'C',
          text: 'Stocks fall on Greece, rate concerns; US dollar dips'
        }]
      }]
    });
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px"></div>  
   </body>
</html>

Related Tutorials