Highcharts Legend: Overlapping Chart on Small Screens

Question

I've created an area chart that should be one-size-fits-all for various screen sizes. The issue comes in when viewing the chart on a phone. The legend overlaps the chart.

Here is the current config:

    chart: {
        backgroundColor: '#EFEFEF',
        margin: [50,10,60,50]         
    },        
    credits: {
        enabled: false
    },
    title: {
        text: 'Engagement Index Score',
        style: {
            color: '#555555',
            fontWeight: 'normal',
            fontSize: 13
        }
    },
    legend: {
        borderWidth: 0,
        symbolPadding: 10,
        itemMarginBottom: 10,
        itemDistance: 20,
        itemStyle: {
            color: '#555555',
            cursor: 'default'
        },
        itemHoverStyle: {
            color: '#555555'
        }
    },        
    yAxis: {
        min: 0,
        title: {
            text: '% of U.S. Workers',
            style: {
                color: '#555555',
                fontWeight: 'normal',
                fontSize: 13
            },
            margin: 15                           
        }
    },        
    xAxis: {
        min: 5,
        max: 100          
    },
    plotOptions: {
        area: {
            connectNulls: true
        },
        scatter: {
            color: '#565656',
            dashStyle: 'dash',
            lineWidth: 2,
            zIndex: 100,
            events: {
                legendItemClick: function () {
                    return false; 
                }
            },
            enableMouseTracking: false,
            events: {
                legendItemClick: function () {
                    return false; 
                }
            }
        }                     
    },      
    series: [{
        type: 'scatter',
        name: ['You!'],
        data: [[80,21]],
        marker: {
            symbol: 'url(img/star.png)'
        }
    }, {
        type: 'scatter',
        name: null,
        data: [[80,0], [80,20]],
        marker: {
            enabled: false
        },
        showInLegend: false
    }, {
        type: 'area',
        name: ['Disengaged'],
        data: [[5,0],[10,4],[15,4],[20,3],[25, 3],[30, 7],[35, 7],[40, 9], [45, 9], [49.5, 14]],
        color: '#EA2428',
        marker: {
            enabled: false
        }
    }, {
        type: 'area',
        name: ['Under Engaged'],
        data: [[49.5, 14], [55,14], [60, 14], [65, 13], [70, 13], [74.5, 18]],
        color: '#F79420',
        marker: {
            enabled: false
        }            
    }, {
        type: 'area',
        name: ['Moderately Engaged'],
        data: [[74.5, 18], [80, 18], [85, 8], [90, 8], [95, 8], [99.5, 20]],
        color: '#18AFE6',
        marker: {
            enabled: false
        }            
    }, {
        type: 'area',
        name: ['Fully Engaged'],
        data: [[99.5, 20], [100, 20]],
        color: '#5C2E8F',
        marker: {
            enabled: false
        }            
    }]

Here is a fiddle with the current config:

http://jsfiddle.net/gabezeck/8Beea/

Adjust the width of the rendered code to see how it would look in mobile.

Does anyone have a good solution? Can the legend grow down instead of up?

Creating a static HTML version of the legend is not an option, nor is a solution that displays all data series in the chart. We need to hide one, as one of them has the sole function of drawing that dotted line that you see.

Thanks for the help!

Answer 1

Remove the Margin, and it will take dynamic Margins, and adjust the Legend's Position by itself, Check this updated Fiddle

Answer 2

Only what comes to my mind is catch resize event or chekcing width and then position legend.