Jim McCaffry
Posts: 3
Joined: Wed Jun 22, 2022 11:24 am

Render series symbols inside a custom legend

Hi,

I'm using React Highcharts with a custom legend (one legend for multiple charts) and everything is working quite well.
Now I'm trying to figure out how can I render the correct symbol for each legend item in the legend. I have the data regarding to the symbol and color of each series (and also the relevant chart reference for each legend item).

I tried to play a bit with the SVGRenderer, but with no luck. I did manage to render something, but it was inside the charts and not on my custom legend, which is a React separate component.

Thanks!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Render series symbols inside a custom legend

Hi there,

Welcome to our forum and thank you for contacting us with your question!

Could you please show me your code in an online editor, so that I could work on a solution directly for your use case?

Also in the meantime, please check out this Stack Overflow thread - maybe you will find it helpful.
https://stackoverflow.com/questions/363 ... end-symbol

Let me know if that is what you are looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
Jim McCaffry
Posts: 3
Joined: Wed Jun 22, 2022 11:24 am

Re: Render series symbols inside a custom legend

Hi Kamil,

Basically the custom legend is a simple component, which I just pass an array of objects and render them.
Each item hold a reference to the chart it belongs to, so I have a full access to the cart APIs. Something like this:

Code: Select all

interface MyCustomLegendItem {
    name: string;
    color: string;
    symbol: string;
    disabled?: boolean;
    chartRef: HighchartsReact.RefObject;
}

interface MyCustomLegendProps {
legendItems: MyCustomLegendItem [];
}

const MyLegend: React.FC<MyCustomLegendProps > = (props) => {
    const { legendItems } = props;

    return (
        <div className={styles.highcharts__customLegend}>
            {items.map((item) => (
                <button
                    key={item.name}
                >
                    <div
                        style={{ border: `1px solid ${item.disabled ? neutralDisabledColor : item.color}` }}
                    />
                    <span>{item.name}</span>
                </button>
            ))}
        </div>
    );
};
I'm trying to figure out how do I render the series' symbol for each legend item (I already rendering the right color and I have the symbol name).


I have something similar to this: http://jsfiddle.net/N3KAC/1/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Render series symbols inside a custom legend

Hi there,

I still can't do much without looking at your reproduced issue, but from what I understand you need to dynamically get the symbol that your series has, so that you can create a custom legend with symbols taken from your actual chart.

Normally you would be able to get that from chart.series.legendSymbol (but that would require legend to be enabled).

You can try to get your series' symbol with chart.series.data.graphic.
Alternatively, from what I can see, you are rendering your legend from scratch, so you can setup some conditional rendering in your component (and get the i.e symbol name from chart.series.symbol), or you can create an SVG path and use the color of your series (that you can dynamically get from the API).

Also, you can have the one shared Highcharts legend across multiple charts, see examples:
https://jsfiddle.net/1v4m5jce/
https://jsfiddle.net/sjd73j18/

I hope that you will find that useful,
Best regards!
Kamil Musiałowski
Highcharts Developer
Jim McCaffry
Posts: 3
Joined: Wed Jun 22, 2022 11:24 am

Re: Render series symbols inside a custom legend

Thanks, but I already got the symbol like I said. I just wonder if there is any way to render it. If I know the symbol is circle/rectangle/triangle/etc. - if High-Charts provide some API to render it.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Render series symbols inside a custom legend

Hi there,

Sorry for that misunderstanding. I did some research and if you already have the symbol name, you can actually render it using our Highcharts.renderer.symbol, and pass in the symbol name (as well as other parameters).
If you would like to render the symbol in your custom legend, just calculate the position of it, and render it in the desired place.

DEMO: https://jsfiddle.net/BlackLabel/wq12x7pL/
API References: https://api.highcharts.com/class-refere ... rer#symbol
https://api.highcharts.com/class-refere ... Dictionary

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”