CODEWITHSUNDEEP
javascriptjqueryhighchartspositiontitle
Philip
Philip

Reputation: 7166

Highcharts - Position title under chart

Is it possible to position the title directly under the chart, if I set it to verticalAlign: 'bottom' its not place directly under the chart but at the bottom and that's not what I'm after.

title: {
    enabled: true,
    text: 'Foo',
    verticalAlign: 'bottom',
    align: 'left'
},

Upvotes: 4

Views: 16984

Answers (4)

Minh Tri Ha
Minh Tri Ha

Reputation: 21

You need to add the property "floating" in the title object.

According to document, verticalAlign property is: The vertical alignment of the title. Can be one of "top", "middle" and "bottom". When a value is given, the title behaves as if floating were true.

 {
        title: {
            text: "Your title text",
            floating: true,
            verticalAlign: "bottom"
        }
 }

Document link: https://api.highcharts.com/highcharts/title

JSFiddle for position title under chart: JSFiddle

Upvotes: 0

truchiranga
truchiranga

Reputation: 499

If you don't want to set the marginBottom as proposed by @Andre above, you can also use the size attribute in the series specification.

series: [
  {
    name: 'Categories',
    data: data,
    size: '60%'
  },
]

This makes the size of the chart smaller so that the bottom aligned title does not overlap with it.

Upvotes: 1

Andrew
Andrew

Reputation: 8038

Here is how we can now set the title below a chart without using fixed coordinates nor JQuery.

title: {
        text: 'My title',
        align: 'center',
        verticalAlign: 'bottom',
        margin: 50,
        floating: true,
        style: {
          // margin: '50px', // does not work for some reasons, see workaround below
          color: '#707070',
          fontSize: '12px',
          fontWeight: 'normal'
          textTransform: 'none'
        }
      }

Because I didn't manage to get the margin property working on the title itself, I used the workaround proposed by @AleB above:

chart:{
        marginBottom : '50' // this to make room for title under axis
      }

Here is a jsfiddle.

Upvotes: 3

AleB
AleB

Reputation: 82

See this fiddle : Fiddle

I moved the title to desired location by giving it a fixed y-coordinate.

$(function () {
$('#container').highcharts({
    chart: {
        plotBorderWidth: 1,
        marginLeft: 80,
        marginBottom : 100 // this to make room for title under axis
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: 'My custom title',
        align: 'center',
        y: 340 //  this to move y-coordinate of title to desired location
    },
    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]        
    }]
});

If you dont want to use fixed numbers to position your title (e.g maybe you have charts that dynamically change in size), no worries, you can feed it a formula or function, for example: 

$('#container').highcharts({
...
    title: { y : $('#container').height() * 0.85 } // this will position the title with 85% margin from the top.
...
});

or

function myTitlePosition(params){ //return some custom value in here }

$('#container').highcharts({
...
    title: { y : mytitlePosition(params) }
...
});

Upvotes: 6

Related Questions