can not get rid of the tooltip shadow in a treemap chart

[andr3as]

Hi,

i googled back and forth but i simply can not get rid of the shadow for the tooltip.

i have my tooltip config set to this:

Code: Select all

tooltip: {
    useHTML: true,
    shadow: false,
    formatter: function () {
        return controller._tooltipFormatter(this.point);
    }
},
 

this is my formatter function:

Code: Select all

_tooltipFormatter(point) {
    if (!point.value) {
        return `<div><b>${point.name}</b></div>`;
    }

    const marketCap = point.value;
    const sector = point.sector;
    const industry = point.industry;
    const companyName = point.companyName || point.name;

    const formatMarketCap = (value) => {
        if (value >= 1e12) {
            return (value / 1e12).toFixed(2) + ' tln';
        } else if (value >= 1e9) {
            return (value / 1e9).toFixed(2) + ' bln';
        } else if (value >= 1e6) {
            return (value / 1e6).toFixed(2) + ' mln';
        }
        return value + ' USD';
    };

    const formattedMarketCap = formatMarketCap(marketCap);

    const companyRow = companyName ? `<div><b>${companyName}</b></div>` : '';
    const industryRow = industry ? `<div>Industry: ${industry}</div>` : '';
    const sectorRow = sector ? `<div>Sector: ${sector}</div>` : '';
    const marketCapRow = formattedMarketCap ? `<div>Market Cap: <b>${formattedMarketCap}</b></div>` : '';
    const pctChangeRow = point.formattedPctChange !== undefined ? `<div>Percent Change: <b>${point.formattedPctChange}%</b></div>` : '';

    return `
  <div style="
  font-size: 2em; 
  padding: 2rem; 
  background-color: var(--secondary); 
  color: var(--text);
  z-index: 999">
    ${companyRow}
    ${industryRow}
    ${sectorRow}
    ${marketCapRow}
    ${pctChangeRow}
  </div>
`;
}

but the shadow still shows up:

2024-09-14_10-27.png (82.44 KiB) Viewed 1720 times

can someone point me towards where i go wrong?

[andr3as]

am also struggling with the breadcrumbs..

Code: Select all

series: [{
                name: "Overview",
                type: 'treemap',
                layoutAlgorithm: 'squarified',
                allowDrillToNode: true,
                interactByLeaf: false,
                dataLabels: {
                    enabled: false, // Disable general dataLabels
                },
                breadcrumbs: {
                    buttonTheme: {
                        padding: 8,
                        style: {
                            marginBottom: 10,
                            color: "var(--primaryRing)"
                        },
                    },
                    buttonPressedTheme: {
                        padding: 8,
                        style: {
                            marginBottom: 10,
                            color: "var(--primaryRing)"
                        },
                    },
                    separator: {
                        style: {
                            color: "var(--grey)"
                        }
                    },
                },
...}]

i got the "links" to show up in my color but the "pressed Button" or active level is showing up in black

2024-09-14_13-32.png (4.65 KiB) Viewed 1709 times

and i can not find the place to set this to say, "var(--text)"

i'd appreciate a hint very much!

thank you!

[andrzej.b]

Hi Andreas,

Thank you for getting in touch.

As for the tooltip problem: the solution is easy, you need to set the padding to 0 (it defaults to 8 units) in the tooltip config:

Code: Select all

  tooltip: {
    useHTML: true,
    shadow: false,
    padding: 0, // this need to be set to override the default value
    formatter: function() {
      return '<div style="font-size: 2em; padding: 2rem; background-color: yellow; border: 0px">' + this.x + '</div>';
    }
  },

And as for the breadcrumbs, there is no option themeButtonPressed in the API, hence you need to change it either via CSS or via JS.
Please see a sample fiddle I made for you where active breadcrumbs are edited with CSS: https://jsfiddle.net/BlackLabel/ndxbf8m6/

I hope you will find it useful.

Best regards,

[andr3as]

fantastic!

thanks so much Andrzej, this works like a charm.