Point Value in scatter chart - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

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

Description

Point Value in scatter 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.8.3.js"></script> 
      <script type="text/javascript">
var chart;/*from  ww  w  . ja  v a2  s .  c o m*/
var theData = [
    {id: "AL",
     part: "Alabama",
     x: 0,
     y: 0.9314},
    {id: "AZ",
     part: "Arizona",
     x: 0.266694541,
     y: 0.9325},
    {id: "AR",
     part: "Arkansas",
     x: 0.778879385,
     y: 1.0536},
    {id: "CA",
     part: "California",
     x: 1.88221677,
     y: 1.0537},
    {id: "CO",
     part: "Colorado",
     x: -0.785223994,
     y: 1.0808},
    {id: "CT",
     part: "Connecticut",
     x: -1.210499474,
     y: 1.0923},
]
$(function(){
   chart = new Highcharts.Chart({
       chart: {
         type: "scatter",
         renderTo: 'container'
      },
      title: {
         text: "THREAT",
         align: "left"
      },
      yAxis: {
         gridLineWidth: 0,
         labels:{
            enabled: false
         },
         title: {
            text: null
         }
         // tickAmount: 0
      },
      xAxis: {
         labels: {
            enabled: false
         },
         tickColor: "rgba(255,255,255,0)"
      },
      credits: {
         enabled: false
      },
      plotOptions: {
         scatter: {
            marker: {
               radius: 5
            },
            tooltip: {
               pointFormatter: function(){
                  console.log(this);
                  console.log(this.state);
                  return "<span>" + this.part + "</span>"
               }
            }
         }
      },
      series: [{
         data: theData
      }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials