archi
archi

Reputation: 71

ng2-charts bar charts displaying values at the end of the bar

I am using ng2-charts to display very basic charts. I am using horizontal bar charts and I need to display values at the end of bars. I couldn't figure out how to do that? See image

Following is my html and options:

 <canvas height="500" width="1000" baseChart 
            [data]="barChartData"
            [labels]="statusNames"
            [options]="barChartOptions"
            [colors]="chartColors"
            [legend]=false
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)">
</canvas>


    public barChartOptions: any = {
    title: {
        display: true, text: 'Current Subject Status',
        fontSize: 20,
        color: "black"
    },
    scales: {
        xAxes: [{ 
             gridLines: { 
                          borderDash: [5], 
                          lineWidth: 1.4
                         }, 
             ticks: { beginAtZero: true} 
             }],
        yAxes: [{ 
                  barThickness: 20, 
                  gridLines: { display: false }
                }]
    },
    maintainAspectRatio: true,
    responsive: false
    };

    public barChartType: string = 'horizontalBar';
    public chartColors: any = [{ backgroundColor: "#005CA9" }];
    public barChartData: number[] = [3, 97 ,15, 13,63 ];

Upvotes: 4

Views: 4074

Answers (1)

archi
archi

Reputation: 71

Found the solution Here on GitHub

Upvotes: 3

Related Questions