In HighChart, how can I make a green line appear between my title and my subtitle?

JSFiddle

title: {
    useHTML: true,
    text: 'Header Text in Line1 </br> Line&nbsp;2 Text',
    style: {
        "text-align": "center"
    }
},    

subtitle: {
    // useHTML: true,
    text: 'SubTitle',
    style: {
        "color": "red",
    }
}

In HighChart, how can I make a green line appear between my title and my subtitle?

JSFiddle

title: {
    useHTML: true,
    text: 'Header Text in Line1 </br> Line&nbsp;2 Text',
    style: {
        "text-align": "center"
    }
},    

subtitle: {
    // useHTML: true,
    text: 'SubTitle',
    style: {
        "color": "red",
    }
}

• javascript
• jquery
• html
• css
• highcharts

Share Improve this question Follow edited Aug 30, 2019 at 9:41 41 72 6c 1,78066 gold badges2222 silver badges3636 bronze badges asked Aug 30, 2018 at 22:51 DhanaDhana 1,65844 gold badges2424 silver badges4040 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

What you'd need to do is modify the style attribute like this:

title: {
        useHTML: true,
        text: 'Header Text in Line1 </br> Line&nbsp;2 Text',
        style: {
            "text-align": "center",
            "border-bottom": "1px solid green"
        }
    },     

Output

You can make the title display:block and then set the left to 0px. Then set the width to 100%. Now the title spans the whole width of the chart. Now apply a bottom border of green color. You will get the desired effect.

In the style property of the title, you could give

        "width": '100%',
        "display": 'block',
        "left": 0

Have a look at this fiddle - https://jsfiddle/rwmntze8/

Hope this helps!

PS: Someone removed the original image containing the requirements, attached by the OP in the question, during the edits (You can find it in the edit revisions). I have attached it here for reference, in case someone thinks why the green line spans till the end.

Just need to add an empty css below, nothing more:

.highcharts-title {
  border-bottom: 1px solid black;
}

Doing it by pure CSS (not by setting element style using JS) gives you the best performance.

Live example: http://jsfiddle/fqes890o/