Optimizing Chart Legends for Mobile Screens

Background

When creating complex charts, a legend positioned on the right side looks great on desktop but often "squashes" the chart on mobile devices. To ensure your visualizations remain readable, you can use Custom Code to automatically move the legend to the bottom of the chart when viewed on smaller screens.

Example: Transforming a Sidebar Legend

In a standard desktop view, a legend on the right side might occupy 20% to 30% of the total chart width. On a mobile device with a width of 375px, this leaves very little room for the actual data visualization, often making it unreadable. By applying the responsive rule, the legend "unstacks" from the side and moves to the bottom. This allows the chart to utilize the full width of the mobile screen, providing a much clearer view of the data points and axes.

Demo: Observe how the chart layout adapts in the GIF below. As the viewing area shrinks, the legend moves from the side to the bottom to maximize space for your data.

Interactive chart example:

The Solution: Using Responsive Rules

By using the responsive object in the Highcharts API, you can define a "breakpoint" (usually 500 pixels). When the screen is narrower than this width, the chart will override its default settings.

Custom Code Snippet

Copy and paste this into the Custom Code editor in everviz:

Highcharts.merge(true, options, {
    
    responsive: {
        rules: [{
            condition: {
                maxWidth: 700 //Breaks at 700 pixels
            },
            chartOptions: {
                legend: {
                    enabled: true,
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'vertical',
                    floating: false // Ensures it doesn't overlap the chart
                }
            }
        }]
    }
});

Important Note on the everviz Editor: Please be aware that these custom responsive rules are applied during the final chart render. While the behavior will work perfectly on your published chart and in the public link, the everviz editor’s internal "Mobile View" toggle may not always trigger these specific JavaScript overrides in real-time. To verify your changes, we recommend checking the Preview page or viewing the published URL on a mobile device.

Key Parameters Explained