Charts in Ionic


#1

Hi guys,
I’m trying to add a barchart to my app to display data as a result.
It’s working almost perfectly at the moment but i wanted to remove the piece at the top that shows ‘Issue as a %’. In my code below its determined by the ‘label’ identifier, and removing this just gives an ‘undefined’ text, but keeps the color bar. This color seems to be determined by the first rgb value in my ‘backgroundColor’ data set.
Any ideas guys?

Thanks.

ionViewDidLoad(){
    this.barChart = new Chart(this.barCanvas.nativeElement, {
      type: 'horizontalBar',
      data: {
        labels:["RISK", "MOBILITY", "SLEEP", "MOTIVATION",
        "SELF EST..", "CLOSE REL..", "SOCIAL ACTIV.."],
        datasets: [{
          label: 'Issue as a %',
          data: [this.risk, 12, 3, 25, 45, 60, 5],
          backgroundColor:[
            'rgba(166,166,166,0.5)',
            'rgba(77,77,255,0.5)',
            'rgba(0,255,85,0.5)',
            'rgba(255,214,51,0.5)',
            'rgba(153,51,255,0.5)',
            'rgba(255,117,26,0.5)',
            'rgba(102,255,255,0.5)'
          ],

this gives a result like so.

Untitled%20(3)


#2

Try adding a section for the chart title:
title: {
text: ‘’
},

See the demo jsfiddle from highcharts:
http://jsfiddle.net/8nhnaqye/


#3

That will remove the text, but the bar stays at the top.
Maybe it comes with it but seems like there should be a way around it.


#4

Try:
options: {
legend: {
display: false
},
}

Example: https://jsfiddle.net/bt8y9q70/


#5

Perfect, thank you very much. Much appreciated.