CODEWITHSUNDEEP
highcharts
CodeLikeBeaker
CodeLikeBeaker

Reputation: 21312

How to position a Highcharts title on the right of the chart?

I'm checking through the documentation and don't really see a way to do this.

What I'd like to do is position the chart title to the right of the chart, rotated 90 degrees and centered vertically.

So something like this (used Photoshop to represent rotation):

enter image description here

I know I can set the x, and y position like this:

title: {
    text: 'Chart title',
    align: 'right',
    y: 140, 
    x: 50,
    rotation: 90 //this does not work
  }

But that doesn't really give me what I want. Is there a setting that I'm not finding to position the title on the right, and rotate it 90 degrees?

Here is a fiddle I was messing with for the x, y axis positioning:

http://jsfiddle.net/c2tb1p5b/1/

Upvotes: 2

Views: 5122

Answers (1)

bhttoan
bhttoan

Reputation: 2736

You can do this using a combination of x, y placement on the title along with CSS - you will need to mess around with the exact values but something like this should work:

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Chart title',
    align: 'right',
    y:-480,
    x:-280
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    labels: {
      step: 1
    }
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

CSS:

.highcharts-title {
transform: rotate(90deg);
}

http://jsfiddle.net/c2tb1p5b/2/

Upvotes: 2

Related Questions