CODEWITHSUNDEEP
highcharts
MrLight
MrLight

Reputation: 99

sync width of xAxis between two charts, when one chart has multiple yAxis

I have two highcharts on one page one of the charts can add and remove a second or thrid yAxis dynamicly. When this is done of course the width of the xAxis is shorter than the one with only one yAxis. Now i want to sync the width of the xAxis to keep both charts underneath each other. When I try the set xAxis width the width is changed but the chartarea is sticking to the left and not to the right. How can I get draw both chart-areas with the same dimensions?

Here is a fiddle with a small example: Fiddle Fiddle

Best MrLight

Upvotes: 0

Views: 170

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

You can use top, width and offset properties to size and position axes. First two of these are not documented but they work.

Live demo: http://jsfiddle.net/BlackLabel/cvey8ap8/

xAxis: {
      categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'],
      width: '90%',
      left: '8%',

    // Categories for the charts
    },
    yAxis: [{
        min: 0, // Lowest value to show on the yAxis
        title: {
          text: 'Apple Consumption' // Title for the yAxis
        },
        left: '7%',
        offset: 0
      },
      {
        min: 0, // Lowest value to show on the yAxis
        title: {
          text: 'Apple12 Consumption' // Title for the yAxis
        },
        offset: 0

      }
    ],

Upvotes: 0

Related Questions