add texts to a chart - Javascript highcharts

Javascript examples for highcharts:Chart Text

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

Description

add texts to a 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">
    window.onload=function(){/*from  w w w. j  av  a 2  s.c o  m*/
$(function() {
  function plotLineLabel (value, text, x = 40) {
    return {
      width: 0,
      value,
      label: {
        text,
        align: 'right',
        x,
        style: {
          color: '#A7A1A1'
        }
      }
    }
  }
  $('#emmisions2015_2050').highcharts({
    chart: {
      type: 'column',
      marginRight: 100
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    title: {
      text: null
    },
    xAxis: {
      opposite: true,
      categories: ['Transport', 'Purchased Electricity', 'Direct Emissions'],
      tickWidth: 0
    },
    yAxis: {
      title: {
        text: false
      },
      plotLines: [
        plotLineLabel(-4, 'Energy Efficiency'),
        plotLineLabel(-4 -8, 'Fuel Switch', 5),
        plotLineLabel(-4 -8 -4.5, 'Demand-side Flexibility', 80),
        plotLineLabel(-4 -8 -4 -4, 'Emerging & breakthrough', 90)
      ]
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
          'Total: ' + this.point.stackTotal;
      }
    },
    plotOptions: {
      series: {
        borderWidth: 0,
        dataLabels: {
          enabled: true,
          rotation: 0,
          align: 'center',
          verticalAlign: 'middle',
          style: {
            textOutline: false
          },
          borderWidth: 1,
          formatter: function() {
            if (this.point.isInside == true) {
              return '<span style="color: white">' + this.y + '%</span>';
            } else {
              return '<span style="color: black">' + this.y + '%</span>';
            }
          }
        }
      },
      column: {
        stacking: 'normal',
        format: '{point.x:.1f} Billion Euro'
      }
    },
    series: [{
      name: 'Emerging & Breakthrough',
      data: [{
        x: 2,
        y: -5,
        color: '#8cc640'
      }]
    }, {
      name: 'Demand-side Flexibility',
      data: [{
        x: 2,
        y: -2,
        color: '#8cc640'
      }]
    }, {
      name: 'Fuel Switch',
      data: [{
        x: 2,
        y: -8,
        color: '#8cc640'
      }]
    }, {
      name: 'Energy Efficiency',
      data: [{
        y: -4,
        color: '#51a332'
      }, {
        y: -11,
        color: '#26b6cc'
      }, {
        y: -7,
        color: '#8cc640'
      }]
    }]
  });
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div class="emisions" id="emmisions2015_2050"></div>  
   </body>
</html>

Related Tutorials