Use of checkboxes in legend

[Axel Uhl]

I'm trying to use checkboxes in the legend to show/hide series. Users have complained about not understanding how they can show/hide series because they either didn't understand a visible series can be clicked to hide and grey out; or for the greyed-out series they didn't understand they can click them in the legend to show them and instead thought that greyed-out may mean "no data available" or similar.

Adding the checkboxes to the legend seems to break the layout. See http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-showcheckbox-true/. There, the series labels in the legend should be "Series 1" and "Series 2", respectively, but the "1" and "2" are hidden behind the checkboxes.

Also, if I'm trying to use the checkboxes for show/hide, I'd have to tick them when a series is added. Calling select(true) on the series doesn't set the checkbox. Probably some issue with trying this on a not-yet-drawn chart. Any ideas how I can initially select the checkbox?

[Shawn Quinn]

Hi Axel,

Regarding your first question: given that that appears to be an issue with the core Highcharts JS library, you'll probably have better luck posting that question over on the main Highcharts forums. If anyone on this forum knows how to improve the layout of the select checkboxes though, please speak up! :)

Regarding your second question: given the way the core Highchart's JS library works in order to set the default selection state of the series, you'll need to use the SeriesPlotOptions.setSelected(true) method. (Probably would be nice for the GWT Highcharts "Series.select()" method to handle managing that plot option for you in the case that the method is called before the series is rendered, so I'll add that to the enhancement list.)

Hope that helps,

  -Shawn

BTW - if you do get an answer to your first question over on the Highcharts forums, it'd be great if you could post the solution here as well for other GWT Highcharts users to benefit from.

[Axel Uhl]

And the following method proved helpful in setting up a chart such that it works well with the above:

/**
 * When using this method to enable the use of checkboxes only for hiding / showing a series, callers need to ensure
 * that all series have {@link PlotOptions#setSelected(boolean)} set to <code>true</code> for all series that are
 * added to the chart and hence visible. Otherwise, the checkbox won't initially be in sync with the series'
 * visibility state.
 */
protected void useCheckboxesToShowAndHide(final Chart chart) {
    chart.setLegend(new Legend().setEnabled(true).setBorderWidth(0).setSymbolPadding(20)); // make room for checkbox
    chart.setSeriesPlotOptions(new SeriesPlotOptions().setSeriesCheckboxClickEventHandler(new SeriesCheckboxClickEventHandler() {
                @Override
                public boolean onClick(SeriesCheckboxClickEvent seriesCheckboxClickEvent) {
                    if (seriesCheckboxClickEvent.isChecked()) {
                        chart.getSeries(seriesCheckboxClickEvent.getSeriesId()).show();
                    } else {
                        chart.getSeries(seriesCheckboxClickEvent.getSeriesId()).hide();
                    }
                    return false; // don't toggle the select state of the series
                }
            }).setShowCheckbox(true).
            setSeriesLegendItemClickEventHandler(new SeriesLegendItemClickEventHandler() {
                @Override
                public boolean onClick(SeriesLegendItemClickEvent seriesLegendItemClickEvent) {
                    // disable toggling visibility by clicking the legend item; force user to use checkbox instead
                    return false;
                }
            }));
}