Hide the charts

Question

I have multiple charts on my dashboard. If I want to :

hide all charts.
hide all except one.
update the single chart and hide others

How can I achieve the above points?

Welcome to Stack Overflow! Please read through the [help center](https://stackoverflow.com/help), in particular [How do I ask a good question?](/help/how-to-ask) Your best bet here is to do your research, [search](/help/searching) for related topics on SO, and give it a go. If you get stuck and can't get unstuck after doing more research and searching, post a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your attempt and say specifically where you're stuck. People will be glad to help. — palaѕн, May 06 '20 at 15:26
Grab a reference to the chart (getElementById or querySelector). Set the style to none of hidden (not the same thing) via that reference on a button click or some event. — SRR, May 06 '20 at 15:29
What I am doing is this. `Highcharts.charts.forEach((chart)=>{ chart.style.display = "none";});` Is this correct? — Amita Yadav, May 06 '20 at 15:31

score 0 · Answer 1 · answered May 06 '20 at 15:35

This has already been answered here: JavaScript hide/show element

typically, you can target the element (a chart in your case) by id:

 let chart = document.getElementById('chart');

then set the display to 'none' to hide it:

chart.style.display = 'none'

transversely you can empty out or unset the display value to bring the chart back:

chart.style.display = ''

without seeing your code or what the page looks like that's the best advice I can give.

score 0 · Accepted Answer · answered May 06 '20 at 16:34

Below is a really basic example of how to find container by their id and toggle their visibility on buttons:

https://jsfiddle.net/BlackLabel/7wpc26o1/

[document.getElementById('btn1'), document.getElementById('btn2'), document.getElementById('btn3')].forEach((btn, i) => {
  let chartContainer = document.getElementById('container' + (i + 1))
  btn.addEventListener('click', function() {
    console.log(chartContainer.style.display)
    if (chartContainer.style.display === 'none') {
      chartContainer.style.display = 'block'
    } else {
      chartContainer.style.display = 'none'
    }
  })
})

I hope that everything is clear in this example, if not - feel free to ask.

Hide the charts

2 Answers2