X and Y Axis cross at zero in scatter chart - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

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

Description

X and Y Axis cross at zero in scatter chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript">
    $(function(){/*from ww  w. ja  v  a 2  s .  c  om*/
$("#b").click(function(){
    chart.yAxis[0].update({
        offset: -chart.xAxis[0].translate(0)
    });
});
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy',
        backgroundColor: '#eee',
        plotBackgroundColor: '#fff'
    },
    title: {
        text: 'Highcharts Bubbles'
    },
    yAxis: {
        startOnTick: false,
        endOnTick: false,
        min:-50,
        max:50,
        offset:-100,
        lineWidth:1
    },
    xAxis: {
        min:-50,
        max:50,
        offset:-153
    },
    series: [{
        data: (function() {
            var arr = [];
            for (var i = 0; i < 20; i++) {
                arr.push([
                    Math.round(Math.random() * 100-50),
                    Math.round(Math.random() * 100-50),
                    Math.round(Math.random() * 100-50)
                    ]);
            }
            return arr;
        }()),
        dataLabels: {
            //enabled: true
        },
        marker: {
            fillColor: {
                radialGradient: {
                    cx: 0.4,
                    cy: 0.3,
                    r: 0.7
                },
                stops: [
                    [0, 'rgba(255,255,255,0.5)'],
                    [1, 'rgba(69,114,167,0.5)']
                    ]
            }
        }
         /*More options:
         displayNegative: true, // whether to display below zThreshold
         minSize: 8,
         maxSize: '20%',
         negativeColor: null, // secondary color for Z values below zThreshold
         zThreshold: 0
         */
        }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://github.highcharts.com/v3.0Beta/highcharts.js"></script> 
      <script src="https://github.highcharts.com/c8a2ce/highcharts-more.js"></script> 
      <script src="https://github.highcharts.com/c8a2ce/modules/exporting.js"></script> 
      <button id="b">update offset </button> 
      <div id="container" style="height: 400px; width: 600px"></div>  
   </body>
</html>

Related Tutorials