# Pie chart slice style and events **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [February 17, 2023, 2:36pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000 "2023-02-17T14:36:54Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 17, 2023, 2:36pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/1 "2023-02-17T14:36:55Z")
When I hover a slice of my pie chart I want the curser to change to a pointer using a style. Is there a spot I can modify the style of that section? I want to make an event with a nav link to another page. Is there a way to place an event on each slice? ---
**Author:** ![Joshua\_Benjamin](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@Joshua\_Benjamin](https://forum.inductiveautomation.com/u/Joshua_Benjamin)\ **Post date:** [March 3, 2023, 9:44pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/2 "2023-03-03T21:44:00Z")
Hey Zach, Unfortunately, the style on hover would only work for the entire component rather than individual slices. Here is a link to the User Manual Page for cursor style changes while hovering in Perspective, should you want to explore that. ([How to Change Style on Hover - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/How+to+Change+Style+on+Hover)) Yes, this can be achieved by using the `selection.data` property to determine which page to navigate to. Then using one of our `system.perspective` functions such as [navigate()](https://docs.inductiveautomation.com/display/DOC81/system.perspective.navigate) or [openPopup()](https://docs.inductiveautomation.com/display/DOC81/system.perspective.openPopup) to navigate to the desired page. ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [March 8, 2023, 3:03pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/3 "2023-03-08T15:03:40Z")
Can I involve the selection data into determining the hover style at all? ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [March 8, 2023, 7:27pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/4 "2023-03-08T19:27:50Z")
@Joshua_Benjamin When I hover a slice, the slice gets large and shows the tooltip. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/677b3c0eb35e5c4ed99d763669c248e95e63acd6.png) Can you tell me more about that so I might be able to activate it in a script? If I put the pie chart into a coordinate container, then I can stack a flex container on top that will let me use event triggers like onPointerOver and onPointerOut. Then is there a way to simultaneously do these things? - activate the slice highlight from an onPointerOver script on the flex container above - get the selection.data from an onMouseUp script on the flex container above - change my hover style from the onPointerOver I think I can do these things except I don't know how to activate the slice highlight from a script. I also don't know if I should use onEnter and onLeave, not sure of the performance of multiple mouse events as onPointerOut or onPointerOver. ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [March 22, 2023, 3:29pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/5 "2023-03-22T15:29:53Z")
I have those questions. I also need to know how to size the legend. My pie chart is cutting off the names when I try to align to the left. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f61c54ae4206603d898bda85d1087f894c7eb173.png) My page is looking ridiculous. I change the day, the row numbers go down or up, and the pie changes size. ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [March 23, 2023, 7:42pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/6 "2023-03-23T19:42:22Z")
I can work around it with setting the pie chart legend to bottom position, using a left join in the query to make sure my number of rows is constant, and setting the size of the container. It doesn't solve the above questions though. * * * My newest concern is that I have set a binding for showing values or percentages and I am using a parameter to switch between events and time in the data query. Well when I show the time, it shows in seconds. **Is there a good way to convert the format of the legend values to hh:mm:ss while still having the pie look normal?** I don't know how to keep it as a number for the pie and then format the legend also. `{category} : {value.percent.formatNumber('#.0')}%` I think I can bind toolTipFormat to convert the tool tip, but I don't see anything for the legend values. Is there a way to do to math in the tooltip? I thought I might be able to combine: [Expression tag to convert minutes to hh:mm:ss - #2 by KathyApplebaum](https://forum.inductiveautomation.com/t/expression-tag-to-convert-minutes-to-hh-mm-ss/9154/2)] and [Tooltips – amCharts 4 Documentation](https://www.amcharts.com/docs/v4/concepts/tooltips/)] Some kind of amcharts math if it is possible. * * * Well I kind of did an expression binding, but it isn't right as # and % are not allowed. ```auto if( {...../flexFilter/flexDate_1/Dropdown.props.value}=1 ,'{category} : {value.percent.formatNumber(\'00.0\')} percent\nEvents:{value}', '{category} : {value.percent.formatNumber(\'00.0\')} percent\nSeconds:{value}\nDowntime:{value.formatDuration(\'hh:mm:ss\')}') ``` Still shows 100% correctly even when `.formatNumber(\'00.0\')` ```auto SELECT keyName, val FROM (select 35 as performance, 65 as ad) t UNPIVOT( val for keyName in (performance, ad)) u ``` Also, copied this from @JordanCClark and wanted to post here so I could find it again easier to test my pie chart. * * * ```auto Select coalesce(S.AutoLogged,0) as AutoLogged , coalesce(S.Entered,0) as Entered , convert(varchar,dateadd(hh,-7, GETDATE()), 20) as Since from( SELECT 0 AS test ) AS dummy LEFT JOIN ( select.... from... left join anotherTable on.... where... group.... ) as S ON 1= 1 ``` I needed this trick/technique too. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [March 24, 2023, 6:15pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/7 "2023-03-24T18:15:55Z")
> [@zacharyw.larson](#): > > When I hover a slice of my pie chart I want the curser to change to a pointer using a style. You can't do this using a Style because the style is attached to the component. Yuo can use theming or the stylesheet.css resource to specify a rule for hovering over slices of the Pie Chart: ```auto div[data-component="ia.chart.pie"] g[role="menuitem"]:hover { cursor: help; } ``` ---
**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\ **Post date:** [July 6, 2023, 3:05am UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/8 "2023-07-06T03:05:23Z")
Just to follow up whether you get it working? I have the same requirements: 1. change tooltip string to something else instead of label+ percentage. 2. change label string to something else. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/b/ebe9f21cb7abc93f311155900103c111ca83a039.png) I have close to 0 experience of CSS in Perspective, but if there's a solution using CSS, I will start learning it. ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [July 6, 2023, 12:56pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/9 "2023-07-06T12:56:07Z")
I use a binding on my tooltip Format. Took me a minute to figure it out. ```auto if( {.../flexDate/downtimeDropdown.props.value}=1, '{category} : {value.percent.formatNumber(\'00.0\')} percent\nEvents:{value}', '{category} : {value.percent.formatNumber(\'00.0\')} percent\nSeconds:{value}\nDowntime:{value.formatDuration(\'hh:mm:ss\')}') ``` I think I am not able to do some things with it yet. So I put tables next to the pie chart column. ---
**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\ **Post date:** [July 7, 2023, 2:36am UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/10 "2023-07-07T02:36:36Z")
The tooltip format works. I made changes to the labels/tooltipFormat to "[bold]{category}[/] : [font-size: 15px red]{value.value}[/]" It works on the tooltips now: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/ae60bc0b597b363e01152eb10f150d6fce28c286.png) Now I need to display the label (item2 below) with actual value as well. But the label does not have format function, is it something that can be done with style or css? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/b/ebe9f21cb7abc93f311155900103c111ca83a039.png) ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [July 20, 2023, 6:48pm UTC](https://forum.inductiveautomation.com/t/pie-chart-slice-style-and-events/70000/11 "2023-07-20T18:48:27Z")
I haven't been on here for a few days. I did something where the details are all listed below in a column. Seems like mine must be customized in the properties of the chart. Because my font is white and larger than the example you listed.