Is there a way to disable the Title and Subtitle in Highcharts?

Question

I'm just going to hardcode it in using html that is around the graph, I don't want to use the built in.

I don't see a "disable: true" option in the API.

Can anybody help me out here.

How do you disable the title / subtitle in highcharts?

(if you simply leave the text blank it still carves out a whitespace in that spot where the title is, i'd like to not have this happen)

score 184 · Answer 1 · edited Feb 14 '23 at 15:58

184

Setting the title text to an empty string is the way to do it.

No space is created for the title in that case:

without text: http://jsfiddle.net/jlbriggs/JVNjs/284/

with text: http://jsfiddle.net/jlbriggs/JVNjs/286/

title:{
    text:''
}

If you want less space than is left in that case, simply set your 'marginTop' to 0

{{edit due to numerous comments:

As pointed out a number of times below, the documentation now states text: null as the method to achieve this. (2023 Update: null now throws a type error, and undefined is recommended.)

Either method achieves the desired result.

edited Feb 14 '23 at 15:58

Andrew

3,825
4
30
44

answered Apr 10 '13 at 16:05

jlbriggs

17,612
4
35
56

Could you take a look at this for me? I've done all the suggestions here and there is still a huge white space, (see the print button floating in space in the top right?) http://goo.gl/jHR5l – D3Chiq Apr 10 '13 at 16:21
1

I think I may have solved it. I had my legend aligned to the top, and the floating on the legend was set to false, it created a space for it there. I set the floating on the legend to true, and now it has pushed the rest of the chart further up. – D3Chiq Apr 10 '13 at 16:36
3

As pointed out below, setting the text to null is the documented solution. – Tom Hubbard Jun 03 '14 at 15:39
2

As of version `5.0.9` this is incorrect. Setting text so an empty string generated default title text such as 'Chart Title' and 'Values'. – mwilson Mar 12 '17 at 02:42
@mwilson I am looking at the demo from the link in the answer above, which is (at the time of this comment) using 5.0.9, and it still works with either `null` or `''`. Can you elaborate or demonstrate? – jlbriggs Mar 13 '17 at 12:38
@jbriggs I went back to the highcharts web site and put one of their demos into a JSFiddle. I stand corrected and simply passing an empty string works. What I do find strange, is that in my example (on my web app), passing an empty string ends up with auto-generated title such as 'Chart Title.' Can't seem to reproduce it with their stuff which probably means I'm doing something different/introducing an edge case. I saw a couple of other threads that talked about the same behavior I was experiencing, but I guess that's not the case. – mwilson Mar 14 '17 at 00:56
You can also set the text to undefined as suggested in the highcharts docs. /** * (Highcharts, Highstock, Highmaps, Gantt) The title of the chart. To * disable the title, set the `text` to `undefined`. */ text?: string; – Danish Feb 19 '20 at 00:28

score 75 · Answer 2 · answered Oct 13 '14 at 22:55

75

From the highcharts doc:

text: String The title of the chart. To disable the title, set the text to null. Defaults to Chart title.

fiddle: http://jsfiddle.net/daub10dr/

title:{
      text: null
      }

answered Oct 13 '14 at 22:55

Plastic

9,874
6
32
53

1

This is the correct answer, don't know why this is not the accepted answer. All other solutions provided below are just workarounds. – Gerard Feb 05 '15 at 16:33
May be the user that asked the question just forget to flag it as "accepted" – Plastic Mar 05 '15 at 13:59
2

probably because the question was appropriately answered 6 months before this answer was posted... – jlbriggs Jun 24 '15 at 11:47
"appropriately"?? what answer do you mean?? ;-) – Plastic Oct 08 '15 at 09:46
4

This is correct with the "new" api. When the question was asked this was not supported. So both are valid depending on the version. – TecHunter Feb 09 '16 at 08:53

score 43 · Answer 3 · answered Sep 25 '13 at 15:00

43

I prefer this method :

title: {
    text: '',
    style: {
        display: 'none'
    }
},
subtitle: {
    text: '',
    style: {
        display: 'none'
    }
},

answered Sep 25 '13 at 15:00

TecHunter

6,091
2
30
47

2

For newer version refer to answer from Plastic with ´text: null´ – TecHunter Feb 09 '16 at 08:54

score 20 · Answer 4 · answered Apr 05 '18 at 04:38

20

Very simple! In the latest version of Highcharts just set title and subtitle properties to false.

{
title: false,
subtitle: false
}

Find the working fiddle here: https://jsfiddle.net/samuellawrentz/hkqnvm7k/4/

answered Apr 05 '18 at 04:38

samuellawrentz

1,662
11
23

Andy · Answer 5 · 2016-03-09T11:07:00.113

13

You can always do this:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

That worked for me :-)

note: this answer was for version 2.*, for newer versions there are better answers.

edited Mar 09 '16 at 11:07

answered Sep 15 '13 at 00:05

Andy

2,892
2
26
33

score 13 · Answer 6 · answered Jul 25 '14 at 14:17

13

It´s simple... Only set the title´s text to null. Like this

    $(function () {
$('#container').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: null  
    },
    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]        
    }]
});

});

see@APIreference: http://api.highcharts.com/highcharts#title.text

answered Jul 25 '14 at 14:17

aspadacio

323
2
12

1

Base on the document, it becomes `undefined` since this commit https://github.com/highcharts/highcharts/commit/c2359b24d5d2396a21759ecdd6548deb7a4cc8d5 – foxiris Sep 23 '19 at 10:33

score 10 · Answer 7 · edited Jun 20 '20 at 09:12

10

Set the text field to null

From the documentation at http://api.highcharts.com/highcharts#title.text

text: String

The title of the chart. To disable the title, set the text to null. Defaults to Chart title.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 06 '14 at 16:06

Thunderducky

134
1
3

Base on the document, it becomes undefined since this commit https://github.com/highcharts/highcharts/commit/c2359b24d5d2396a21759ecdd6548deb7a4cc8d5 – foxiris Sep 23 '19 at 10:34

score 8 · Answer 8 · edited Dec 29 '22 at 06:14

8

According the Highcharts doc, the correct way is to set 'text' to null.

i.e

title : {
    text : null
}

edited Dec 29 '22 at 06:14

Iva

2,447
1
18
28

answered Jul 01 '15 at 20:58

Long Huynh

119
1
2

> The title of the chart. To disable the title, set the text to undefined. – Ini May 13 '20 at 14:16

Iva · Answer 9 · 2022-10-18T10:13:14.710

5

In react-native below code worked for me,

  title: {
    style : {
      display : 'none'
    }
 }

edited Oct 18 '22 at 10:13

answered Sep 25 '18 at 05:45

Iva

2,447
1
18
28

score 5 · Answer 10 · answered Jan 03 '20 at 06:18

5

For those that use Typescript you can set the Highcharts.TitleOptions to hide the chart title.

title: {
  text: undefined
},
subtitle: {
  text: undefined
}

answered Jan 03 '20 at 06:18

Andrien Pecson

282
3
13

score 3 · Answer 11 · edited Jun 10 '14 at 05:46

3

Here is the solution

title: {
    text: null
},
subtitle: {
    text: null
}

edited Jun 10 '14 at 05:46

Jaffa

12,442
4
49
101

answered Jun 10 '14 at 05:03

RahulKurumkar

54
3

score 2 · Answer 12 · edited Jun 30 '15 at 11:45

2

Just write a JSON object

title : {
  style : {
    display : 'none'
  }
}

edited Jun 30 '15 at 11:45

j_freyre

4,623
2
30
47

answered Jun 30 '15 at 10:40

Ashish Bardiya

49
2

score 1 · Answer 13 · answered Jun 23 '20 at 07:57

1

This works for me!!!

title:false

answered Jun 23 '20 at 07:57

Nikhil Tayal

76
5

score -1 · Answer 14 · answered Mar 24 '14 at 04:06

-1

This is a bit of a hack but you can also try that:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}

answered Mar 24 '14 at 04:06

Hugo Chan

153
4

Is there a way to disable the Title and Subtitle in Highcharts?

14 Answers14

Linked