Chart Size?

[Richard]

I'm a little new to angular so this may be a bit of a newbie question.  I created my component and added the pie chart.  Looks great only problem is the chart is extremely small.  How do I increase the size of the chart?  I watch the video of Melissa (I believe was here name) and she said something about using CSS.  I'm ok with CSS but don't know where I would put it since it's using bootstrap, component.css and app.css.  Also, not sure if I define a custom attribute or what?  I greatly appreciate any help in this matter. 

See attached for reference...

-rj

[Svet]

Hi Richard,

Thank you for provided screenshot.

The required style can be placed in the Angular component or within the project root styles.css file. Please check the following example demonstrating three options of adding a custom style to a Pie Chart:

https://stackblitz.com/edit/angular-lzv9jx?file=app%2Fapp.component.ts

In case the styles are provided though the component styles array or through the styleUrls array in a separate file, then it is required to use ViewEncapsulation.None in order for Angular to allow applying custom styles to the used components. In case the styles are added to the styles.css file then they will be applied globally throughout the application. Please check the following Angular article for more details on the different options:

https://angular.io/guide/component-styles#loading-component-styles

In the provided example there are three separate charts styled with different heights. The essential parts are highlighted below:

in app.component.ts:

@Component({
    selector: 'my-app',
    template: `
    <kendo-chart title="World Population by Broad Age Groups" style="height: 200px">
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="pie"
          [data]="pieData"
          field="value"
          categoryField="category"
          [labels]="{ visible: true, content: labelContent }"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

    <hr>

    <kendo-chart class="second" title="World Population by Broad Age Groups">
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="pie"
          [data]="pieData"
          field="value"
          categoryField="category"
          [labels]="{ visible: true, content: labelContent }"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

    <hr>

    <kendo-chart class="third" title="World Population by Broad Age Groups">
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="pie"
          [data]="pieData"
          field="value"
          categoryField="category"
          [labels]="{ visible: true, content: labelContent }"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `, encapsulation: ViewEncapsulation.None,
  styles: [`
  .second {
    height: 400px;
  }
  `]

in styles.css

/* Kendo UI example application styles */
.third{
  height: 600px
}

Feel free to write back in case further assistance is required for this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik