Possible to hide zero-height bars in a bar chart?

Question

For values of 0, Flot likes to draw a flat line where the bar would be. Is it possible to configure it to draw nothing?

Toreutic

This problem is more evident if you are using stacked bar charts; The solution is probably more complicated too as none of the solutions below will work (except hiding the line with width 0) – Otherness

@Otherness using linewidth messes up datapoint values – Stirring

Answer 1

In my application I solved this issue by setting yaxis min to a value greater than 0 and less than the resolution I was working with. Borders visible, flat line hidden.

var options = {
series: {
    stack: 0,
    lines: { show: false, fill: true, steps: false },       
            bars: { show: true, barWidth: 0.6 } 
        },
    xaxis: {
        mode: "time",
        timeformat: "%H:%M"
    },
    yaxis: { 
        min: 0.5 
    },
    selection: { mode: "x" },
    grid: { hoverable: true }
};

Strenuous

Answer 2

You can set the value to null when it's zero and that will prevent it from showing and allow you to keep borders around other bars.

Critic

Correction: This only seems to work if the series data is mostly non-zero. I had a case where both of my series had 0 values, and using null instead of 0 seemed to cause a lot of issues with flot. For example, plothover/click would report weird dataIndex values for the second series (the one stacked above). Changing the values from null back to 0 fixes the issues. Tweaking the lineWidth seems to be the only way to solve my specific case. – Jackelynjackeroo

@Critic Even though this is quite old post but this helped me like a charm. I was stuck in hiding 0 valued dots on line chart. I scratched my hairs but this solution helped me at one go. Thanks man. You made my day. Thank You for such a helpful post and I really appreciate it. – Vickey

If I would have asked this question, I would have definitely accepted this answer as correct. – Vickey

@Critic what value are you talking about? – Lifeboat

@Lifeboat - the value you are plotting – Critic

This is not true. NULL is still not fully supported as issued here github.com/apache/echarts/issues/9220 – Splash

@MikeReiche you realize this answer is 10 years old, right? NULL may not be "fully supported" but the workaround worked with the version used when this answer was submitted. Where's your helpful solution? – Critic

@Critic I came here for the same reason and found out that setting NULL did not work as expected. I did some research and found the recently updated issue. This feature is still not supported and may be interesting to know for other devs facing the same problem. IMHO thats helpful enough. – Splash

@MikeReiche again, it worked over 10 years ago when posted with the version used. IMHO solutions are helpful. If you have one for the latest version share it to help someone out. – Critic

Answer 3

One solution: set the lineWidth of the bars to 0. This eliminates the border around the bars.

This comes at the cost of the nice visibility for small values Flot has. With borders, even when your chart has large values, 1 and 2 for example are distinct. Without borders, the small numbers can be hard to see, but this effect can be offset by sticking to darker fillColor values for your bars.

Toreutic