Chart Size?

2 posts, 0 answers
  1. Richard
    Richard avatar
    3 posts
    Member since:
    Mar 2020

    Posted 11 Mar Link to this post

    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

  2. Svetlin
    Admin
    Svetlin avatar
    382 posts

    Posted 12 Mar Link to this post

    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

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top