Reputation: 99
How to set value on the top of a bar chart in e-charts / ngx-echarts library? Let me know if any attribute is present for the same, I am not able to find any of the attribute?
The result I desire for:
The result I am able to achieve so far:
The component:-
import {Component, Input, OnInit} from '@angular/core';
declare var echarts: any;
@Component({
selector:'app-bar-chart',
templateUrl:'./bar-chart.component.html',
styleUrls:['./bar-chart.component.css'],
})
export class BarChartComponent implements OnInit{
public barChartData;
ngOnInit() {
let dataAxis = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K','L'];
let data = [200, 180, 190, 233, 219, 203, 110, 250, 160, 130, 120, 263];
this.barChartData ={
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: 'black'
}
},
axisTick: {
show:true
},
axisLine: {
show: true
},
z: 10
},
yAxis: {
axisLine: {
show: true
},
axisTick: {
show: false
},
handle: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: 'black'
}
}
},
tooltip:{
trigger: 'axis',
showTip: false,
},
series: [
{ // For shadow
name: 'Total Revenue Cost',
type: 'bar',
value: true,
itemStyle: {
normal: { color: 'black' }
},
barGap: '-100%',
barCategoryGap: '12%',
animation: false
},
{
name: 'Total Revenue Cost',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
)
},
emphasis: {
name: 'Total Revenue Cost',
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]
)
}
},
data: data
}
]
}
}
}
Template:-
<div echarts [options]="barChartData" style="height: 199px; width: 825px; margin-left: 1%; margin-top: -65px"></div>
Upvotes: 6
Views: 6140
Reputation: 1041
A label can be configured on a bar series, see documentation.
Adding the following to you bar series will show the value of the bar on top of it:
label: {
normal: {
show: true,
position: 'top'
}
}
If you want to show some individual value you can configure a formatter
.
Upvotes: 12