Questions on Kendo UI for Angular Forum

1 answer

16 views

Extend the target line for the 100% Stacked Column Chart

I'm creating a target line for a 100% stacked column chart. But the target line is not what I want.

Here is what want: the target is about at 80%.

Here is what I'm getting:

One point:

Two points:

Here is the code:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="column"
          [stack]="{ type: '100%' }"
          [data]="[20]"
          [color]="'#FFD100'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="column"
          [data]="[30]"
          [color]="'#FFEAB1'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="column"
          [stack]="{ type: '100%' }"
          [data]="[40]"
          [color]="'#FFF8E0'"
        >
        </kendo-chart-series-item>
        <kendo-chart-series-item
          type="line"
          [data]="[{ category: 0, value: 0.8 }, { category: 1, value: 0.8 }]"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [visible]="false"></kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [visible]="false"></kendo-chart-value-axis-item>
      </kendo-chart-value-axis>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
      <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
    </kendo-chart>
  `
})
export class AppComponent {
  
}

Charts

answered on 16 Apr 2024

0 answers

4 views

How to remove overlapping of text between the readings in Kendo UI StockChart

I am using Kendo Angular Charts 7.1.0 with Angular 14.0.4

Currently it displays the Stock Chart of Kendo like below...

How to move the below readings pane height wise to little bit below like 30px so that it won't overlap with date readings...?

This is because it is happening with negative values in the above chart.

Any help would be greatly appreciated.

Charts

asked on 15 Apr 2024

1 answer

4 views

Why is there no nevigator for line charts?

Hi there,

I am new to Kendo UI Charts. Am I getting this right? The navigator is only for stock charts?
I don't get why, this would also be very helpfull for line charts. I could only find a very old question regarding this, with not a really good answer.

Is it still the case that there is no way to display a line chart with a navigator? Or is it possible to display a line in the stockchart kind of similar to a line chart instead of candlesticks?

Best Regards,

FirestormHell

Charts

General Discussions

ToolBar

answered on 11 Apr 2024

0 answers

35 views

Kendo UI Chart showing bars erratically in Angular

0

I am using Kendo Angular Charts 7.1.0 and Angular 14.0.4

I am able to display the Navigator with line as output at the bottom of the Bar Graph as below.

The HTML I used is as below...

<kendo-stockchart (render)="onRender($event)">
    <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    <kendo-chart-area [height]="350" [margin]="{ bottom: 0, left: 7, right: 7, top: 20 }" background="#fff">
    </kendo-chart-area>
    <!-- x axis -->
    <kendo-chart-category-axis>
      <kendo-chart-category-axis-item [line]="{ visible: false }" [majorGridLines]="{ visible: false }"  name="categoryAxis">
        <kendo-chart-category-axis-item-labels [position]="axisLabelPosition" [visual]="categoryLabelsVisual">
        </kendo-chart-category-axis-item-labels>
      </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <!-- y axis -->
    <kendo-chart-value-axis>
      <kendo-chart-value-axis-item
         [min]="viewBag.minValue" [max]="viewBag.maxValue"  name="valueAxis">
      </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
    <!-- series -->
    <kendo-chart-series *ngIf="isConsumption">
      <kendo-chart-series-item type="column" [data]="viewBag.filteredConsumptionData"
                               [field]="viewBag.selectedConsumptionType === 'actual' ? 'consumption_actual' : 'consumption_estimated'"
                               categoryField="datetime" 
                               [highlight]="{ visible: viewBag.selectedConsumptionView !== 'hourly' }" [gap]="0.15" color="#3eb7cc">
        <kendo-chart-series-item-labels [visual]="seriesLabelsVisual"></kendo-chart-series-item-labels>
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-navigator *ngIf="isConsumption">
      <kendo-chart-navigator-select [from]="viewBag?.startDate" [to]="viewBag?.endDate">
      </kendo-chart-navigator-select>
      <kendo-chart-navigator-series>
        <kendo-chart-navigator-series-item type="line" [data]="viewBag.filteredConsumptionData" [field]="viewBag.selectedConsumptionType === 'actual' ? 'consumption_actual' : 'consumption_estimated'" categoryField="datetime">
        </kendo-chart-navigator-series-item>
      </kendo-chart-navigator-series>
    </kendo-chart-navigator>
</kendo-stockchart>

This chart is using the below data from this array - viewBag.filteredConsumptionData

Chart Data

If you see the chart, it is displaying bars properly upto Jun'01 and from there, it is having gap for Jul'01 and the labels are not in sync with the bars.

How can I correct it?

Charts

asked on 06 Mar 2024

1 answer

12 views

Line style option of Scatter line chart -Angular 13

Hello,

Linestyle option of scatterLine chart is not working. Whatever value I put there, it is not changing line style. It is always normal.

Even if I put just some random value, it does not throw any error and plotting chart as normal linestyle.

I am trying to make it smooth. Let me know what I am missing.

    <kendo-chart-series-defaults
        [style]="'smooth'"
        type="scatterLine"
    >
    </kendo-chart-series-defaults>

Charts

answered on 06 Mar 2024

1 answer

18 views

I have a stacked bar chart in my angular page, but can't get legend to display. Why?

I tried use the example from the demo page, and enable the legend, but nothing is happening. What did I do wrong?

<kendo-chart>
    <kendo-chart-series>
      <kendo-chart-series-item type="bar" [stack]="true" [data]="[1, 2, 3]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="bar" [data]="[1, -1, 1]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="bar" [data]="[1, -1, 1]">
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-legend [visible]="true"></kendo-chart-legend>
  </kendo-chart>

Charts

answered on 05 Mar 2024

1 answer

50 views

Stacked chart crashes when displaying large number of records

Hello,

We are currently experiencing a problem while presenting a stacked chart with approximately 8000 records. When we try to display all 8000 records at once, the chart keeps loading and the browser crashes after a few seconds, basically the screen freezes. We are currently using the chrome browser to run the web application.But when we load the chart with around 3000 records, it displays all of them without any problems.
As a result, we only face this problem when we attempt to load a huge number of records at once. So my concern is whether there is a fixed number of records that we can load for a stacked chart at once.

Charts

answered on 11 Dec 2023

0 answers

20 views

Display separate dashed line in vertical kendo chart with the given values including existing lines

Display separate horizontal dashed line in vertical kendo chart with the given values including existing lines

Charts

updated question on 08 Dec 2023

0 answers

24 views

Chart series Defaults effects trendline display

Hello, there is a conflict happen when I use seriesdefault to custom the colors of bars, the trendline dissapear, it exists but never show

Charts

asked on 29 Nov 2023

1 answer

35 views

Kendo Ui drilldown charts example is not working

https://www.telerik.com/kendo-angular-ui/components/charts/drill-down/

Error: src/app/dashboard/dashboard.component.html:20:23 - error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ "Company A": { product: string; sales: number; }[]; "Company B": { product: string; sales: number; }[]; }'.

20 [data]="productData[company]"
~~~~~~~~~~~~~~~~~~~~

Charts