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

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

Thu Apr 11, 2019 11:53 am

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: 2660
Joined: Thu Jun 14, 2018 11:40 am

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

Fri Apr 12, 2019 8:51 am

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
Locked

Return to “Highcharts Cloud”