hi,

How do I display the auto generated percent value as label in the bars?

I have a bar chart with [stack]="{ type: '100%' }". I would like to display the percentage as label in the bar (like in attached pic).

I tried label component but getting the value displayed rather calculated percentage. 

Here's the code:

https://stackblitz.com/edit/angular-ivy-n9xwdr?file=src%2Fapp%2Fapp.component.html

I have a categorical line chart with multiple series, and I want the crosshair to only display a vertical line and work like a shared tooltip, with markers for all the lines showing up on the crosshair.

I found a picture online that matches what I want exactly (except for having no tooltip/text), and it belongs to Kendo UI for Angular, but the search result just takes me to the main page, so I have no idea how to accomplish this... I've attached the image I found.

Hi,

I have been trying to install gantt chart, version 0.2.0. There are several errors when I import it in app.module.ts. I am attaching screenshot of package.json and the error.

Hello,

There is a console.log in kendo-angular-charts.js file line 814. It's triggered when shared popup open on chart. 

version: @progress/kendo-angular-charts": "7.1.0"

See below:

position(offset) {
        if (!this.popupSettings || !this.popupSettings.appendTo) {
            return offset;
        }
        const appendTo = this.popupSettings.appendTo.element.nativeElement;
        console.log('appendTo', appendTo); // HERE

        const bbox = appendTo.getBoundingClientRect();
        const { scrollLeft, scrollTop } = this.scrollOffset(appendTo);
        return {
            left: offset.left - bbox.left - scrollLeft,
            top: offset.top - bbox.top - scrollTop
        };
    }
        

Hi,

I used a pie chart and when click different series would call seriesClick event. How to get color of the series I click? The pie color is default and I did not set color for the chart. Thank you.

I have a bar chart in which I am showing tooltip when user hovers on series(bars). Now I want to show an icon (X) to let user close the tooltip instead of auto close. I tried closable="true" but it is not working on kendo-chart-series-item-tooltip. (The popup which gets opened on series hover has customized logic inside which shows 3-4 lines inside a div )

So I want an icon inside the tooltip so that when user clicks on that X icon then only the tooltip should close. 

Please refer the attached image for better understanding of my requirement.

Hi all!

May you help me with that? Big thanks!

What i want: https://prnt.sc/kU8pjFzvfyxF

What i have: https://prnt.sc/5hK7TeXQR12r

I'm a beginner and i tried to create a pie chart using json data. but this code does not shows any error and it does not show the chart also.

component.ts file is here

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
  export class pieData {
  constructor(
    public kind: string,
    public share: number,
  ) {}
}

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent implements OnInit {

  pieData: pieData[];
  constructor(private httpClient: HttpClient) {}
      ngOnInit() {
    this.getpieData();
  }
      getpieData() {
        this.httpClient.get<any>('../db.json').subscribe(
      Response => {
        console.log(Response);
        this.pieData = Response;
      }
    );

    console.log(this.pieData);
  }
}

component.html file is here

<kendo-chart [transitions]="false" [style.height]="'100%'" [style.width]="'100%'">
  <kendo-chart-tooltip format='{0}%'></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item type="pie"
                             [data]="pieData?.pieData"
                             categoryField="kind"
                             field="share"
                             *ngIf="pieData">
      <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-legend [visible]="false"></kendo-chart-legend>
</kendo-chart>

db.json file is here

 "pieData": [
    {
      "id": 1,
      "kind": "Solar",
      "share": 5
    },
    {
      "id": 2,
      "kind": "Wind",
      "share": 2
    },
   ]