Automatically hide data series with value "0"
Question
Application Type
Reactive

Hello Everyone.

I had a problem with hiding the color to the data series which have the "0" value in the stacked bar chart.

Currently I am able to assign the color to the data series manually in the AdvanceFormat => HighchartsJSon as below code:

series: [
{
    color: 'Tomato'
},
{
    color: 'Orange'
},
{
    color: 'Yellow'
},
{
    color: 'Khaki'
},
{
    color: 'YellowGreen'
},
{
    color: 'Chartreuse'
},
{
    color: 'Green'
}
]

So the result will be like this:

I did assign more colors than the actual number of data series because the number of the data series could be increased or reduced in the future. So my target is to be able to automatically hide the data series labels which have "0" value.

Hope some one could help me on this.

Thank you very much.

Phuoc Luc

Hi @Luc Nguyen,

See if this helps you

https://www.highcharts.com/forum/viewtopic.php?t=33591

Kind Regards,

Márcio

Hello Carvalho,

Thanks very much for your reply. I did check it also but this is to use for hiding data label with "0" value not for data series. I also tried to approach the same as below for data series but it did not work.

formatter: function(){                    

return (this.x!=0)?this.x:"";                    }

Phuoc Luc.

This is just an idea, buuut, why don't make the advanced format dynamic, at least the data series, where you make a structure of data series, and you do all the logic behind when it's rendering. 

That way you will be able to list append those that exist (don't forget to filter by some order). Example. You will have some data type where is some kind of structure that has the order, colour. And you will have a variable of type text where you will build the JSON for the data series. That way you will build your data series automatically and you can assign it to the advanced format highchartjson

Let me know if you have any questions.

Kind Regards,

Márcio


Hello Marcio,

Thank you so much for your answer. I am sorry for this late reply but I did not really understand what you mean by assigning it to the advanced format highchartJson. 

This is the structure of the data point for charts:

But the color is only used for data label for this case. What I want is assign color to data series and hide it if its value is equal "0". 

Let me know if you have any question.

Thanks very much,

Phuoc Luc

Yeah, my idea was to manage that structure data for the chart, by removing the data series by seeing if the value is 0, you need to loop that list and you go series by series seeing the value, if the value is 0, you remove the data series name(label) if not you append.

Regards,

Márcio

Thank you for your reply Marcio

Yes ofcourse I can remove the data series that had the value "0" but because I did assign this series color manually in the AdvancedFormat =>HighChartJson:

series: [
{
    color: 'Tomato'
},
{
    color: 'Orange'
},
{
    color: 'Yellow'
},
{
    color: 'Khaki'
},
{
    color: 'YellowGreen'
},
{
    color: 'Chartreuse'
},
{
    color: 'Green'
}
]

So in case there is not enough data series in the data point according to the list color above (tomato, orange, yellow, khaki..., green) . So It will be automatically named them to series 1, series 2 as in this below image

As my understanding, in order to remove the series 4, 5,6,7 as in above image. I have to delete its color in the advanceformat accordingly. But I can not do that because my data table will be changed by a filter action, so in case it have more data series than what I did assign manually then the series color will take the default one  from outsystems (blue for example) => this is a problem I also need to avoid.

I hope that now you get my issue Marcio.

but anyway Thanks very much for your great support.

Best regards,

Phuoc Luc

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.