CODEWITHSUNDEEP
javascriptcsshighcharts
hard coder
hard coder

Reputation: 5705

X axis labels overlap tooltip in column chart in highcharts

I have a stacked column chart. I can have long strings as labels on x axis so I have used formatter that trims string and shows full string on tooltip. Problem is when I mouseover the columns, the x axis labels and tooltip content overlaps which looks ugly. I want tooltip background fully opaque. It works fine when I do useHTML false for labels but by doing this I cannot use html tags for labels. Please suggest some solution with useHTML true.

Here is fiddle showing the problem jsfiddle

Upvotes: 0

Views: 3584

Answers (2)

Swetha
Swetha

Reputation: 746

You can simply increase the height of the highcharts and set backgroundColor of tooltip as transparent.

Fiddle: http://jsfiddle.net/4mznaybs/11/

    chart: {
        type: 'column',
        height : 300
    },
     tooltip: {
        borderWidth: 0,
            backgroundColor: "rgba(255,255,255,0)",
            borderRadius: 05,
            shadow: false,
            useHTML: true,
            percentageDecimals: 2,
            backgroundColor: "rgba(255,255,255,1)",
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y +     '<br/>' +
                'Total: ' + this.point.stackTotal;
        },

    },

And CSS as:

 .label {
     z-index: 1 !important;
 }

.highcharts-tooltip span {
    background-color:white;
    border:1px solid green;
    opacity:1;
    z-index:9999 !important;
}

.tooltip {
    padding:5px;
}

Upvotes: 1

pwavg
pwavg

Reputation: 295

Remove the useHTML: true from xAxis - labels. Since you are only styling the tooltip. Then your good

Upvotes: 0

Related Questions