Sizing and centering donut chart

Topic: Sizing and centering donut chart

anuragd7 free asked 5 years ago

*_Expected behavior_*Hi I am using the donut chart and facing 2 problems.

I want to center the chart inside the card container, by moving the chart a little lower (see attached screenshot here). However when I do this I do not want to move the title of the chart.
I would like to increase the size of the chart but I am not able to change the size using the "size" attribute as described here. However whatever number I specify in the size attribute the chart does not seem to change in size.

My code is shown below

HTML

<div style="display: block">
  <canvas
    mdbChart
    [chartType]="chartType"
    [datasets]="chartData"
    [labels]="chartLabels"
    [colors]="chartColors"
    [options]="chartOptions"
    [legend]="true"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)"
    size="50"
  >
  </canvas>
</div>

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-donut-chart',
  templateUrl: './donut-chart.component.html',
  styleUrls: ['./donut-chart.component.scss']
})
export class DonutChartComponent implements OnInit {
  @Input() chartData: Array<any>; // data for plotting chart
  @Input() chartTitle: any; // title on top of chart
  @Input() backgroundColor: string[]; 
  @Input() hoverBackgroundColor: string[]; 
  chartType: string = 'doughnut';

  // chartData: Array<any>;

  chartLabels: Array<any> = ['Red', 'Green'];

  chartColors: Array<any>;

  chartOptions: any;

  constructor() { }

  ngOnInit() {
    this.chartColors = [
      {
        backgroundColor: this.backgroundColor,
        hoverBackgroundColor: this.hoverBackgroundColor,
        borderWidth: 2,
      }
    ];

    this.chartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: this.chartTitle,
        fontFamily: "quicksand-medium",
        fontSize: 16,
        fontColor: "#747d8c"
      },
      legend: {
        display: false
      },
      tooltips: {
        displayColors: false
      }
    };
  }

  chartClicked(e: any): void { }
  chartHovered(e: any): void { }
}

Please suggest as to how I can solve these 2 problems.

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=58931" target="_blank" rel="nofollow">@anuragd7</a></p>

<p>In this case i have to say sadly - we are limited by chartjs settings.</p>

<p><a href="https://www.chartjs.org/docs" target="_blank" rel="nofollow">https://www.chartjs.org/docs</a></p>

<p>I did not find anything for separate title and chart styling.</p>

<p>But this is my suggestion to work around your problem:</p>

<pre class="prettyprint"><code>@ViewChild('container', { static: true }) container: ElementRef;
  containerHeight: number;

public chartType = 'doughnut';

public chartDatasets: Array<any> = [{ data: [300, 50, 100, 40, 120], label: 'My First dataset' }];

public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

public chartColors: Array<any> = [
    {
      backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
      hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
      borderWidth: 2,
    },
  ];

public chartOptions: any;
  public chartClicked(e: any): void {}
  public chartHovered(e: any): void {}

ngOnInit() {
    this.containerHeight = this.container.nativeElement.offsetHeight / 10;

this.chartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: 'Title',
        position: 'top',
        padding: this.containerHeight,
        fontFamily: 'quicksand-medium',
        fontSize: 16,
        fontColor: '#747d8c',
      },
      legend: {
        display: false,
      },

tooltips: {
        displayColors: false,
      },
    };
  }
</code></pre>

<p>using the <code>padding</code> in  <code>title</code> you can add number of pixels above and below the title text.</p>

<p>Hope it helps!</p>

<p>Best, Bartosz.</p>

Please insert min. 20 characters.

Dear @anuragd7

In this case i have to say sadly - we are limited by chartjs settings.

https://www.chartjs.org/docs

I did not find anything for separate title and chart styling.

But this is my suggestion to work around your problem:

<div class="container-fluid">
  <div class="row">
    <div style="height:500px" class="right-col col-md-3 pr-0 pl-1" #container>
      <mdb-card style="height:100%">
        <div style="position: relative; height:75%;">
          <canvas
            mdbChart
            [chartType]="chartType"
            [datasets]="chartDatasets"
            [labels]="chartLabels"
            [colors]="chartColors"
            [options]="chartOptions"
            [legend]="true"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
          >
          </canvas>
        </div>
      </mdb-card>
    </div>
  </div>
</div>

TS:

@ViewChild('container', { static: true }) container: ElementRef;
  containerHeight: number;

  public chartType = 'doughnut';

  public chartDatasets: Array<any> = [{ data: [300, 50, 100, 40, 120], label: 'My First dataset' }];

  public chartLabels: Array<any> = ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'];

  public chartColors: Array<any> = [
    {
      backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
      hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774'],
      borderWidth: 2,
    },
  ];

  public chartOptions: any;
  public chartClicked(e: any): void {}
  public chartHovered(e: any): void {}

  ngOnInit() {
    this.containerHeight = this.container.nativeElement.offsetHeight / 10;

    this.chartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: 'Title',
        position: 'top',
        padding: this.containerHeight,
        fontFamily: 'quicksand-medium',
        fontSize: 16,
        fontColor: '#747d8c',
      },
      legend: {
        display: false,
      },

      tooltips: {
        displayColors: false,
      },
    };
  }

using the padding in title you can add number of pixels above and below the title text.

Hope it helps!

Best, Bartosz.

anuragd7 free commented 5 years ago

Thanks @Bartosz Termena. Using your suggestions I was able to increase the size of the donut chart by setting a size for the container for the donut-chart. The padding option for the title doesn't work so well though as in chartjs the padding is applied to both the top and bottom. Thanks for your help

Add comment

anuragd7 free answered 5 years ago

0 0 Best answer

<p>The donut chart is in a separate component which is called into the parent component. I am sharing the  template code for both the parent and the child component.</p>

<p>Parent HTML </p>

<p>DONUT CHART (child) HTML</p>

Please insert min. 20 characters.

The donut chart is in a separate component which is called into the parent component. I am sharing the template code for both the parent and the child component.

Parent HTML

<div class="container-fluid">
  <div class="row">
    <div class="right-col col-md-3 pr-0 pl-1" style="text-align: center;">
      <mdb-card style="height:100%">
        <app-donut-chart
        [chartData]="testStatus"
        [backgroundColor]="statusColors"
        [hoverBackgroundColor]="statusHoverColors"
        [chartTitle]="statusTitle"
        ></app-donut-chart>
      </mdb-card>
    </div>
</div>
</div>

DONUT CHART (child) HTML

<div style="display: block">
  <canvas
    mdbChart
    [chartType]="chartType"
    [datasets]="chartData"
    [labels]="chartLabels"
    [colors]="chartColors"
    [options]="chartOptions"
    [legend]="true"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)"
    size="50"
  >
  </canvas>
</div>

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=58931" target="_blank" rel="nofollow">@anuragd7</a></p>

<p>Could you show me your <code>card container</code>?</p>

<p>To center chart, you could try to add <code>text-align: center</code> style to your container.</p>

<p>The text should remain in its position, here is my example:</p>

<p>You are right about <code>size</code> attribute, it doesn't seem to work as it should, we will fix that as soon as it is possible. </p>

<p>In my example I change the size in this line:</p>

<p>Giving different width, chart is resizing.</p>

<p>Hope it helps!</p>

<p>Best Regards, Bartosz.</p>

Please insert min. 20 characters.

Dear @anuragd7

Could you show me your card container?

To center chart, you could try to add text-align: center style to your container.

The text should remain in its position, here is my example:

<div class="container">
  <div
    class="row"
    style="height: 350px; border: 1px solid brown; justify-content: center; text-align: center"
  >
    <div style="display: block; border: 1px solid black;height: auto; width: 150px ">
      <canvas
        mdbChart
        [chartType]="chartType"
        [datasets]="chartDatasets"
        [labels]="chartLabels"
        [colors]="chartColors"
        [options]="chartOptions"
        [legend]="true"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"
      >
      </canvas>
    </div>
  </div>
</div>

You are right about size attribute, it doesn't seem to work as it should, we will fix that as soon as it is possible.

In my example I change the size in this line:

<div style="display: block; border: 1px solid black;height: auto; width: 200px ">

Giving different width, chart is resizing.

Hope it helps!

Best Regards, Bartosz.

anuragd7 free commented 5 years ago

Thanks for your response. Unfortunately I am not able to achieve the desired result . On the first issue - I want to center the chart inside the card container vertically , by moving the chart a little lower. Adding text-align: center does not achieve this. On the second issue of trying to resize the chart - I am not able to achieve this by specifying a width in the parent container as the width is not getting applied in my case. As requested by you I am sharing the card container code in a new response below (as I cannot format it in the comment).

Please insert min. 15 characters.

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.1.1
Device: mac
Browser: chrome
OS: OSX
Provided sample code: No
Provided link: Yes

anuragd7

120Support score
18Questions 3Answers 0Snippets