Tooltip opacity when using html with version 4

[mabodokh]

Hi,

I am using version 4 of highcharts and running into quite an annoying issue *which is not reproduced in highcharts version 6.

I attached a photo of my chart, and here is the tooltip code:

Code: Select all

tooltip: {
                    outside: true,
                    useHTML: true,
                    backgroundColor: "rgba(246, 246, 246, 1)",
                    borderRadius: 30,
                    borderColor: "#bbbbbb",
                    borderWidth: 1.5,
                    style: { opacity: 1, background: "rgba(246, 246, 246, 1)" },
                    formatter: function () {
                        return "<div class='chart-tooltip'><span class='tval'>" + this.point.y + "$</span><span class='tlabel'>Sales in USD</span></div>"
                    }
                }

As can be seen the label is above the tooltip despite my z-index fixes that I tried to apply.
I have used styles and tried multiples things to try and fix this and to no avail.

I'm afraid I have no way to attach the whole code on codepen because of all the dependencies used in the project and so on. Any suggestions?

[rafalS]

Hi, mabodokh!

I would appreciate if you still create a simplified online demo for me. You don't have to copy the whole of your project code, but it's enough to add some dataLabels and tooltip that show your issue. You can rely on this jsFiddle: https://jsfiddle.net/zv8dqje5/

Or at least, please explain more precisely, what do you want to achieve and how your tooltip (od dataLabel) should behave.

Best regards!

[mabodokh]

Hi, mabodokh!

I would appreciate if you still create a simplified online demo for me. You don't have to copy the whole of your project code, but it's enough to add some dataLabels and tooltip that show your issue. You can rely on this jsFiddle: https://jsfiddle.net/zv8dqje5/

Or at least, please explain more precisely, what do you want to achieve and how your tooltip (od dataLabel) should behave.

Best regards!

I'll try and rephrase it again, if it's still difficult to understand I'll recreate the graph.
In the image I attached the tooltip that reads "Sales in USD" has a white block in the middle (that i added in custom css styling) in attempt to override the default transparent background but as can be seen it doesn't help because the datalabels are still visible underneath the tooltip.

I need the tooltip to be above the datalabel, I tried playing with z index of the elements but nothing seems to work. This does not happen when using Highcharts 6, this on version 4.

EDIT:
Here is chart:
https://codepen.io/Bodokh/pen/rqRZZZ

[rafalS]

mabodokh,

What if we hide dataLabels when hovering over a point?

Code: Select all

point: {
      events: {
        mouseOver() {
          this.dataLabel.hide()
        },
        mouseOut() {
          this.dataLabel.show()
        }
      }
    }

jsFiddle: https://jsfiddle.net/BlackLabel/4zry69ud/

Let me know if it's enough for you. If not, I will try to find the other solution.

Best regards!

[mabodokh]

mabodokh,

What if we hide dataLabels when hovering over a point?

Code: Select all

point: {
      events: {
        mouseOver() {
          this.dataLabel.hide()
        },
        mouseOut() {
          this.dataLabel.show()
        }
      }
    }

jsFiddle: https://jsfiddle.net/BlackLabel/4zry69ud/

Let me know if it's enough for you. If not, I will try to find the other solution.

Best regards!

A wonderful solution I must say! This is great.
If i may just one last question,

When exporting the chart the datalabels are too large and overflow the column. Is it possible to change the font size on export? I've seen the option to enable or disable the datalabels but I haven't been able change the font size by using the style like so:

Code: Select all

                exporting: {
                    enabled: false,
                    allowHTML: true,
                    width: 1278,
                    chartOptions: {
                        series: [{
                            dataLabels: {
                                style: {
                                    fontSize: "5px"
                                }
                            }
                        }]
                    }
                },

[rafalS]

Thank you

Well, exporting with options you have provided (fontSize) works fine for me:

chart (14).png (38.3 KiB) Viewed 6441 times

[mabodokh]

Thank you

Well, exporting with options you have provided (fontSize) works fine for me:

chart (14).png

Could it be that it does not work because I am exporting it as PDF?

Here is how my export looks since it's external:

Code: Select all

                var eChart = $("#" + chartID).highcharts();
                eChart.exportChart({
                    type: 'application/pdf',
                    filename: 'chartexport'
                });

[rafalS]

The problem is not with exporting to PDF but with exportChart() method. In Highcharts 5 it is working as expected but in Highcharts 4 it is not. Unfortunately, I wasn't able to quickly find the solution.

Kind regards