search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.3k stars 1.15k forks source link

Bar charts height #908

Open xyrintech opened 6 years ago

xyrintech commented 6 years ago

I'm submitting a bug report

Current behavior The bar charts shows up correctly but the bars with value 0 are very hard to read and hover.

Expected behavior There should be a way to specify in minimum height for bars in bar chart.

Reproduction of the problem Please see this screenshot. 42420291 11d73d7c 82e1 11e8 81f4 a8dc6efee5c9 png 1124x309

Please tell us about your environment: MAC OS

marjan-georgiev commented 6 years ago

I think changing the bar height could be misleading. We may consider adding an invisible element that is 100% and overlays the bar, that triggers the tooltip.

xyrintech commented 6 years ago

Thanks for looking into this. I support your option. Do we already have this invisible element option in the package or you are planning to have it in future?

marjan-georgiev commented 6 years ago

We don't have it yet. It's just an idea on how this can be solved.

xyrintech commented 6 years ago

Got it. Is this something you can please implement?

GustavoLima93 commented 6 years ago

I have the same problem, what was the solution found? Tha height nk you so much

zhangxin511 commented 5 years ago

I did this https://github.com/swimlane/ngx-charts/pull/1086

felipe-sbatista commented 5 years ago

@GustavoLima93 @xyrintech
Is solve it by this way: when you build your options, in series object populate

series: [
                { // your bar
                    type: 'bar',
                    barWidth: '30%',
                    data: myData
                },
                { // shadow bar
                    type: 'bar',
                    barWidth: '30%',
                    itemStyle: {
                        // transparent bar
                        normal: { color: 'rgba(0, 0, 0, 0)' }
                    },
                    barGap: '-100%',
                    data: myDataShadow,
                    animation: false
                }
]

I recommend you put the max value in all positions of myDataShadow to make all bar clickable

zhangxin511 commented 5 years ago

release in 11.2.0