Previously, we can only draw vertical bar charts. Since horizontal bar charts are particularly useful on mobile devices, it is desirable to have it supported.
This PR realize drawing the horizontal bar chart by analyzing the data types of the X and Y axis: if the data type of the x-axis is quantitative, it should draw a horizontal chart, and draw the bars from the y-axis instead (via passing down the prop drawFromXAxis={false}).
Additionally, to make the charts which have both positive and negative value on the quantitative axis more readable, it adds a gray auxiliary line at zero-value.
Purpose
Previously, we can only draw vertical bar charts. Since horizontal bar charts are particularly useful on mobile devices, it is desirable to have it supported.
This PR realize drawing the horizontal bar chart by analyzing the data types of the X and Y axis: if the data type of the x-axis is
quantitative, it should draw a horizontal chart, and draw the bars from the y-axis instead (via passing down the propdrawFromXAxis={false}).Additionally, to make the charts which have both positive and negative value on the
quantitativeaxis more readable, it adds a gray auxiliary line at zero-value.Tasks: See
Support horizontal bar charts&Display a horizontal line at zero if there are negative y values like c3: https://github.com/iCHEF/transcharts/issues/25Updated doc (Click
Chart>Bar Chart): https://ichef.github.io/transcharts/Changes
Screenshots
Horizontal chart
Original vertical chart => Transposed horizontal chart
Original vertical chart
Transposed horizontal chart
Displaying tooltips