Write text into a bar element? (Chart.js)

@dram3vlh wrote:

Hi, i made a stacked bar chart and i want to write some info in every stack.How can i write?

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as ChartJs from 'chart.js';

@Component({
  selector: 'page-graph',
  templateUrl: 'graph.html'
})
export class GraphPage {
  chartOptions: any
  constructor(public navCtrl: NavController) {


  }
  public barChartOptions:any = {
		scaleShowVerticalLines: false,
		responsive: true,
  };

  ionViewDidEnter() {
    var canvas = <HTMLCanvasElement> document.getElementById("myChart");
	var ctx = canvas.getContext("2d");

/*	ctx.font = '48px serif';
	ctx.textAlign = 'left';
	ctx.strokeText('Hello', 0, 100);*/

	ChartJs.defaults.global.legend.display = false;
	ChartJs.defaults.global.tooltips.enabled = false;
	 ChartJs.Bar(ctx,{
      type: 'line',
      data: {

  labels: ["Gün 1", "Gün 2", "Gün 3","Gün 4","Gün 5","Gün 6","Gün 7"],
			datasets: [


				{
			  	label: "Kahvaltı",
			  	backgroundColor: "rgba(220, 255, 46, 0)",
			  	data: [0, 0, 0,0, 0, 0,0],
				  stack: 'Stack 1',
				},
			 {
			  	label: "Öncesi",
			  	backgroundColor: "rgba(99,255,132,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
				  stack: 'Stack 1',


			  },
			  {
			  	label: "Karb Miktarı",
			  	backgroundColor: "rgba(99,132,255,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
			  },
			  {
			  	label: "İnsülin",
			  	backgroundColor: "rgba(255,99,132,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
				},
				{
			  	label: "Sonrası",
			  	backgroundColor: "rgba(220, 255, 46, 0.53)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
			  },
				{
			  	label: "Öğlen",
			  	backgroundColor: "rgba(220, 255, 46, 0)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
				},
				{
			  	label: "Öncesi",
			  	backgroundColor: "rgba(99,255,132,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
			  },
			  {
			  	label: "Karb Miktarı",
			  	backgroundColor: "rgba(99,132,255,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
			  },
			  {
			  	label: "İnsülin",
			  	backgroundColor: "rgba(255,99,132,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
				},
				{
			  	label: "Sonrası",
			  	backgroundColor: "rgba(220, 255, 46, 0.53)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
			  },
				{
			  	label: "Akşam",
			  	backgroundColor: "rgba(220, 255, 46, 0)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
				},
				{
			  	label: "Öncesi",
			  	backgroundColor: "rgba(99,255,132,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
			  },
			  {
			  	label: "Karb Miktarı",
			  	backgroundColor: "rgba(99,132,255,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
			  },
			  {
			  	label: "İnsülin",
			  	backgroundColor: "rgba(255,99,132,0.2)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
				},
				{
			  	label: "Sonrası",
			  	backgroundColor: "rgba(220, 255, 46, 0.53)",
			  	data: [10, 10, 10,10, 10, 10,10],
			  	stack: 'Stack 1'
			  },
			]

	  },


      options: {
				scales: {
					yAxes: [{
						title:{
							text: 'KAHVALTI,ÖĞLEN, AKŞAM',

						},
						tooltip: {
							enabled: false,
						},
						ticks: {
							max: 150,
						},
						stacked: true,
					}]
				}
			}
		});
    }
}

Posts: 1

Participants: 1

Read full topic