For Pie Chart I'm not getting the tooltip
I'm using Syncfusion pie-chart to my Angular Project, and for stacked column chart tooltip shows but for pie chart it's not.
This is My charts.component.html file
<ejs-accumulationchart id="container" #pie style='display:block; width: 92%' [legendSettings]="legendSettings"
[title]="title" (load)='load($event)' [tooltip]='tooltip' (pointClick)='chartClick($event)'>
<e-accumulation-series-collection>
<e-accumulation-series name='Project' [dataSource]='dataPie' xName='x' yName='y' [startAngle]="startAngle"
[endAngle]="endAngle" innerRadius="40%" radius="70%" [dataLabel]="dataLabel" explode=true explodeOffset='10%'
[explodeIndex]='3'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<div class="control-section">
<div align='center'>
<ejs-chart style='display:block;' [chartArea]='chartArea' [width]='width' align='center' id='chartcontainer'
[primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='Stacktitle' [tooltip]='tooltip'
(load)='loadStack($event)' (pointClick)='chartClickStack($event)'>
<e-series-collection>
<e-series [dataSource]='data' type='StackingColumn' xName='x' yName='y' name='UK' width='2'> </e-series>
<e-series [dataSource]='data1' type='StackingColumn' xName='x' yName='y' name='Germany' width='2'> </e-series>
<e-series [dataSource]='data2' type='StackingColumn' xName='x' yName='y' name='France' width='2'> </e-series>
<e-series [dataSource]='data3' type='StackingColumn' xName='x' yName='y' name='Italy' width='2'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</div>
This is My charts.component.ts file
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { Browser } from '@syncfusion/ej2-base';
import { ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-angular-charts';
import { AccumulationChartComponent, AccumulationChart, AccumulationDataLabel, IAccLoadedEventArgs, AccumulationTheme } from '@syncfusion/ej2-angular-charts';
@Component({
selector: 'app-charts',
templateUrl: './charts.component.html',
styleUrls: ['./charts.component.css']
})
export class ChartsComponent {
public dataPie: Object[];
public startAngle: number = 0;
public endAngle: number = 360;
public tooltip: Object;
public title: string;
public sampleText = 'DEMO';
@ViewChild('pie')
public legendSettings: Object;
public dataLabel: Object;
public data: Object[] = [
{ x: '2014', y: 111.1 },
{ x: '2015', y: 127.3 },
{ x: '2016', y: 143.4 },
{ x: '2017', y: 159.9 }
];
public data1: Object[] = [
{ x: '2014', y: 76.9 },
{ x: '2015', y: 99.5 },
{ x: '2016', y: 121.7 },
{ x: '2017', y: 142.5 }
];
public data2: Object[] = [
{ x: '2014', y: 66.1 },
{ x: '2015', y: 79.3 },
{ x: '2016', y: 91.3 },
{ x: '2017', y: 102.4 }
];
public data3: Object[] = [
{ x: '2014', y: 34.1 },
{ x: '2015', y: 38.2 },
{ x: '2016', y: 44.0 },
{ x: '2017', y: 51.6 }
];
public primaryXAxis: Object = {
majorGridLines: { width: 0 },
minorGridLines: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
interval: 1,
lineStyle: { width: 0 },
labelIntersectAction: 'Rotate45',
valueType: 'Category'
};
public primaryYAxis: Object = {
title: 'Sales',
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
majorGridLines: { width: 1 },
minorGridLines: { width: 1 },
minorTickLines: { width: 0 },
labelFormat: '{value}B',
};
public Stacktitle: string = 'Mobile Game Market by Country';
public chartArea: Object = {
border: {
width: 0
}
};
public width: string = Browser.isDevice ? '100%' : '60%';
public loadStack(args: ILoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark");
};
public load(args: IAccLoadedEventArgs): void {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark");
};
ngOnInit() {
this.dataLabel = {
visible: true,
name: 'text',
position: 'Inside',
font: {
fontWeight: '600',
color: '#ffffff'
}
};
this.tooltip = {
enable: true,
format: '${point.x} : <b>${point.y}%</b>, <b>Sample</b>' + ', <b> ' + this.sampleText + '</b>',
}
this.dataPie = [
{ x: 'Labour', y: 18, text: '18%' }, { x: 'Legal', y: 8, text: '8%' },
{ x: 'Production', y: 15, text: '15%' }, { x: 'License', y: 11, text: '11%' },
{ x: 'Facilities', y: 18, text: '18%' }, { x: 'Taxes', y: 14, text: '14%' },
{ x: 'Insurance', y: 16, text: '16%' }
];
this.title = 'Project Cost Breakdown';
this.legendSettings = {
visible: true,
position: 'Top'
};
}
chartClick(event) {
console.log('Pie-Chart Clicked');
console.log(event);
}
chartClickStack(event) {
console.log('Stack-Chart Clicked');
console.log(event);
}
}
As shown in Image for Pie-chart it not shows tooltip
And for Stacked Column chart it shows
SIGN IN To post a reply.
19 Replies
Hi Nayan,
Greetings from Syncfusion.
We have analyzed your query. From that, we would like to let you know that the accumulation chart tooltip is working fine. Unfortunately we are unable to reproduce the reported scenario in the latest version 18.4.46. We have also attached the sample and screenshot used for testing for your reference.
Screenshot:
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.
1. Try to reproduce the reported scenario in the provided sample.
2. Share the details of the angular version and chart package version used in the sample.
Regards,
Srihari M
Hello,
Thanks for your reply.
We have checked for the same.
1. As we are using the Angular 5 versions ( angular-cli.json file) & our typescript version is 2.8.12
2. chart package version,
Can you please provide a sample for the same? This is an urgent requirement for our client.
We are trying with the same sample that we have provided in this case.
Thanks in advance.
Hi Nayan,
We have analyzed your query. From that, we would like to let you know that the accumulation chart tooltip is working fine in angular 5 and typescript 2.8.12 version. Unfortunately we are unable to reproduce the reported scenario with the below package.json file. We have also attached the sample, code snippet and screenshot used for testing for your reference.
Code Snippet:
|
Package.json:
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19",
"@syncfusion/ej2-base": "18.4.44",
"@syncfusion/ej2-buttons": "18.4.46",
"@syncfusion/ej2-splitbuttons": "18.4.41",
"@syncfusion/ej2-calendars": "18.4.43",
"@syncfusion/ej2-charts": "18.4.46",
"@syncfusion/ej2-diagrams": "18.4.46",
"@syncfusion/ej2-maps": "18.4.39",
"@syncfusion/ej2-treemap": "18.4.39",
"@syncfusion/ej2-circulargauge": "18.4.39",
"@syncfusion/ej2-data": "18.4.46",
"@syncfusion/ej2-dropdowns": "18.4.46",
"@syncfusion/ej2-grids": "18.4.46",
"@syncfusion/ej2-inputs": "18.4.44",
"@syncfusion/ej2-lists": "18.4.39",
"@syncfusion/ej2-navigations": "18.4.44",
"@syncfusion/ej2-popups": "18.4.44",
"@syncfusion/ej2-lineargauge": "18.4.39",
"@syncfusion/ej2-pdf-export": "18.4.39",
"@syncfusion/ej2-compression": "18.4.39",
"@syncfusion/ej2-excel-export": "18.4.41",
"@syncfusion/ej2-file-utils": "18.4.39",
"@syncfusion/ej2-svg-base": "18.4.44",
"@syncfusion/ej2-documenteditor": "18.4.46",
"@syncfusion/ej2-richtexteditor": "18.4.46",
"@syncfusion/ej2-notifications": "18.4.39",
"@syncfusion/ej2-heatmap": "18.4.39",
"@syncfusion/ej2-pivotview": "18.4.46",
"@syncfusion/ej2-schedule": "18.4.46",
"@syncfusion/ej2-layouts": "18.4.44",
"@syncfusion/ej2-angular-base": "18.4.46",
"@syncfusion/ej2-angular-buttons": "18.4.46",
"@syncfusion/ej2-angular-splitbuttons": "18.4.41",
"@syncfusion/ej2-angular-calendars": "18.4.43",
"@syncfusion/ej2-angular-charts": "18.4.46",
"@syncfusion/ej2-angular-diagrams": "18.4.46",
"@syncfusion/ej2-angular-maps": "18.4.39",
"@syncfusion/ej2-angular-treemap": "18.4.39",
"@syncfusion/ej2-angular-circulargauge": "18.4.39",
"@syncfusion/ej2-angular-dropdowns": "18.4.46",
"@syncfusion/ej2-angular-grids": "18.4.46",
"@syncfusion/ej2-angular-inputs": "18.4.44",
"@syncfusion/ej2-angular-lists": "18.4.39",
"@syncfusion/ej2-angular-navigations": "18.4.44",
"@syncfusion/ej2-angular-popups": "18.4.44",
"@syncfusion/ej2-angular-lineargauge": "18.4.39",
"@syncfusion/ej2-angular-documenteditor": "18.4.46",
"@syncfusion/ej2-angular-richtexteditor": "18.4.46",
"@syncfusion/ej2-angular-notifications": "18.4.39",
"@syncfusion/ej2-angular-heatmap": "18.4.39",
"@syncfusion/ej2-angular-pivotview": "18.4.46",
"@syncfusion/ej2-angular-schedule": "18.4.46",
"@syncfusion/ej2-angular-layouts": "18.4.44",
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"devDependencies": {
"@angular/cli": "1.6.5",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.8.12"
} |
Screenshot:
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.
- Try to reproduce the reported scenario in the provided sample.
- Share the details if you have done any other customization in your sample.
Regards,
Srihari M
Thanks for your reply.
We have resolved this issue on our side with your provided sample.
Now, we have another issue for the same.
A)
=> The text of the chart, that we need at the bottom with the white background color.
=> Also when we try to click on any value it becomes again black background.
=> I am attaching the screenshot for the same.
=> We are using angular 5.
B)
=> In addition, as per the below image, we have found two issues.
1) As you can see in figures 1 & 3, there is a line that goes outside of the chart.
2) As you can see in figure 2, the value goes into another department.
Please provide the solution for the same.
Thanks in advance.
Hi Nayan,
Please find the response to chart-related queries.
Query #1: The text of the chart, that we need at the bottom with the white background color & Also when we try to click on any value it becomes again black background.
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using background property and border property in the legend of the chart. Please find the sample and screenshot given below.
Screenshot:
Query #2: There is a line that goes outside of the chart & the value goes into another department.
We have analyzed your query. From that, the reported scenario occurs due to the font color set as white for the data label we suggest you set the data label position as outside or remove the font color provided to overcome the reported scenario. Please find the sample and screenshot given below.
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
Thanks for the reply.
We are checking the previous case in our system meanwhile please provide a solution for the tooltip.
we have multiple donut charts, also we have multiple values in them.
A) We need to bind another value in point, as you can see below image, we want to bind for example "qty": it contains a number. (ie => qty: 10 )
B) After that we need to use "qty" in behalf of Sample, As we have diffrence values in "qty".
this.tooltip = {
enable: true,
format:
"${point.x} : ${point.y}%, Sample" +
", " +
this.sampleText +
""
};
Please provide the solutions.
Hi NAYAN,
We would like to let you know that we can customize the tooltip using tooltipRender event in the chart. Based on that we have modified the sample for your reference in which we have modified the text value in the args to achieve your requirement. Please find the sample, code snippet and screenshot below.
Code Snippet:
|
App.component.ts:
//add your additional code here
public tooltipRender(args: IAccTooltipRenderEventArgs): void {
args["text"] = args.point.x + " : " + args.point.y + "% <b>" + " qty :" + "</b>" + args.point.y;
}
//add your additional code here
|
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
Hi Nayan,
A separate field from the data source can be bound to the tooltip using the tooltipMappingName property in the series of the chart. We have modified the sample for your reference in which we have used args.point.tooltip to access the value bound in tooltipMapppingName to achieve your requirement. Please find the sample, code snippet, and screenshot below.
Code Snippet:
|
App.component.html:
//add your additional code here
<e-accumulation-series tooltipMappingName='qty' name='Project' [dataSource]='dataPie' xName='x' yName='y'
[startAngle]="startAngle" [endAngle]="endAngle" innerRadius="40%" radius="70%">
</e-accumulation-series>
//add your additional code here
App.component.ts:
//add your additional code here
public tooltipRender(args: IAccTooltipRenderEventArgs): void {
args["text"] =
args.point.x +
" : " +
args.point.y +
"% <b>" +
" qty :" +
"</b>" +
args.point.tooltip;
}
//add your additional code here
this.dataPie = [
{ x: "Labour", y: 8.333, text: "18%", qty: "12%" },
{ x: "Legal", y: 31.25, text: "8%", qty: "13%" },
{ x: "Production", y: 25, text: "15%", qty: "14%" }
];
//add your additional code here |
Screenshot:
Let us know if you have any other queries.
Regards,
Srihari M
Thanks for the reply.
Previous solution working as of now on our end.
Now we are facing an issue in the 100% Stacked Column,
As you can see below image the chart looks fatty.
If we have one, two, or more values, that chart will have the same size. It will not look fatty.
you can take a shadow background for the same & it will cover col-md-12.
Provide a solution for the same.
Hi Nayan,
The reported scenario is the default behavior of the column chart when a single point is rendered. Hence we suggest you use columnWidth property (with the value’s range between 0 to 1) in the series to achieve your requirement. Please find the sample, code snippet, and screenshot below for your reference.
Code Snippet:
|
// add your additional code here
<e-series-collection>
<e-series
[dataSource]="data"
type="StackingColumn"
columnWidth="0.3"
xName="x"
yName="y"
name="UK"
width="2"
>
</e-series>
<e-series
[dataSource]="data1"
type="StackingColumn"
columnWidth="0.3"
xName="x"
yName="y"
name="Germany"
width="2"
>
</e-series>
<e-series
[dataSource]="data2"
type="StackingColumn"
columnWidth="0.3"
xName="x"
yName="y"
name="France"
width="2"
>
</e-series>
<e-series
[dataSource]="data3"
type="StackingColumn"
columnWidth="0.3"
xName="x"
yName="y"
name="Italy"
width="2"
>
</e-series>
</e-series-collection>
// add your additional code here
|
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
Thanks for the reply.
Attachment: angulardkapel_f9e71e1a.zip
We have resolved a privoious issue on our end.
Now we are facing one issue in the pivot table.
A) Need to show "Description" Text.
B) Need to remove "Quantity" & "Unit Price" (Highlighted in yellow color) from "Pending For More Than 30 Days" & "Average Days For Approval" only, other things remain the same.
It will look like the below image.
I am attaching the code sample.
Provide a solution for the same.
Attachment: angulardkapel_f9e71e1a.zip
Hello,
We are unable to achieve the last requirement.
As you can see below image,
"FY 2016" label will display the same as "Description" ( Means D will display like C ). Also, remove the border that we have highlighted in yellow color only.
Thanks.
Hi Nayan,
Based on your requirement we have modified the sample. Please find the sample and code example for your reference,
Code Snippet:
|
headerCell(args: any): void {
(this.pivotGridObj.renderModule as any).columnCellBoundEvent(args);
if (
args.node.getAttribute("index") == 0 &&
args.node.getAttribute("aria-colindex") == 3
) {
args.node.setAttribute("rowspan", 2);
}
if (
args.node.getAttribute("index") == 1 &&
(args.node.getAttribute("aria-colindex") == 3 ||
args.node.getAttribute("aria-colindex") == 4)
) {
args.node.innerText = "";
}
} |
Output:
Please let us know if you have concerns.
Regards,
Saranya.
SIGN IN To post a reply.
