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

Chart legend items maxWidth option

My chart legend is currently overflowed. What I want to do is that when the width of the browser becomes wider, the entire legend is visible, and when the width becomes narrower, the legend overflows instead of two lines. I now have a problem with the legend of the chart going over to 2 lines when the size of the browser is reduced, so I left an inquiry. Any help would be appreciated.

Code: Select all

            let chartMargin = 0,
                font14 = null,
                legendWidth = null;
            if (document.documentElement.scrollWidth > 1263) {
                chartMargin = 300;
                font14 = 14;
            } else if (document.documentElement.scrollWidth <= 1263 && document.documentElement.scrollWidth > 959) {
                chartMargin = 150;
                font14 = 13;
            } else if (document.documentElement.scrollWidth <= 959) {
                chartMargin = 50;
                font14 = 12;
            }
            //첫번째
            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],
                                });
                            }
                        },
                        load: function() {
                            var chart = this,
                            legend = chart.legend,
                            legendMaxWidth =
                                Highcharts.relativeLength(legend.options.maxWidth, 1) * chart.chartWidth;

                            /*if (legend.legendWidth > legendMaxWidth) {
                            legend.update({
                                width: legend.options.maxWidth
                            });
                            }*/
                        }
                    },
                },
                credits: {
                    enabled: false,
                },
                exporting: {
                    enabled: false,
                },
                title: {
                    text: '',
                },
                xAxis: [
                    {
                        width: '30%',
                        offset: 0,
                        lineColor: '#000000',
                        tickColor: '#000000',
                        categories: ['VIX'],
                        labels: {
                            autoRotation: false,
                            overflow: 'allow',
                            style: {
                                fontSize: font14,
                                color: '#000',
                            },
                        },
                    },
                    {
                        width: '30%',
                        left: '70%',
                        offset: 0,
                        lineColor: '#000000',
                        tickColor: '#000000',
                        categories: ['MOVE'],
                        labels: {
                            autoRotation: false,
                            overflow: 'allow',
                            style: {
                                fontSize: font14,
                                color: '#000',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        width: '30%',
                        offset: 0,
                        gridLineColor: '#b3b3b3',
                        min: 0,
                        labels: {
                            style: {
                                fontSize: font14,
                                color: '#b3b3b3',
                            },
                        },
                        title: {
                            text: 'VIX Index',
                            style: {
                                fontSize: font14,
                                fontWeight: 'bold',
                                color: '#000',
                            },
                        },
                    },
                    {
                        width: '30%',
                        left: '70%',
                        offset: 0,
                        gridLineColor: '#b3b3b3',
                        min: 10,
                        labels: {
                            style: {
                                fontSize: font14,
                                color: '#b3b3b3',
                            },
                            format: '{value}%',
                        },
                        title: {
                            text: 'MOVE Index',
                            style: {
                                fontSize: font14,
                                fontWeight: 'bold',
                                color: '#000',
                            },
                        },
                    },
                ],
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    enabled: true,
                    margin: 40,
                    height: 30,
                    minWidth: '80%',
                    itemStyle: {
                        fontSize: font14,
                        fontWeight: 'normal',
                        fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
                        color: '#000000',
                        textOverflow: "ellipsis",
                        width: '30%',
                    },
                    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],
                    },
                ],
            });
화면 캡처 2022-08-03 110307.png
화면 캡처 2022-08-03 110307.png (8.9 KiB) Viewed 270 times
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Chart legend items maxWidth option

Hello,

Could you please prepare a working demo in JSFiddle? The attached code uses properties that you haven't included in it.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”