packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md
The default bar height is 16px. For dense data, it can be as thin as 8px high. Always consider the visual weight of the bars in relationship to the rest of the app before choosing this type of chart.
The padding around the bar chart is a default of 8px from the x and y-axis container. This gives enough room for additional content like label values to display properly without overlapping on to the Y-axis ticks. A 2:1 spacing is maintained between all the bars in the graph so that space between two bars is always two times the bar height. This helps to ensure that the graph is not overpowering other data visualizations. For charts that display monetary values, the dollar symbol should be displayed as part of the total value. Also call out the currency in the chart title to provide additional context. Chart title can be used to communicate currency when the total labels are hidden.
The chart can accommodate unusually long labels by shrinking the bars without distorting the visual layout.
The chart provides an option to select a color scale based on the range of x values. Similar x values will end up having similar color. Use the colors attribute to define the color scale.
Use useSingleColor to use a single color for all bars.
See onRenderCalloutPerHorizontalBar prop to customize the hover callout.
If the y data points are of string type there are 2 modes to view them
showYAxisLablesTooltipexpandYAxisLabels property.