fdarodrigo
Posts: 7
Joined: Fri Apr 22, 2022 3:45 pm

How to hide value 0 columns

In my windrose, there are some columns showing value 0, turning the chart with bad visibility. In the girst serie, it's normal. But in second onward, it's showing columns that apears in first but has value 0. As if it were a "ghost" column from first serie. How can i solve this?

PS: My y series has dinamical values. this is the firsts and seconds:

series: [

{
name: '0-5 km/h',
data: [
{
x: 0,
y: parseFloat(((this.velocRang1N.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 1,
y: parseFloat(((this.velocRang1NNE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 2,
y: parseFloat(((this.velocRang1NE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 3,
y: parseFloat(((this.velocRang1ENE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 4,
y: parseFloat(((this.velocRang1L.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 5,
y: parseFloat(((this.velocRang1ESE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 6,
y: parseFloat(((this.velocRang1SE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 7,
y: parseFloat(((this.velocRang1SSE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 8,
y: parseFloat(((this.velocRang1S.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 9,
y: parseFloat(((this.velocRang1SSW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 10,
y: parseFloat(((this.velocRang1SW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 11,
y: parseFloat(((this.velocRang1WSW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 12,
y: parseFloat(((this.velocRang1W.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 13,
y: parseFloat(((this.velocRang1WNW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 14,
y: parseFloat(((this.velocRang1NW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 15,
y: parseFloat(((this.velocRang1NNW.length*100)/this.iotracer_data.length).toFixed(2)),
}

]
},
{
name: '6-11 km/h',
data: [
{
x: 0,
y: parseFloat(((this.velocRang2N.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 1,
y: parseFloat(((this.velocRang2NNE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 2,
y: parseFloat(((this.velocRang2NE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 3,
y: parseFloat(((this.velocRang2ENE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 4,
y: parseFloat(((this.velocRang2L.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 5,
y: parseFloat(((this.velocRang2ESE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 6,
y: parseFloat(((this.velocRang2SE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 7,
y: parseFloat(((this.velocRang2SSE.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 8,
y: parseFloat(((this.velocRang2S.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 9,
y: parseFloat(((this.velocRang2SSW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 10,
y: parseFloat(((this.velocRang2SW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 11,
y: parseFloat(((this.velocRang2WSW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 12,
y: parseFloat(((this.velocRang2W.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 13,
y: parseFloat(((this.velocRang2WNW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 14,
y: parseFloat(((this.velocRang2NW.length*100)/this.iotracer_data.length).toFixed(2)),
},
{
x: 15,
y: parseFloat(((this.velocRang2NNW.length*100)/this.iotracer_data.length).toFixed(2)),
}
]
},
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to hide value 0 columns

Hi fdarodrigo,

Welcome to our forum and thanks for contacting us with your question!

Please try to disable grouping option:

Code: Select all

  plotOptions: {
    series: {
      grouping: false
    }
  },
API reference: https://api.highcharts.com/highcharts/s ... n.grouping

Please let me know if it helped. If not, please create a live demo with the issue. You can start here: https://jsfiddle.net/BlackLabel/6atfnom7/

Regards!
Mateusz Bernacik
Highcharts Developer
fdarodrigo
Posts: 7
Joined: Fri Apr 22, 2022 3:45 pm

Re: How to hide value 0 columns

Mateusz Bernacik, it didn't work :/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to hide value 0 columns

Hi fdarodrigo,

To tell what is the cause I need to take a look at the code. Please create a live demo showing the issue. You can start here: https://jsfiddle.net/BlackLabel/6atfnom7/ If you pull data from somewhere else, you don't need to use it in the demo, the data can be hardcoded.

Regards!
Mateusz Bernacik
Highcharts Developer
fdarodrigo
Posts: 7
Joined: Fri Apr 22, 2022 3:45 pm

Re: How to hide value 0 columns

Ok, mateusz.b. My app is in Angular, so here is the highchart part of the code.

https://jsfiddle.net/aprq03xk/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to hide value 0 columns

Hi fdarodrigo,

Thanks for the code.

Here is a demo based on it: https://jsfiddle.net/BlackLabel/s1htz3vw/
Feel free to introduce any required changes and if you prefer working on angular code you can recreate the chart here:
https://stackblitz.com/edit/highcharts-angular-line

When it comes to the issue, If I understood correctly, the problem is that when there are 0 values in series, some columns are not visible, which technically is a correct behaviour. Please let me know if I understand correctly and if so tell me what behaviour would you expect, what do you want to achieve.

Regards!
Mateusz Bernacik
Highcharts Developer
fdarodrigo
Posts: 7
Joined: Fri Apr 22, 2022 3:45 pm

Re: How to hide value 0 columns

Hi, mateusz.b. Thank you for yor help.

I'm thinking it is a problem in lib or dependency from windrose.
When i use almost the same code in jsfiddle.net and my application, i have different results.

Like bellow:
In jsfiddle
ghostdata2.png
ghostdata2.png (27.16 KiB) Viewed 535 times
https://jsfiddle.net/e4c2apxz/

in my app
ghostdata.png
ghostdata.png (36.48 KiB) Viewed 535 times


In my application, three columns with zero values data are shown (N, ESE, WNW). These "ghost" columns are the problem. I want hide them.

PS: When i set polar to "false" these ghost columns disappears. But i need a windrose
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to hide value 0 columns

Hi fdarodrigo,

If Highcharts version both in jsFiddle and your app is the same, it is highly unlikely that the issue is caused by highcharts or windrose dependency. I'd bet that there is something wrong with the config, but I can't tell for sure without the reproduction of the problem. Also, the chart from the jsFIddle that you provided looks slightly different than those form your screens. Please recreate the issue in Angular live demo:
https://stackblitz.com/edit/highcharts-angular-line

Regards!
Mateusz Bernacik
Highcharts Developer
fdarodrigo
Posts: 7
Joined: Fri Apr 22, 2022 3:45 pm

Re: How to hide value 0 columns

Hi, mateusz.b

The problem was solved. It was a version problem. Thank you so much for your help.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to hide value 0 columns

That's great to hear! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”