Can anyone recommend a method of setting the X axis to be a constant width across multiple instances of a bar chart?

See this jsFiddle: /

The first chart is an example of placing the data for 2 locations in a single chart. In this case, Highcharts automatically adjusts the X axis width to accommodate both location labels.

However, I need to separate these 2 locations into separate charts, but maintain the same proportions of X Axis to bar area width for both charts. See charts 2 and 3 in the example. In this case, Highcharts picks an X axis width that suits just the single location and the 2 charts do not line up when stacked.

Is there a method to get the individual charts to maintain the same proportions as each other? I tried setting the xAxis.labels.style.width attribute, and it does something, but doesn't seem to be a concrete width. See /

This example is easiest to see in the jsFiddle, but SO is requiring me to post the code:

 $('#containerAll').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
    },
        {
            name: 'Female',
            data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]   
        }
    ],
    xAxis: {
        categories: ['Short Name', 'Much Longer Location Name']   
    }
});


$('#container1').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"58.1%","y":0.581}]
    },
        {
            name: 'Female',
            data: [{"name":"58.5%","y":0.585}]   
        }
    ],
    xAxis: {
        categories: ['Short Name'],
        labels: {
            style: {
                width: 200
            }
        }
    }
});

 $('#container2').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"18.1%","y":0.181}]
    },
        {
            name: 'Female',
            data: [{"name":"28.5%","y":0.285}]   
        }
    ],
    xAxis: {
        categories: ['Much Longer Location Name'],
        labels: {
            style: {
                width: 200
            }
        }
    }
});

Can anyone recommend a method of setting the X axis to be a constant width across multiple instances of a bar chart?

See this jsFiddle: http://jsfiddle.net/LCYwW/1/

The first chart is an example of placing the data for 2 locations in a single chart. In this case, Highcharts automatically adjusts the X axis width to accommodate both location labels.

However, I need to separate these 2 locations into separate charts, but maintain the same proportions of X Axis to bar area width for both charts. See charts 2 and 3 in the example. In this case, Highcharts picks an X axis width that suits just the single location and the 2 charts do not line up when stacked.

Is there a method to get the individual charts to maintain the same proportions as each other? I tried setting the xAxis.labels.style.width attribute, and it does something, but doesn't seem to be a concrete width. See http://jsfiddle.net/LCYwW/3/

This example is easiest to see in the jsFiddle, but SO is requiring me to post the code:

 $('#containerAll').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
    },
        {
            name: 'Female',
            data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]   
        }
    ],
    xAxis: {
        categories: ['Short Name', 'Much Longer Location Name']   
    }
});


$('#container1').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"58.1%","y":0.581}]
    },
        {
            name: 'Female',
            data: [{"name":"58.5%","y":0.585}]   
        }
    ],
    xAxis: {
        categories: ['Short Name'],
        labels: {
            style: {
                width: 200
            }
        }
    }
});

 $('#container2').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"18.1%","y":0.181}]
    },
        {
            name: 'Female',
            data: [{"name":"28.5%","y":0.285}]   
        }
    ],
    xAxis: {
        categories: ['Much Longer Location Name'],
        labels: {
            style: {
                width: 200
            }
        }
    }
});

• javascript
• charts
• highcharts

3 Answers 3

You have a lot more control over the labels if you turn on useHTML.

    xAxis: {
        categories: ['Short Name'],
        labels: {
            style: {
                width: '100px',
                'min-width': '100px'
            },
            useHTML : true
        }
    }

http://jsfiddle.net/LCYwW/5/

You'll also probably have to set a min and max for the yAxis to keep the data in proportion.

Fiddle with the yAxis max set: http://jsfiddle.net/LCYwW/6/

Also consider, using the chart: marginLeft property to set a fixed width for the labels:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            marginLeft: 160
        },
        // ...
    })
});

This preserves the other behavior of the chart, e.g., alignment of the labels. Also see this question.

Adding the marginLeft property inside of chart worked like a charm for me.

chart: {
  type: 'bar',
  marginLeft: 200
}, ...