Printing text on the chart - Javascript highcharts

Javascript examples for highcharts:Chart Text

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

Description

Printing text on the chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
      <script type="text/javascript" src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script> 
      <script type="text/javascript" src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script> 
      <script type="text/javascript">
$(function() {// w  w w . ja  va 2s  .  c o  m
    var chart = chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Body Weight',
            x: -20 //center
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Weight (lbs)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'}]
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + 'lbs';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            borderWidth: 0
        },
        series: [{
            name: 'George',
            data: [185, 190, 185, 180]},
        {
            name: 'Bindu',
            data: [115, 110, 112, 115]},
        {
            name: 'Phil',
            data: [195, 190, 190, 185]}]
    });
    var text = chart.renderer.text(
                '500',
                57 ,
                112.1
            ).css({
                color: '#F00',
                fontSize: '11px'
            }).add();
$('#button').click(function() {
           var text = chart.renderer.text(
                '500',
                57 ,
                112.1
            ).css({
                color: '#F00',
                fontSize: '11px'
            }).add();
    });
    $.each($('svg text tspan') , function(index, value){
        var myval = 500 ; // change this variable as required
        if($(this).text() == myval){
           $(this).attr('x' , 40) ;
            $(this).parents('text').attr('y' ,100) ;
        }
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <button id="button" data-bind="click: addUser">Add Series</button>  
   </body>
</html>

Related Tutorials