HighChart - может нарисовать линию между заголовком и подзаголовком

Question

Как в HighChart сделать зеленую линию между моим заголовком и субтитрами?

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",
        }
    }

[]

Answer 1

Вы можете сделать заголовок display:block, а затем установить left на 0px. Затем установите ширину 100%. Теперь заголовок охватывает всю ширину графика. Теперь примените нижнюю границу зеленого цвета. Вы получите желаемый эффект.

В свойстве стиля заголовка вы можете указать

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

Посмотрите на эту скрипку - https://jsfiddle.net/rwmntze8/

Надеюсь, это поможет!

PS: Кто-то удалил исходное изображение, содержащее требования, приложенные ОП в вопросе, во время редактирования (Вы можете найти его в редакциях редактирования) . Я приложил это здесь для справки, в случае, если кто-то думает, почему зеленая линия охватывает до конца.

Answer 2

Просто нужно добавить пустой CSS ниже, ничего более:

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

Выполнение этого с помощью чистого CSS (не путем установки стиля элемента с помощью JS) обеспечивает наилучшую производительность.

Живой пример: http://jsfiddle.net/fqes890o/

Answer 3

Что вам нужно сделать, это изменить атрибут style следующим образом:

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

выход