paget
Posts: 1
Joined: Thu Apr 11, 2019 11:40 am

Hiding a series with HTML button using Highcharts Cloud with google sheets

Hi everyone,

I'm looking to make my own legend that can hide/show series on click of legend items (the same way that the regular legend works). I have found plenty of examples of how to do this when the chart data is stored locally but they haven't been working for me. I've a feeling it could be down to the fact that I'm working with Highcharts Cloud and pulling data from Google Sheets.

I'm injecting the chart into my prototype with the following;

<div id="highcharts-1rPamh_W8"><script src="https://cloud.highcharts.com/inject/1rPamh_W8/" defer="defer"></script></div>

Any help would be much appreciated!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Hiding a series with HTML button using Highcharts Cloud with google sheets

Hi paget,

Welcome to our forum and thanks for contacting us.

You have access to the main chart object through window.Highcharts.charts[0]
You can find your series there and use hide() show() methods:
https://api.highcharts.com/class-refere ... eries#show
https://api.highcharts.com/class-refere ... eries#hide

Here you have a sample code:

Code: Select all

<body>
    <div id="highcharts-1rPamh_W8"><script src="https://cloud.highcharts.com/inject/1rPamh_W8/" defer="defer"></script></div>
    <button id="btn">Click to show/hide first series</button>

    <script>
        document.getElementById('btn').addEventListener('click', function() {
            if (Highcharts.charts[0].series[0].visible) {
                Highcharts.charts[0].series[0].hide()
            } else {
                Highcharts.charts[0].series[0].show()
            }
        })
    </script>
</body>
Let me know if you have any further questions.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Cloud”