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

Chart Legend Question

I have created two "boxplot" charts like the code and attached picture, but I want to create one unified legend. As in the second picture, there are two charts, is it possible to do the same by creating one legend? Thanks for letting us know.

Code: Select all

	    //First
            Highcharts.chart('boxPlotFirst', {
                chart: {
                    type: 'column',
                    width: 150,
                    height: 300,
                },
                credits: {enabled: false}, 
                exporting: { 
                    enabled: false
                },
                title: {
                    text: ''
                },
                xAxis: {
                    lineColor: '#000000',
                    tickColor: '#000000',
                    categories: ['VIX'],
                    labels: {
                        autoRotation: false,
                        overflow: 'allow',
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                        },
                    }
                },
                yAxis: {
                    gridLineColor: '#000000',
                    min: 0,
                    labels: {
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                        },
                    },
                    title: {
                        text: 'VIX index',
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                        },
                    }
                },
                legend: {
                    align: 'right',
                    enabled: true,
                    itemStyle: {
                        fontSize: '13px',
                        fontWeight: 'normal',
                        fontFamily: 'BLKFort-Book, Arial, Sans-Serif',
                        color: '#000000'
                    },
                },
                tooltip: {
                    useHTML: true,
                    shared: true
                },
                plotOptions: {
                    column: {
                        stacking: 'normal'
                    },
                },
                series: [{
                    type: 'line',
                    name: 'test',
                    color: '#000000',
                    data: [[0, 10], [0, 75]],
                    marker: {
                        enabled: false
                    },
                    states: {
                        hover: {
                            lineWidth: 0
                        }
                    },
                    enableMouseTracking: false
                },{
                    name: 'Interquartile<br> range',
                    data: [25],
                    color: 'rgb(255,230,127)',
                    borderColor: '#303030',
                    zIndex:77,
                    pointWidth: 40
                },{
                    name: 'Q1',
                    showInLegend: false,
                    data: [25],
                    color: 'rgba(100,100,100,0)',
                },{
                    name: 'Median',
                    type: 'spline',
                    color: 'rgb(0,139,92)',
                    showInLegend: false,
                    lineWidth: 2,
                    marker: {
                        lineColor: 'rgb(0,139,92)',
                        lineWidth: 2,
                        radius: 9,
                        symbol: 'dash'
                    },
                    zIndex: 88,
                    data: [41]
                },{
                    name: 'Latest',
                    type: 'spline',
                    showInLegend: false,
                    marker: {
                        radius: 6,
                        symbol: 'circle'
                    },
                    color: '#ff754b',
                    zIndex: 99,
                    data: [36]
                }]
            });
            
            // Second
            Highcharts.chart('boxPlotSecond', {
                chart: {
                    type: 'column',
                    width: 150, 
                    height: 300,
                },
                credits: {enabled: false}, 
                exporting: { 
                    enabled: false
                },
                title: {
                    text: ''
                },
                xAxis: {
                    lineColor: '#000000',
                    tickColor: '#000000',
                    categories: ['MOVE'],
                    labels: {
                        autoRotation: false,
                        overflow: 'allow',
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                        },
                    }
                },
                yAxis: {
                    gridLineColor: '#000000',
                    min: 10,
                    labels: {
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                        },
                        format:'{value}%'
                    },
                    title: {
                        text: 'MOVE index',
                        style: {
                            fontSize: '13px',
                            color: '#000000',
                        },
                    }
                },
                legend: {
                    enabled: false,
                },
                tooltip: {
                    useHTML: true,
                    shared: true
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                    }, 
                    
                },
                series: [{
                    type: 'line',
                    name: 'test',
                    color: '#000000',
                    data: [[0, 10], [0, 75]],
                    marker: {
                        enabled: false
                    },
                    states: {
                        hover: {
                            lineWidth: 0
                        }
                    },
                    enableMouseTracking: false
                },{
                    name: 'Interquartile<br> range',
                    data: [25],
                    color: 'rgb(255,230,127)',
                    borderColor: '#303030',
                    zIndex:77,
                    pointWidth: 40
                },{
                    name: 'Q1',
                    showInLegend: false,
                    data: [25],
                    color: 'rgba(100,100,100,0)',
                },{
                    name: 'Median',
                    type: 'spline',
                    color: 'rgb(0,139,92)',
                    showInLegend: false,
                    lineWidth: 2,
                    marker: {
                        lineColor: 'rgb(0,139,92)',
                        lineWidth: 2,
                        radius: 9,
                        symbol: 'dash'
                    },
                    zIndex: 88,
                    data: [41]
                },{
                    name: 'Latest',
                    type: 'spline',
                    showInLegend: false,
                    marker: {
                        radius: 6,
                        symbol: 'circle'
                    },
                    color: '#ff754b',
                    zIndex: 99,
                    data: [36]
                }]
            });
화면 캡처 2022-05-19 161237.png
화면 캡처 2022-05-19 161237.png (6.6 KiB) Viewed 181 times
The picture above is a picture of my code working

What I want is a legend like the picture below.
화면 캡처 2022-05-19 162017.png
화면 캡처 2022-05-19 162017.png (11.47 KiB) Viewed 181 times
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Chart Legend Question

Hello,

You can use multiple X and Y axis to show two charts in one container with a linked legend.

Demo: https://jsfiddle.net/BlackLabel/tfj9gxLa/
API: https://api.highcharts.com/highcharts/s ... m.linkedTo

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”