Left-Aligned Category Name in a Bar Chart

Version

Function Description

Category names in a bar chart are right aligned by default, which  makes the left side of the chart looks messy.

You want the category names in the bar chart to be left aligned for a more organized visual effect.

Before optimization:

After optimization:

Dataset Creation

Create a general report and enter the SQL statement SELECT * FROM Sales_Volume to create a dataset named ds1.

Chart Design

Insert a bar chart in cell A1 and set Data Source of the chart to dataset ds1, as shown in the following table.

Adding a Loading End Event

Choose Template > Web Attribute in the menu bar, select Pagination Preview Setting, select Set for This Template Separately, and add a Load End event.

Enter the  JavaScript codes, as shown in the following figure.

The JavaScript codes are as follows:

setTimeout(function() {
	$("td[id^=A1-] svg > g.backGroup > g:nth-child(6) > g:nth-child(2) text").each(function(i, item) {
		var str = $(item).attr("transform").replace("translate(", "").replace(")", "");
		str = str.split(" ")[1];
		$(item).attr("transform", "translate(8 " + str + ")");
	})
}, 100)

Effect Display

Save the template, click the Preview icon, and the category names in the bar chart will be left aligned, as shown in the following figure.

Note:

The effect cannot be previewed on mobile terminals.

For details, you can click to download the template Left-Aligned Category Name in a Bar Chart.cpt.