Accepted answer

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 -

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. Original Requirement posted by the OP


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:


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"


Related Query

More Query from same tag