dataLabels and tooltips
Hi
I'm a newbie to your library so maybe I'm slow. I try my way through the documentations but I find it hard to implement basic features.
The following is my code:
<ejs-accumulationchart :pointClick='totalsSelection' selectionMode='Point' :tooltip='totalsTooltip' style='height: 40vh' background='transparent' :legendSettings='totalsLegend'>
<e-accumulation-series-collection>
<e-accumulation-series explodeOffset='10' explode=true :dataLabel='totalsLabels' :dataSource='totalsSeries' type='Pyramid' gapRatio='0.2' xName='x' yName='y'/>
</e-accumulation-series-collection>
</ejs-accumulationchart>
totalsTooltip: {enable: true },
totalsLegend: { visible: true, position:'Top' ,alignment:'Near', toggleVisibility: false },
totalsLabels: { visible: true, name:'text'},
Data Labels:
I want data labels to appear on all the pyramid levels, either inside or outside depends on the available space, I want them with black text color. I didn't fine a way to set it as black text color and no matter what I set, I don't see data labels on all levels (enableSmartLabels changed nothing).
Tooltips
I want tooltips to be 'name: y' (where y is in currency format: $0,000.0000 ($ sign, thousand separator and 4 decimal digits). In other places I simply used value.toLocaleString() but for tooltips, I didn't find how to do it using both format and template.
Legend
In Chart I saw the option to toggleVisibilty: false to make the legend click selects the relevant "slice" of the pyramid. In my project, the visibility toggleness did stop but the selection never occurs (explode effect didn't show itself).
pointClick
I set the selectionMode to point and defined :pointClick='totalsSelection' with the appropriate method but nothing happens when I click except for the explode effect.
totalsSelection(args) {
this.popupText = args.point.x;
this.alert = true;
},
What am I missing here?
Thanks
SIGN IN To post a reply.
9 Replies
Hi Amos,
Please find the below response for chart related query.
Query #1: Data Labels?
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by using position and font property in the dataLabel of the chart. We have also prepared a sample for your reference. Please find the below code snippet and screenshot.
Code Snippet:
|
<ejs-accumulationchart :enableSmartLabels="true" > // add your additional code here
dataLabel: {
visible: true, position: "Inside", name: "text", font: { color: 'black'} }, // add your additional code here |
Screenshot:
Query #2: Tooltip
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by using useGroupingSeperator property and tooltipRender event of the chart. We have also prepared a sample for your reference. Please find the below code snippet and screenshot.
Code Snippet:
|
// add your additional code here
tooltipRender: function(args) {
var y = args.text.split(':'); args.text = y[0] + ':' + ' <b>$<b>' + y[1]; }, // add your additional code here |
Screenshot:
Query #3 & #4: Legend & pointClick
We have analyzed your query. From that, we would like to let you know that pointClick and toggleVisibility of legend are working fine. Unfortunately, we are not able to reproduce the reported scenario. We have also attached the sample, code snippet and screenshot for your reference
Code Snippet:
|
<ejs-accumulationchart :pointClick="pointClick" :selectionMode="selectionMode" :legendSettings="legendSettings" > // add your additional code here
pointClick: function(args) {
debugger; }, selectionMode: 'Point', legendSettings: {
visible: true, toggleVisibility: false }, // add your additional code here |
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
1. Datalabels: Almost it, this is how I see it, the numbers are cut off on the side. Is there anyway to organize it better? When I set position = "Inside" as you suggested, I only see 2 values, one inside and one outside with a line. The others do not appear.
2. tooltips: perfecto!
3. When setting
totalsLegend: { visible: true, position:'Top' ,alignment:'Near', toggleVisibility: false },
the visibility toggle is not working as expected but I thought this will cause the selection of the relevant slice. It's not. Maybe that's as design.
4. When I select a slice (accumulation chart), it is selected but the whole chart becomes greyish including the selected slice. Can I avoid this?
Hi Amos,
Please find the below response for chart related query.
Query #1: Data Labels?
We have analyzed your query. From that, we would like to let you know that if the data label gets out of chart Area by default the value gets trimmed. Hence we suggest to use connectorStyle property to change the height of the connector line. We have also prepared a sample for your reference. Please find the below code snippet and screenshot.
Code Snippet:
|
<ejs-accumulationchart :enableSmartLabels="true" > // add your additional code here
dataLabel: {
visible: true, position: "Inside", name: "text", connectorStyle: { length: "-2%" }, }, // add your additional code here |
Screenshot:
Query #3: Legend
We have analyzed your query. From that, As stated earlier while setting toggleVisibility of legend as false the funnel chart is working fine. On clicking on a particular legend will cause the selection of the relevant slice as shown in the screenshot. Unfortunately, we are not able to reproduce the reported scenario. We have also attached the sample, code snippet and screenshot for your reference
Code Snippet:
|
<ejs-accumulationchart :legendSettings="legendSettings" > // add your additional code here
selectionMode: 'Point', legendSettings: {
visible: true, toggleVisibility: false }, // add your additional code here |
Screenshot:
Query #4: Selection
We have analyzed your query. From that, we would like to let you know that the reported scenario is due to the hovering effect of the slice for tooltip rendering. You can disable the tooltip to overcome the reported scenario. We have also attached the sample, code snippet and screenshot for your reference
Code Snippet:
|
<ejs-accumulationchart :selectionMode="selectionMode" :tooltip="tooltip" > // add your additional code here
selectionMode: 'Point',
tooltip: { enable: false }, // add your additional code here |
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
Thank you for replying. If the following won't help we'll setup a web meeting.
This is how the pyramid looks like when I first open the window and nothing is selected. All good.
Now here is how it looks like when the user clicks on a certain slice, the "explode" effect is working (notice the upper slice) and pointClick event is triggered:
Question 1: Why everything looks disabled? At least make the selected slice darkre like in the first screenshot.
Now here is how it looks like when the user clicks on the legend. No "explode" effect, pointClick event is not triggered and the pyramid looks "disabled" like in the second screenshot:
Here is the code for the chart
<ejs-accumulationchart selectionMode='Point' :selectedDataIndexes='totalsSelectedOnLoad' :tooltipRender="tooltipRender" :useGroupingSeparator="true" :pointClick='totalsSelection' :tooltip='tooltip' style='height: 40vh' background='transparent' :title='totalsTitle' :legendSettings='totalsLegend'>
<e-accumulation-series-collection>
<e-accumulation-series explodeOffset='10' explode=true :dataSource='totalsSeries' type='Pyramid' gapRatio='0.2' xName='x' yName='y'/>
e-accumulation-series-collection>
ejs-accumulationchart>
Let me know if there's a need for more information
In another question I saw that you are checking with version 17 of your components while I use version 18. I wonder if the same applies to this question.
SIGN IN To post a reply.
