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 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 2 Text',
style: {
"text-align": "center"
}
},
subtitle: {
// useHTML: true,
text: 'SubTitle',
style: {
"color": "red",
}
}
3 Answers
Reset to default 4What you'd need to do is modify the style attribute like this:
title: {
useHTML: true,
text: 'Header Text in Line1 </br> Line 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/