Skip to content

Dynamically position bar charts axis name with long axis labels

Dhiraj Bodicherla requested to merge bar-charts-with-long-axis-labels into master

Summary

Bar charts can have long axis labels. eCharts currently does not support dynamically adjusting axis names based on axis labels. This MR adds a temporary fix.

There is an ongoing pull request here https://github.com/apache/incubator-echarts/pull/12236 which will go in echarts@4.9.0. Their next release is 4.8.0 which will be at the end of March 2020. The version we're using is 4.2.1. So it might be a while until we consume the version with fix.

What does this MR do?

After researching a bit, we decided to hack this by manually setting the nameGap based on bar chart data. Find the rationale here (Option 2) gitlab!27155 (comment 307126569).

For bar charts with positive values

We determine the pixel value of [0,*] in the coordinate system and based on the pixel value the axis name is positioned using nameGap option. This fix only works if the chart has non-negative values.

For bar charts with negative values

If the chart has negative values, the coord system x-axis doesn't start with 0 and hence finding the pixel value isn't possible. In such cases, the axis labels are ellipsized and nameGap is set to default 50 px.

Screenshots

bar_charts_example

closes #682 (closed)

Edited by 🤖 GitLab Bot 🤖

Merge request reports