M.Chandna
M.Chandna

Reputation: 99

Set value on top of bar charts- echarts

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: enter image description here

The result I am able to achieve so far: enter image description here

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

Answers (1)

f.loris
f.loris

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

Related Questions