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

chart legend marker change edit question

I currently have charts in tab 1, tab 2, and tab 3 using the top tab. But last time I left an inquiry to modify the legend marker
' Highcharts.seriesTypes.dumbbell.prototype.drawLegendSymbol = Highcharts.seriesTypes.line.prototype.drawLegendSymbol;
Highcharts.seriesTypes.column.prototype.drawLegendSymbol = Highcharts.seriesTypes.line.prototype.drawLegendSymbol;"
I have received this part of the source code. But when I put this part, I moved from tab 1 to tab 2, and the chart legend marker on tab 1. has been changed, is it possible to change this part so that it does not change?

tab3 sorce Code

Code: Select all

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

            const valuationEquity = this.data.apiData.valuation.data.Equity,
                valuationFixedIncome = this.data.apiData.valuation.data.FixedIncome;

            const valuationEmEquityData = this.data.apiData.valuation.data.Equity['EM Equity'];
            const valuationEuropeEquityData = this.data.apiData.valuation.data.Equity['Europe Equity'];
            const valuationJapanEquityData = this.data.apiData.valuation.data.Equity['Japan Equity'];
            const valuationUkEquityData = this.data.apiData.valuation.data.Equity['UK Equity'];
            const valuationUsEquityData = this.data.apiData.valuation.data.Equity['US Equity'];

            const valuationEmergyingFixedIncomeData = this.data.apiData.valuation.data.FixedIncome['Emergying Market Bond'];
            const valuationEuropeanFixedIncomeData = this.data.apiData.valuation.data.FixedIncome['European High Yield'];
            const valuationUsFixedIncomeData = this.data.apiData.valuation.data.FixedIncome['US High Yield'];

            Highcharts.chart('boxPlotValuation', {
                chart: {
                    type: 'column',
                    width: 1540,
                    height: 360,
                    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': 1,
                                        stroke: 'black',
                                    })
                                    .add();
                            } else {
                                chart.customLine.attr({
                                    d: ['M', startX, startY, 'L', endX, endY],
                                });
                            }
                        },
                    },
                },
                credits: { enabled: false }, // 하단 highchart.com 글씨 삭제
                exporting: {
                    // 상단 context menu 제거
                    enabled: false,
                },
                title: {
                    text: '',
                },
                credits: {
                    enabled: false,
                },
                xAxis: {
                    lineColor: '#000000',
                    tickColor: '#000000',
                    categories: [
                        'U.S.<br>equities',
                        'Japan<br>equities',
                        ' Europe<br>equities',
                        'UK<br>equities',
                        'EM<br>equities',
                        'U.S. high yield',
                        'European high<br/>Yield',
                        'Emerging<br/>market bonds',
                    ],
                    labels: {
                        style: {
                            fontSize: '13px',
                            fontFamily: 'BLKFort-Book, AvenirNextRegular, Arial, Sans-Serif',
                            color: '#000000',
                        },
                    },
                    plotLines: [
                        {
                            color: '#000000',
                            width: 1,
                            value: 4.5,
                            zIndex: 50,
                            label: {
                                style: {
                                    fontSize: '16px',
                                    fontWeight: 'bold',
                                    fontFamily: 'BLKFort-Book, AvenirNextRegular, Arial, Sans-Serif',
                                    color: '#000000',
                                },
                                rotation: 0,
                                text: '',
                                verticalAlign: 'top',
                                textAlign: 'center',
                                y: -10,
                                x: -110,
                            },
                        },
                    ],
                },
                yAxis: {
                    startOnTick: false,
                    gridLineColor: '#b3b3b3',
                    plotLines: [
                        {
                            color: '#000000',
                            width: 1,
                            value: 0,
                            zIndex: 1,
                        },
                    ],
                    labels: {
                        format: '{value}%',
                        style: {
                            fontSize: '13px',
                            fontFamily: 'BLKFort-Book, AvenirNextRegular, Arial, Sans-Serif',
                            color: '#b3b3b3',
                        },
                    },
                    title: {
                        text: 'Expensive   Cheaper',
                        style: {
                            fontSize: '13px',
                            color: '#b3b3b3',
                        },
                    },
                },
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    enabled: true,
                    margin: 40,
                    itemStyle: {
                        fontSize: '13px',
                        fontWeight: 'normal',
                        fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
                        color: '#000000',
                    },
                },
                tooltip: {
                    useHTML: true,
                    shared: true,
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                    },
                },
                series: [
                    {
                        type: 'dumbbell',
                        name: '5th to 95th Percentile',
                        color: '#000000',
                        data: [
                            [valuationEmEquityData['5'], valuationEmEquityData['95']],
                            [valuationEuropeEquityData['5'], valuationEuropeEquityData['95']],
                            [valuationJapanEquityData['5'], valuationJapanEquityData['95']],
                            [valuationUkEquityData['5'], valuationUkEquityData['95']],
                            [valuationUsEquityData['5'], valuationUsEquityData['95']],
                            [valuationEmergyingFixedIncomeData['5'], valuationEmergyingFixedIncomeData['95']],
                            [valuationEuropeanFixedIncomeData['5'], valuationEuropeanFixedIncomeData['95']],
                            [valuationUsFixedIncomeData['5'], valuationUsFixedIncomeData['95']],
                        ],
                        marker: {
                            enabled: false,
                        },
                        lineWidth: 2,
                        states: {
                            hover: {
                                lineWidth: 0,
                            },
                        },
                        enableMouseTracking: false,
                    },
                    {
                        data: [
                            Number(valuationEmEquityData['75'])-Number(valuationEmEquityData['25']),
                            Number(valuationEuropeEquityData['75'])-Number(valuationEuropeEquityData['25']),
                            Number(valuationJapanEquityData['75'])-Number(valuationJapanEquityData['25']),
                            Number(valuationUkEquityData['75'])-Number(valuationUkEquityData['25']),
                            Number(valuationUsEquityData['75'])-Number(valuationUsEquityData['25']),
                            Number(valuationEmergyingFixedIncomeData['75'])-Number(valuationEmergyingFixedIncomeData['25']),
                            Number(valuationEuropeanFixedIncomeData['75'])-Number(valuationEuropeanFixedIncomeData['25']),
                            Number(valuationUsFixedIncomeData['75'])-Number(valuationUsFixedIncomeData['25'])
                        ],
                        color: 'rgb(255,230,127)',
                        borderColor: '#303030',
                        zIndex: 77,
                        pointWidth: 40,
                        marker: {
                            symbol: 'square',
                        },
                        showInLegend: false,
                        linkedTo: 'inter',
                    },
                    {
                        name: 'Interquartile range',
                        showInLegend: true,
                        type: 'scatter',
                        id: 'inter',
                        color: 'rgb(255,230,127)',
                        marker: {
                            radius: 10,
                            symbol: 'square',
                        },
                    },
                    {
                        name: 'Q1',
                        showInLegend: false,
                        enableMouseTracking: false,
                        data: [
                            valuationEmEquityData['25'],
                            valuationEuropeEquityData['25'],
                            valuationJapanEquityData['25'],
                            valuationUkEquityData['25'],
                            valuationUsEquityData['25'],
                            valuationEmergyingFixedIncomeData['25'],
                            valuationEuropeanFixedIncomeData['25'],
                            valuationUsFixedIncomeData['25']
                        ],
                        color: 'rgba(100,100,100,0)',
                    },
                    {
                        name: 'Median',
                        type: 'spline',
                        lineWidth: 2,
                        lineColor: 'transparent',
                        states: {
                            hover: {
                                enabled: false,
                                lineWidth: 0,
                            },
                        },
                        color: 'rgb(0,139,92)',
                        showInLegend: false,
                        marker: {
                            lineColor: 'rgb(0,139,92)',
                            lineWidth: 3,
                            radius: 9,
                            symbol: 'dash',
                        },
                        zIndex: 88,
                        data: [
                            valuationEmEquityData['50'],
                            valuationEuropeEquityData['50'],
                            valuationJapanEquityData['50'],
                            valuationUkEquityData['50'],
                            valuationUsEquityData['50'],
                            valuationEmergyingFixedIncomeData['50'],
                            valuationEuropeanFixedIncomeData['50'],
                            valuationUsFixedIncomeData['50']
                        ],
                        linkedTo: 'median',
                    },
                    {
                        id: 'median',
                        color: 'rgb(0,139,92)',
                        name: 'Median',
                        showInLegend: true,
                        type: 'line',
                        marker: {
                            radius: 0,
                        },
                    },
                    {
                        name: 'Latest Quarter Average ',
                        type: 'spline',
                        showInLegend: true,
                        lineWidth: 0,
                        states: {
                            hover: {
                                enabled: false,
                                lineWidth: 0,
                            },
                        },
                        marker: {
                            radius: 6,
                            symbol: 'circle',
                        },
                        color: '#ff754b',
                        zIndex: 99,
                        data: [
                            valuationEmEquityData['latest'],
                            valuationEuropeEquityData['latest'],
                            valuationJapanEquityData['latest'],
                            valuationUkEquityData['latest'],
                            valuationUsEquityData['latest'],
                            valuationEmergyingFixedIncomeData['latest'],
                            valuationEuropeanFixedIncomeData['latest'],
                            valuationUsFixedIncomeData['latest']
                        ],
                    },
                ],
            });

tab1 sorce Code

Code: Select all

            Highcharts.chart('boxPlotFirst', {
                chart: {
                    type: 'column',
                    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],
                                });
                            }
                        },
                    },
                },
                credits: {
                    enabled: false,
                },
                exporting: {
                    enabled: false,
                },
                title: {
                    text: '',
                },
                xAxis: [
                    {
                        width: '40%',
                        offset: 0,
                        lineColor: '#000000',
                        tickColor: '#000000',
                        categories: ['VIX'],
                        labels: {
                            autoRotation: false,
                            overflow: 'allow',
                            style: {
                                fontSize: '13px',
                                color: '#000',
                            },
                        },
                    },
                    {
                        width: '40%',
                        left: '60%',
                        offset: 0,
                        lineColor: '#000000',
                        tickColor: '#000000',
                        categories: ['MOVE'],
                        labels: {
                            autoRotation: false,
                            overflow: 'allow',
                            style: {
                                fontSize: '13px',
                                color: '#000',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        width: '40%',
                        offset: 0,
                        gridLineColor: '#b3b3b3',
                        min: 0,
                        labels: {
                            style: {
                                fontSize: '13px',
                                color: '#b3b3b3',
                            },
                        },
                        title: {
                            text: 'VIX index',
                            style: {
                                fontSize: '13px',
                                fontWeight: 'bold',
                                color: '#000',
                            },
                        },
                    },
                    {
                        width: '40%',
                        left: '60%',
                        offset: 0,
                        gridLineColor: '#b3b3b3',
                        min: 10,
                        labels: {
                            style: {
                                fontSize: '13px',
                                color: '#b3b3b3',
                            },
                            format: '{value}%',
                        },
                        title: {
                            text: 'MOVE index',
                            style: {
                                fontSize: '13px',
                                fontWeight: 'bold',
                                color: '#000',
                            },
                        },
                    },
                ],
                legend: {
                    align: 'center',
                    verticalAlign: 'top',
                    enabled: true,
                    margin: 40,
                    itemStyle: {
                        fontSize: '13px',
                        fontWeight: 'normal',
                        fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
                        color: '#000000',
                    },
                    symbolHeight: 11,
                    symbolWidth: 11,
                    symbolRadius: 0,
                },
                tooltip: {
                    useHTML: true,
                    shared: false,
                    valueDecimals: 2,
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        grouping: false,
                    },
                },
                series: [
                    {
                        xAxis: 1,
                        yAxis: 1,
                        linkedTo: 'test',
                        type: 'line',
                        name: '5th to 95th Percentile',
                        color: '#000000',
                        data: [
                            [0, this.data.boxPlot.boxPlot5.moveIndex],
                            [0, this.data.boxPlot.boxPlot95.moveIndex],
                        ],
                        marker: {
                            enabled: false,
                        },
                        states: {
                            hover: {
                                lineWidth: 0,
                            },
                        },
                        enableMouseTracking: false,
                    },
                    {
                        xAxis: 1,
                        yAxis: 1,
                        linkedTo: 'range',
                        name: 'Interquartile range',
                        data: [this.data.boxPlot.boxPlotRange.moveIndex],
                        color: '#ffd600',
                        borderColor: '#000000',
                        zIndex: 77,
                        pointWidth: 40,
                    },
                    {
                        xAxis: 1,
                        yAxis: 1,
                        name: 'Q1',
                        showInLegend: false,
                        data: [this.data.boxPlot.boxPlot25.moveIndex],
                        color: 'rgba(100,100,100,0)',
                    },
                    {
                        xAxis: 1,
                        yAxis: 1,
                        linkedTo: 'Median',
                        name: 'Median',
                        type: 'spline',
                        color: 'rgb(0,139,92)',
                        lineWidth: 2,
                        marker: {
                            lineColor: 'rgb(0,139,92)',
                            lineWidth: 2,
                            radius: 9,
                            symbol: 'dash',
                        },
                        zIndex: 88,
                        data: [this.data.boxPlot.boxPlot50.moveIndex],
                    },
                    {
                        xAxis: 1,
                        yAxis: 1,
                        linkedTo: 'latest',
                        name: 'Latest',
                        type: 'spline',
                        marker: {
                            radius: 6,
                            symbol: 'circle',
                        },
                        color: '#ff754b',
                        zIndex: 99,
                        data: [this.data.boxPlot.boxPlotLatest.moveIndex],
                    },
                    {
                        xAxis: 0,
                        yAxis: 0,
                        id: 'test',
                        type: 'line',
                        name: '5th to 95th Percentile',
                        color: '#000000',
                        data: [
                            [0, this.data.boxPlot.boxPlot5.vixIndex],
                            [0, this.data.boxPlot.boxPlot95.vixIndex],
                        ],
                        marker: {
                            enabled: false,
                        },
                        states: {
                            hover: {
                                lineWidth: 0,
                            },
                        },
                        enableMouseTracking: false,
                    },
                    {
                        xAxis: 0,
                        yAxis: 0,
                        id: 'range',
                        name: 'Interquartile range',
                        data: [this.data.boxPlot.boxPlotRange.vixIndex],
                        borderColor: '#000000',
                        color: '#ffd600',
                        zIndex: 77,
                        pointWidth: 40,
                    },
                    {
                        xAxis: 0,
                        yAxis: 0,
                        name: 'Q1',
                        showInLegend: false,
                        data: [this.data.boxPlot.boxPlot25.vixIndex],
                        color: 'rgba(100,100,100,0)',
                    },
                    {
                        xAxis: 0,
                        yAxis: 0,
                        id: 'Median',
                        name: 'Median',
                        type: 'spline',
                        color: 'rgb(0,139,92)',
                        lineWidth: 2,
                        marker: {
                            lineColor: 'rgb(0,139,92)',
                            lineWidth: 2,
                            radius: 9,
                            symbol: 'dash',
                        },
                        zIndex: 88,
                        data: [this.data.boxPlot.boxPlot50.vixIndex],
                    },
                    {
                        xAxis: 0,
                        yAxis: 0,
                        id: 'latest',
                        name: 'Latest',
                        type: 'spline',
                        marker: {
                            radius: 6,
                            symbol: 'circle',
                        },
                        color: '#ff754b',
                        zIndex: 99,
                        data: [this.data.boxPlot.boxPlotLatest.vixIndex],
                    },
                ],
            });
            // 세번째
            Highcharts.seriesTypes.line.prototype.drawLegendSymbol = Highcharts.seriesTypes.column.prototype.drawLegendSymbol;
            console.log(Highcharts);
            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 ',
                    valueDecimals: 2,
                },
                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, %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: 'VIX',
                        color: '#ffd600',
                        data: this.data.dataChart.vixValue,
                    },
                    {
                        name: 'MOVE',
                        color: '#ff754b',
                        data: this.data.dataChart.moveValue,
                    },
                ],
            });
            this.data.dataChart.moveValue = [];
            this.data.dataChart.vixValue = [];
화면 캡처 2022-06-27 093703.png
화면 캡처 2022-06-27 093703.png (33.02 KiB) Viewed 240 times
화면 캡처 2022-06-27 093754.png
화면 캡처 2022-06-27 093754.png (19.24 KiB) Viewed 240 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: chart legend marker change edit question

Hello kdp9390!
It seems that I have already answered your topic here: viewtopic.php?f=9&t=48943&p=177517#p177517 All you need to do is use Highcharts.wrap method.

API Reference: https://www.highcharts.com/docs/extendi ... highcharts

Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”