CODEWITHSUNDEEP
highcharts
Tina Berger
Tina Berger

Reputation: 155

Border Styles for the Highchart tooltip

I am trying to edit the border for my tooltip in highcharts.

The problem I am having is I would like to have only the bottom border show up.

For example you can do something like this:

tooltip: {borderWidth: 10} // but the problem is makes a border around the entire tooltip

doing something like this would be nice, but doesn't seem possible:

tooltip: {borderWidth: 0, 0, 0, 10}

I have tried this as well:

tooltip: {style: {border-bottom:10}}

But that doesn't seem to work as well. I am beginning to wonder if this is even possible.

OR

Does anyone know a good site that shows what specifically is allowed in the style attribute for tooltip. Seems like there is a certain way to do styles in this attribute, but http://api.highcharts.com/highcharts#tooltip doesn't really give you enough information.

Upvotes: 4

Views: 8714

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

You simply use an HTML tooltip in Highcharts by setting useHTML: true; see example: http://jsfiddle.net/xq28t/

In JS:

tooltip: {
    useHTML: true,
    borderWidth: 0,
    style: {
        padding: 0
    }
},

In CSS:

.highcharts-tooltip>span {
    padding: 10px;
    border-bottom: 1px solid black;
}

Upvotes: 10

Related Questions