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="" defer="defer"></script></div>

Any help would be much appreciated!

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: ... eries#show ... eries#hide

Here you have a sample code:

Code: Select all

    <div id="highcharts-1rPamh_W8"><script src="" defer="defer"></script></div>
    <button id="btn">Click to show/hide first series</button>

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

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Cloud”