CODEWITHSUNDEEP
javascripthighcharts
Michael Hari
Michael Hari

Reputation: 63

Extending Highchart's show() and hide() functions

What would be the best approach to extend the show() and hide() functions in Highcharts?

I want to add a boolean-like show(effectLinkedSeries) and hide(effectLinkedSeries), so I can control when a linkedSeries gets removed or added along with its "parent". Here is a demo of linkedSeries functionality. A property called "linkedTo" sets up the functionality:

series: [{
            name: 'Temperature',
            data: averages,
            zIndex: 1,
            marker: {
                fillColor: 'white',
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[0]
            }
        }, {
            name: 'Range',
            data: ranges,
            type: 'arearange',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0
        }]

I could modify the source directly but I'd rather try to extend the library, instead of hacking it.

Upvotes: 0

Views: 266

Answers (1)

Michael Hari
Michael Hari

Reputation: 63

Figured out I can make use of the Highcharts.Series.prototype to accomplish this

Highcharts.Series.prototype.setVisible = function (vis, redraw, effectLinkedSeries) {
        var series = this,
            chart = series.chart,
            legendItem = series.legendItem,
            showOrHide,
            ignoreHiddenSeries = chart.options.chart.ignoreHiddenSeries,
            oldVisibility = series.visible;

        // if called without an argument, toggle visibility
        series.visible = vis = series.userOptions.visible = vis === Highcharts.UNDEFINED ? !oldVisibility : vis;
        showOrHide = vis ? 'show' : 'hide';

        // show or hide elements
        Highcharts.each(['group', 'dataLabelsGroup', 'markerGroup', 'tracker'], function (key) {
            if (series[key]) {
                series[key][showOrHide]();
            }
        });


        // hide tooltip (#1361)
        if (chart.hoverSeries === series || (chart.hoverPoint && chart.hoverPoint.series) === series) {
            series.onMouseOut();
        }


        if (legendItem) {
            chart.legend.colorizeItem(series, vis);
        }


        // rescale or adapt to resized chart
        series.isDirty = true;
        // in a stack, all other series are affected
        if (series.options.stacking) {
            Highcharts.each(chart.series, function (otherSeries) {
                if (otherSeries.options.stacking && otherSeries.visible) {
                    otherSeries.isDirty = true;
                }
            });
        }

        // show or hide linked series
        Highcharts.each(series.linkedSeries, function (otherSeries) {
            if (effectLinkedSeries === true) {
              otherSeries.setVisible(vis, false);
            }
        });

        if (ignoreHiddenSeries) {
            chart.isDirtyBox = true;
        }
        if (redraw !== false) {
            chart.redraw();
        }

        Highcharts.fireEvent(series, showOrHide);
}; // end Highcharts.Series.prototype.setVisible

Highcharts.Series.prototype.show = function (effectLinkedSeries) {
        this.setVisible(true,undefined,effectLinkedSeries);
};

Highcharts.Series.prototype.hide = function (effectLinkedSeries) {
        this.setVisible(false,undefined,effectLinkedSeries);
};

Upvotes: 1

Related Questions