iiiml0sto1
Posts: 8
Joined: Tue Nov 22, 2022 7:54 pm

Custom Formatter Tooltip

Hi, I'm trying my best to create a custom formatter design, but I'm failing hard just to align the items with flex and flex-direction column. Nothing seems to work...

This is my tooltip configuration for a Highstock area chart :

Code: Select all

tooltip: {
                    shape: "square",
                    crosshairs: true,
                    followPointer: true,
                    followTouchMove: true,
                    headerShape: "callout",
                    borderWidth: 0,
                    shadow: false,
                    stickOnContact: true,
                    backgroundColor: "#fff",
                    display: 'flex',
                    flexDirection: 'column',
                    formatter: function () {
                        return getCustomFormatter(this, '300px');
                    },
                }
I call a function 'getFixedWidthFormatter' that returns a normal HTML template string element (I would really love to be able to just putin a Vue component and pass props to that one, but this is not possible as far as i have tested)

Code: Select all

function getCustomFormatter(dataset) {
        const style = `
            display: flex:
            flexDirection: column;
        `;

        return `<div style="${style}">
            <p>dataset.x</p>
            <p>dataset.y<p>
        </div>`;
}
The above does not work.. as you see, I try to set the style both in the getFixedWidthFormatter and in the tooltip configuration... What to do? I find Highstockchart hard to work with. The documentation and I'm not here to bash anyone, seems messy and hard/boring to understand... I kinda get a headache every time I have to go back to improve the chart I use. I wish the documentation would get a complete overhaul and be modernized, maybe with a live editor where you could toggle everything on/off and see it live... Idk if it is just because there are so many options, but I'm getting so energy drained trying to figure stuff out...

Can someone please help me out?
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Custom Formatter Tooltip

Hello there,

Here you can find all the possible options for the Highstock legend. Please, take a look: https://api.highcharts.com/highstock/legend
What you are missing in your code is the tooltip.useHTML property, which allows you to pass the HTML tags. You can read more about it here: https://api.highcharts.com/highstock/legend.useHTML

If after applying this your code still won't be working, prepare a demo so I will be able to directly dig into your code and help you better.

Looking forwards to your response,
Kind Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Stock”