score:3

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 - https://jsfiddle.net/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. Original Requirement posted by the OP

score:3

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.net/fqes890o/

score: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


Related Query

More Query from same tag