Questions on Kendo UI for Angular Forum

0 answers

87 views

100% Stacked Bar Chart resize when the first element is 80% or higher

Hi there,

I was using this component on my app and I noticed that when the first element of the chart-series is 80% or higher, the background area is resized and the bar gets out of the ploting area. However, I tryed to put 80% in another item and it works fine. Is there any option to deny that resize on the first item?

I modify the https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar/#toc-100-stacked-bar code to show the problem. Here is the template:

      <kendo-chart>
        <kendo-chart-series>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[16]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }"[data]="[1]">
          </kendo-chart-series-item>
          <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>

      <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[16]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }"[data]="[1]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

Thanks ,

Jose

Charts

Styling

asked on 16 Jun 2022

0 answers

80 views

How to apply tooltip to legend?

I want to apply tooltip to legend

If possible tooltip content I can write

please....... help me

Charts

Tooltip

asked on 15 Apr 2022

0 answers

56 views

Change css Angular Kendo Chart - Set style wich the line is of value 0

Change css style inside the line chart

I would like to change the css style of the line in which the value is zero.
I would like a thick black line.
How can I do?

from:

to:

Charts

asked on 25 Mar 2022

0 answers

62 views

Why kendo chart is rendering two times?

Hi

I have kendo chart with dynamic data and data load based on date selection when i set daily data i'm showing daily data when i set range weekly showing weekly ... like this. I'm using baseUnit function for this of course... but looks like chart is rendering 2 times.

Here is my example

<kendo-chart
  [categoryAxis]="{ categories: categories, baseUnit:baseUnit, labels: { rotation: 'auto', format: format } }"
>
  <kendo-chart-legend
    position="bottom"
    orientation="horizontal"
  ></kendo-chart-legend>
  <kendo-chart-tooltip format="{0:c}"></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item
      *ngFor="let item of series"
      [type]="type"
      [line]="{ style: style }"
      [data]="item.data"
      [name]="item.name"
    >
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

here is ts code

 public startDate: Date
  public endDate: Date
  public dateDifference = 0;
  private eodRequestBody: EndOfDayChartRequest;
  public type = "area" as SeriesType;
  public style = "smooth";
  public areaSeries = []
  public areaSeriesData: any[]
  public categories = "dateRange";
  public groupField = "fuel";
  public areaSeriesField = "totalAmount";
  public noData = false;
  public _subscription : Subscription
  public format= ""
  public baseUnit = ""


  constructor(private eodSharedService: EodSharedService,private eodService:EODService,private cdr:ChangeDetectorRef) { }
  ngOnDestroy(): void {
    this._subscription.unsubscribe();
  }

ngOnInit(): void {
  this.loadData();
}

dateDiff(startDate: Date, endDate: Date): number { //date diffirence calc
  var Time = endDate.getTime() - startDate.getTime();
  var Diff = Time / (1000 * 3600 * 24);
  return Diff;
}

loadData() {
  this._subscription = this.eodSharedService.GetUpdatedDates().subscribe(data => { //subscribing start/end date values from shared service
    this.startDate = data.startDate;
    this.endDate = data.endDate;


    this.dateDifference = this.dateDiff(this.startDate, this.endDate);
    let range = "";
    //console.log("dateDiff : "+ this.dateDifference)
    if (this.dateDifference == 0 || this.dateDifference <= 1) {range = "hourly"; this.format = "HH:mm"; this.baseUnit = "hours"}
    else if (this.dateDifference <= 14) {range = "daily";  this.format = "dd/MM"; this.baseUnit = "days"}
    else if (this.dateDifference <= 30) {range = "weekly"; this.format = "dd/MM"; this.baseUnit = "weeks"} 
    else if (this.dateDifference > 30 && this.dateDifference < 365) {range = "monthly";  this.format = "dd-MM-yyyy"; this.baseUnit = "months"}
    else if (this.dateDifference >= 365) {range = "yearly";  this.format = "yyyy"; this.baseUnit = "years"}

    this.eodRequestBody = {
      startDate: getISOStringFromDate(this.startDate),
      endDate: getISOStringFromDate(this.endDate),
      client: null,
      type:range
    };

    this.getFuelAmountsChart(this.eodRequestBody)

  });
}
  getFuelAmountsChart(eodRequestBody: EndOfDayChartRequest) {
    console.log(eodRequestBody);
    this.eodService.getEndOfDayDistrubutionOfFuel(eodRequestBody).pipe(take(1)).subscribe(
      (res) => {
        this.areaSeriesData = [];
        res.result.items.forEach(item=>{
          if(eodRequestBody.type != "weekly"){ 
            if(item.totalAmount > 0){
              item.dateRange = new Date(item.dateRange);
              this.areaSeriesData.push(item);
            }
          }
          else{
            item.dateRange = item.dateRange;
            this.areaSeriesData.push(item);
          }
        })
        console.log(JSON.stringify(this.areaSeries));
        this.areaSeries = groupBy(this.areaSeriesData, [{ field: this.groupField }]) as GroupResult[];
        this.noData = false;
        var count = res.result.items.length;
        if(count == 0){this.noData = true;}
        this.cdr.markForCheck()

      },
      (err) => {
        console.log('ERROR ON FETCHING EOD getEndOfDayDistrubutionOfFuel', JSON.stringify(err));
      }
    )
    
  }

Can you help me on this??

Thanks

Charts

asked on 17 Mar 2022

0 answers

64 views

Connect categoryField in series to categories in category-axis

Hi all!

I would like to connect values from series-item to categories in category-axis-item.

But it doesn't work together.

What I want: https://prnt.sc/HjCWlDLbjJy8

What i have: https://prnt.sc/eyDunF-lvGew

But data on each screenshots is same.

I need to use const categories - all months of the year. But i have big array of values per day.

May you help me with that? How can i reach that?

Big thanks!

Charts

asked on 07 Mar 2022

0 answers

155 views

Drill down option for Kendo Single bar chart in angular

I want to create drill down option for Kendo single bar chart in angular with a single data source. The parent class contain all data. for the parent chart as well as descendant (child, grand child charts). How I can do it?

component.html file

<kendo-chart [transitions]="false">
  <kendo-chart-title [text]="singleBaChartData.singleBaChartData?.Title"></kendo-chart-title>
  <kendo-chart-series>
    <kendo-chart-series-item type="column"
                             [data]="singleBaChartData.singleBaChartData?.singleBaChartData"
                             categoryField="label"
                             field="value"
                             *ngIf="singleBaChartData"
                             (initialized)="initialized($event)">
      <kendo-chart-series-item-labels [align]="labelAlign" color="#000" [content]="labelContent">
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>
Component.ts file
import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
@Component({
  selector: 'app-single-bar-chart',
  templateUrl: './single-bar-chart.component.html',
  styleUrls: ['./single-bar-chart.component.css']
})
export class SingleBarChartComponent implements OnInit {
  @Input() singleBaChartData: any = [];
  ngOnInit() { }
}
I am getting data using service file. This is the data set.
"singleBaChartData": {
 "name": "singleBaChartData-TOTAL REVENUE",
 "Title": "TOTAL REVENUE",
 "singleBaChartData": [
  {"label": "Apple","value": "810000","link": "newchart-xml-apple"},        
  "linkeddata":[{
            "id": "apple",
            "linkedchart": {
                "chart": {
                    "caption": "Apple Juice - Quarterly Sales",
                    "subcaption": "Last year",
                    "numberprefix": "$",
                    "theme": "fusion",
                    "rotateValues": "0",
                    "plottooltext": "$label, $dataValue,  $percentValue"
                },
                "data": [{"label": "Q1","value": "157000"},
                    {"label": "Q2","value": "172000"},
                    {"label": "Q3","value": "206000"},
                    {"label": "Q4","value": "275000"}]
            }
        },
     ]
 },

.

Charts