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,
}]
}
}
});
}
}