HighCharts Moving X Axis From bottom of Chart

Question

I have a column chart in high charts with both positive and negative values. I need the xAxis line to show at value 0. However, I cannot find a property in the HighCharts API to accomplish this for me. By default, the xAxis line is showing at the bottom of the chart or the most negative value.

Check out my example here: http://jsfiddle.net/csallemi/HStha/15/. In this example the xaxis is at -2%. I need to have it shown at the 0% value.

Here is my Javascript HighChart Object that gets the necessary Column Graph

var YTD = 'YTD'
var yr1 = 'Year 1'
var yr3 = '*3 Year'
var yr5 = '*5 Year'
var sinceIN = '* Since Inception (5/31/2012)'

$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
   chart: {renderTo: 'container', type: 'column'},
   title: {text: 'Report Title', style: {fontSize: '18px', color: '#1D5293', fontWeight: 'bold'}, },
   subtitle: {text: '(As of 6/30/2012)', style: {fontSize: '18px', color: '#1D5293'}, y: 40},
   xAxis: {categories: [YTD, yr1, yr3, yr5, sinceIN], lineColor: '#C1BADB', tickWidth: 2},
   yAxis: {title: {text: ''},
           lineColor: '#C1BADB',
           lineWidth: 1,
           labels: {formatter: function() {return this.value+'%';}},
           gridLineWidth: '0px',
           tickWidth: 2            

          },
   tooltip: {enabled: true, formatter: function() {return this.series.name +': '+ this.y +'%';},},
  credits: { enabled: false },
  series: [
      {name: 'XXX Company Ltd. (Net)', data: [3.02, -0.61, 2.03, 1.51, 5.35], dataLabels: {enabled: true, color: '#333', formatter: function(){return this.y+'%'}}, color: '#1D5293'},
      {name: 'XXX Relative Return Index (Gross)**', data: [2.45, 0.85, 4.11, 0.73, 3.56], dataLabels: {enabled: true, color: '#333', formatter: function(){return this.y+'%'}}, color: '#9E9E9E'}
      ],
   legend: {layout: 'vertical', align: 'top', verticalAlign: 'top', x: 50, y: 65, borderWidth: 0, margin: 30},
  });
});

});

Strikers Strikers · Accepted Answer · 2013-04-26T12:00:52

set

yAxis:{
    min: 0
},

I've updated your fiddle http://jsfiddle.net/HStha/25/

hope this is useful

HighCharts Moving X Axis From bottom of Chart

1 Answers