Custom data label for a single point in OHLC candlestick charts - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

Custom data label for a single point in OHLC candlestick charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <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> 
      <script type="text/javascript">
$.getJSON('https://www.highcharts.com/samples/data/aapl-ohlc.json', function(data) {
  Highcharts.stockChart('container', {
    rangeSelector: {/*from ww w. j a v a2s .  com*/
      selected: 1
    },
    title: {
      text: 'AAPL Stock Price'
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          borderRadius: 5,
          backgroundColor: 'rgba(252, 255, 197, 0.7)',
          borderWidth: 1,
          borderColor: '#AAA',
          y: -6
        }
      }
    },
    series: [{
      type: 'candlestick',
      name: 'AAPL Stock Price',
      data: [{
          time: 0,
          high: 100,
          low: 50,
          open: 60,
          close: 80,
          dataLabels: {
            borderRadius: 0,
            backgroundColor: 'green',
            borderWidth: 4,
            borderColor: 'black'
          }
        },
        {
          time: 1,
          high: 90,
          low: 50,
          open: 80,
          close: 70
        },
        {
          time: 2,
          high: 80,
          low: 10,
          open: 40,
          close: 60
        },
        {
          time: 3,
          high: 80,
          low: 10,
          open: 60,
          close: 40
        },
      ],
    }]
  });
});

      </script>  
   </body>
</html>

Related Tutorials