Question

I would like to align the x-axis labels and flush left to y-axis on the left and flush right on the right to y-axis in the chart shown below:

Here is the relevant code for x-axis and y-axes series:

var chart2 = new Highcharts.Chart({
  chart: {
    renderTo: 'discount_chart',
    type: 'line'
  },
  title: {
    text: "#{title_text_sense}"
  },
  xAxis: {
    title: { text: 'Price Range - $' },
    categories: #{price_array},
    showLastLabel: true,
  },
  yAxis: [{
    min: 0,
    type: 'linear',
    title: { text: 'Rate of Return - %' }
  },{
    min: 0,
    type: 'linear',
    title: { text: 'Disc. N.Rev./Invest.(ROI)' },
    opposite: true
  }],

Note that the variables are read from database so the price_array which is used to define the x-axis contains these values for this example:

[“$60.00″,”$70.00″,”$80.00″,”$90.00″,”$100.00”]

Is there a way to do this in HighCharts?

Thanks.

Bharat

Answer 1

Thanks for your time. I really appreciate it. But I figured this out. Here is a fork of my original jsFiddle link that posted. It does exactly what I want to do. Basically, I removed the categories option in xAxis and then used the custom label formatter for xAxis; it did the trick for me. Below is

my Highcharts JavaScript code to do this:

var x_labels = ["$60.00","$70.00","$80.00","$90.00","$100.00"];
var chart2 = new Highcharts.Chart({
    chart: {
        renderTo: 'discount_chart',
        type: 'line'
    },
    title: {
        text: "Big Wells 2 Economic Sensitivity Plot"
    },
    xAxis: {
        title: {
            text: 'Price Range - $'
        },
        labels: {
            formatter: function() {
                return x_labels[this.value];
            }
        },
        showLastLabel: true,
    },
    yAxis: [{
        min: 0,
        type: 'linear',
        title: {
            text: 'Rate of Return - %'
        }},
    {
        min: 0,
        type: 'linear',
        title: {
            text: 'Disc. N.Rev./Invest.(ROI)'
        },
        opposite: true}],
    tooltip: {
        formatter: function() {
            var seriesName = {
                'Rate of Return': 'ROR',
                'Return on Investment': 'ROI'
            }[this.series.name];
            return '<b>' + this.series.name + '</b><br/>Price = ' + x_labels[this.x] + ', ' + seriesName + ' = ' + (Math.round(this.y * 1000) / 1000);
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -20,
        y: 100,
        borderWidth: 0
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
    series: [{
        name: 'Rate of Return',
        color: 'red',
        data: [-4.608072102337354, -0.738803860865155, 4.653294970652549, 8.92228974293352, 14.025752639875485],
        pointStart: 0},
    {
        name: 'Return on Investment',
        color: 'blue',
        data: [0.5863077142857144, 0.7098245714285715, 0.8340802857142857, 0.9587922857142858, 1.083803],
        pointStart: 0,
        yAxis: 1}]
});

jSFiddle Demo of above code to fork: