echart horizontal bar make chart label outside bar

In echarts version:5.3.3

Is it possible to make the label(see the numbers 630230, 131744 etc..) outside of the bar like here in the image

I am able to do with this codesandbox like the below image, where the label is coming after the bar,

I like to keep the label outside of the chart like the first image, anyone able to do it before?

thanks in advance for any help.

const options = { title: { text: "World Populationss", show: false }, tooltip: { trigger: "axis", show: false, axisPointer: { type: "none" } }, legend: { show: false }, grid: null, xAxis: { type: "value", show: false, axisLine: { show: false }, z: 2, axisTick: { show: false }, axisLabel: { formatter: "{value}", color: "#FFF", //var(--primary-text-color) inside: false, // ... show: true } // boundaryGap: [0, 0.01] }, yAxis: { type: "category", data: ["Brazil", "Indonesia", "USA", "India", "China", "World"], show: true, position: "left", axisLine: { show: false }, z: 3, axisTick: { show: false }, axisLabel: { color: "#FFF", //var(--primary-text-color) inside: true, // ... show: true }, nameLocation: "start" }, series: [ { name: "2022", type: "bar", data: [18203, 23489, 29034, 104970, 131744, 630230], label: { show: true, position: "top", formatter: "{c}", // position:"insideRight", position: ["100%", "50%"] }, yAxis: { position: "top" }, itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: "#008D8E" // --histogram-item-gradient-background }, { offset: 1, color: "#24C1C3" // color at 100% } ], global: false // default is false }, borderRadius: 4, normal: { label: { show: true, position: "outside" } } } } ] }; const App: React.FC = () => { return ( <ReactECharts theme={"dark"} style={{ height: 400, width: 400 }} option={options} opts={{ renderer: "svg" }} /> ); }; export default App;

<script src=""></script> <script src=""></script>

1 Answer

As far as I can see the labels are always positioned relative to the bars, so there's no option to place them to the right.

However, the effect you are looking for can be achieved by creating a secondary y axis, have that axis placed to the right of the plot and set the labels of that axis to the values themselves.

There are some other tweaks required:

• setting the max of the x axis to the maximum value of data to avoid setting the max to a round value that will create a gap to the right.
• setting the grid.containLabel to true to ensure the plot is scaled such that the labels of the secondary y axis are not cut off.

const data = [18203, 23489, 29034, 104970, 131744, 630230]; const myChart = echarts.init(document.querySelector('#chart'), 'dark'); const options = { title: { text: "World Populationss", show: false }, tooltip: { trigger: "axis", show: false, axisPointer: { type: "none" } }, legend: { show: false }, grid: {containLabel: true}, xAxis: { type: "value", show: false, axisLine: { show: false }, max: Math.max(...data), z: 2, axisTick: { show: false }, axisLabel: { formatter: "{value}", color: "#FFF", //var(--primary-text-color) inside: false, show: true }, boundaryGap: [0, 0.01] }, yAxis: [{ type: "category", data: ["Brazil", "Indonesia", "USA", "India", "China", "World"], show: true, position: "left", axisLine: { show: false }, z: 3, axisTick: { show: false }, axisLabel: { color: "#FFF", //var(--primary-text-color) inside: true, // ... show: true }, nameLocation: "start" }, { type: "category", data: data, position: "right", axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: "#FFF", //var(--primary-text-color) inside: false, show: true }, }], series: [ { name: "2022", type: "bar", data: data, label: { show: false, formatter: "{c}", position: "right", distance: 0 }, itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: "#008D8E" // --histogram-item-gradient-background }, { offset: 1, color: "#24C1C3" // color at 100% } ], global: false // default is false }, borderRadius: 4 // normal: { // label: { // show: true, // position: ["100%", "50%"] // } // } } } ] }; myChart.setOption(options);

<div></div> <script src=""></script>

Here's a fork of your react app