kdp9390
Posts: 62
Joined: Tue Apr 26, 2022 3:20 am

Change chart legend marker

I want to change my chart legend marker to 'circle' shape like the attached photo. Is it possible?

Code: Select all

            Highcharts.chart('dataChart', {
                credits: { enabled: false }, // 하단 highchart.com 글씨 삭제
                navigator: {
                    enabled: false,
                },
                scrollbar: {
                    enabled: false,
                },
                chart: {
                    zoomType: 'x',
                    height: 300,
                    events: {
                        render() {
                            const chart = this,
                                legend = chart.legend,
                                legendMargin = legend.options.margin ? legend.options.margin - legend.padding : 0,
                                startX = 0,
                                startY = legend.group.translateY + legend.legendHeight + legendMargin / 2,
                                endX = chart.chartWidth,
                                endY = startY;
                            if (!chart.customLine) {
                                chart.customLine = chart.renderer
                                    .path(['M', startX, startY, 'L', endX, endY])
                                    .attr({
                                        'stroke-width': 2,
                                        stroke: 'black',
                                    })
                                    .add();
                            } else {
                                chart.customLine.attr({
                                    d: ['M', startX, startY, 'L', endX, endY],
                                });
                            }
                        },
                    },
                },
                title: {
                    text: '',
                },
                tooltip: {
                    split: false,
                    shared: false,
                    xDateFormat: '%b.%d, %Y ',
                },
                xAxis: {
                    type: 'datetime',
                    tickmarkPlacement: 'on',
                    labels: {
                        overflow: 'allow',
                        tickInterval: 24 * 60 * 60 * 1000 * 20,
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                        },
                        formatter: function () {
                            return Highcharts.dateFormat('%b %d, %Y', Number(this.value));
                        },
                    },
                    title: {
                        text: null,
                    },
                },
                yAxis: {
                    title: {
                        text: 'VIX Index',
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                        },
                    },
                },
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    enabled: true,
                    margin: 40,
                    itemStyle: {
                        fontSize: '13px',
                        fontWeight: 'normal',
                        fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
                        color: '#000000',
                    },
                },
                plotOptions: {
                    series: {
                        marker: {
                            enabled: false,
                        },
                    },
                    area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1,
                            },
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')],
                            ],
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1,
                            },
                        },
                    },
                },
                series: [
                    {
                        name: 'MOVE',
                        color: '#FF8000',
                        data: this.data.dataChart.moveValue,
                        showInLegend: true,
                    },
                    {
                        name: 'VIX',
                        color: '#000',
                        data: this.data.dataChart.vixValue,
                        showInLegend: true,
                    },
                ],
            });
화면 캡처 2022-06-21 175737.png
화면 캡처 2022-06-21 175737.png (30.74 KiB) Viewed 2512 times
화면 캡처 2022-06-21 175751.png
화면 캡처 2022-06-21 175751.png (74.83 KiB) Viewed 2512 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change chart legend marker

Hello kdp9390!
We appreciate you reaching out to us!

If you are working with a line-type chart and you want to change a symbol you need to change the legend symbol to a column first with this line added to your code:

Code: Select all

Highcharts.seriesTypes.line.prototype.drawLegendSymbol = Highcharts.seriesTypes.column.prototype.drawLegendSymbol;
After this, the symbol will be a circle and you will be able to use properties like symbolHeight, symbolWidth etc.

Demo: https://jsfiddle.net/BlackLabel/0hex56tL/

Kind regards!
Hubert Kozik
Highcharts Developer
kdp9390
Posts: 62
Joined: Tue Apr 26, 2022 3:20 am

Re: Change chart legend marker

Highcharts.seriesTypes.column.prototype.drawLegendSymbol = Highcharts.seriesTypes.column.prototype.drawLegendSymbol;

After adding this source code, other chart legends on the same page also changed, causing the problem. Is there any other way that doesn't affect other charts?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change chart legend marker

kdp9390,
Yes, of course, it is possible to achieve this by using Highcharts.wrap method. I have created a custom property customShowRectSymbol for each series, where you want to change its symbol and then in wrap just check if that property is set to true and override the proper method. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/3tqzf2jd/
API Reference: https://www.highcharts.com/docs/extendi ... highcharts

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”