# How to reduce the size of the bullets in XY chart **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [June 16, 2023, 10:33am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132 "2023-06-16T10:33:42Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Sabhareeswaran\_Ravi](https://avatars.discourse-cdn.com/v4/letter/s/f6c823/32.png) [@Sabhareeswaran\_Ravi](https://forum.inductiveautomation.com/u/Sabhareeswaran_Ravi)\ **Post date:** [June 16, 2023, 10:33am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/1 "2023-06-16T10:33:42Z")
How to reduce the size of the bullets(data points) XY chart? Is there any way to implement custom CSS, so even when we get huge data in the view it should be easy to select? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/880ac970a741b6d9f7bccbbd9c4d4fdefc5e3d10.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 16, 2023, 11:37am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/2 "2023-06-16T11:37:17Z")
I don't have good news for you. > [@Perspective XY Chart Circle Bullet Size Not Changing](https://forum.inductiveautomation.com/t/perspective-xy-chart-circle-bullet-size-not-changing/72536/3): > > This doesn't quite provide the solution that I'm looking for. My ultimate goal is to make the bullets smaller in size. The stroke property only controls the outline of the bullets not the actual size. I can set the stroke to 0, but there is no noticeable difference from 1. The following images might help illistrate my issues. I made the stroke 0.5 and the bullet width & height 0.1, but it is the same as if I made the bullet width and height 50: How can I change the size o… The XY Chart component is based on AM Charts and the document regarding bullets is [here](https://www.amcharts.com/docs/v4/concepts/bullets/). It looks to me that much of it is Javascript based so modification by CSS might not be possible without devious trickery. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 16, 2023, 11:47am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/3 "2023-06-16T11:47:24Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/d/3d9721bfd9279393a5c94ee11750203c9a8d133e.png) bigger is easy for smaller you'll have to change the radius too isntead of jsut the stroke: (default is r:5) `.psc-InjectChartSize svg > g > g:nth-child(2) > g:nth-child(1) > g:nth-child(2) > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(1) > g:nth-child(2) > g:nth-child(5) circle{ r:5}` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8e26810670b26f843acb984fae7512b52a8b646e.png) ---
**Author:** ![Jonathan\_Bennett](https://avatars.discourse-cdn.com/v4/letter/j/cab0a1/32.png) [@Jonathan\_Bennett](https://forum.inductiveautomation.com/u/Jonathan_Bennett)\ **Post date:** [June 16, 2023, 11:57am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/4 "2023-06-16T11:57:02Z")
This looks unfamiliar to me. Where are you putting that code? Based on your response, I would have added a new "radius" property in the stroke section or its parent. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [June 16, 2023, 11:59am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/5 "2023-06-16T11:59:28Z")
> [@Jonathan\_Bennett](#): > > This looks unfamiliar to me. Transistor called this: > [@Transistor](#): > > devious trickery. Victor is the king of hijacking unrelated component properties to supply CSS and JS in ways unsupported by IA and clearly unanticipated by IA. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 16, 2023, 12:03pm UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/6 "2023-06-16T12:03:24Z")
no adding a new property wont work. what this is is css (default styling of webbrowssers (which perspective uses)) (well and svg as this is a svg specific style) using either the stylesheet.css [Style Classes - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet) or injection it in a styleClass by wrapping it in `}{` (pay attention to the "psc-"InjectChartSize and the styleclass name for both methodes) injection adds it to the dropdown while the stylesheet does not, but you can still type it in the classes manualy ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b439a0d64883f48d02ce8c8e00bffa2533f62815.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/b/9b622f63917d11fff8ad006acbb5a736d59a639d.png) ---
**Author:** ![Jonathan\_Bennett](https://avatars.discourse-cdn.com/v4/letter/j/cab0a1/32.png) [@Jonathan\_Bennett](https://forum.inductiveautomation.com/u/Jonathan_Bennett)\ **Post date:** [June 16, 2023, 6:29pm UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/7 "2023-06-16T18:29:36Z")
This is really clever, but I'm still not able to follow your tricks. I've tried implementing both methods as you showed (together and seperately), but I see no difference in bullet size. Adding the script you posted (changing the r value to 1): `.psc-InjectChartSize svg > g > g:nth-child(2) > g:nth-child(1) > g:nth-child(2) > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(1) > g:nth-child(2) > g:nth-child(5) circle{ r:1}` For style class method, I've wrapped it in `}{` for the background image, but no luck. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/d/ad809112d2e07003197bf74b757c4b7b2191f888.png) Is there another step that I'm missing or did I mess up one of them? Thank you. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 19, 2023, 6:51am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/8 "2023-06-19T06:51:44Z")
Did you apply the style to the chart? (1 is not visible) ```auto }.psc-InjectChartSize svg > g > g:nth-child(2) > g:nth-child(1) > g:nth-child(2) > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(1) > g:nth-child(2) > g:nth-child(5) circle{ r:2}{ ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e81431b343e7fc9437b20858dba3cf6528ec6a4f.png) **Edit** : Seems this might be a bit different based on the number of pens/ enebaled features (legends ect) i added in so much specificy because i saw it also changed the legend which was ugly, but i guess i didnt test it enough to account for everything else (these nested 'g' really are a mess to look through tbh xd) remove the last " \> g:nth-child(x)" (not the circle), repeat untill it works `.psc-InjectChartSize svg > g > g:nth-child(2) > g:nth-child(1) > g:nth-child(2) > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(1) > g:nth-child(2) circle{ r:2}` `.psc-InjectChartSize svg > g > g:nth-child(2) > g:nth-child(1) > g:nth-child(2) > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(1) circle{ r:2}` ... `.psc-InjectChartSize svg circle{ r:2}` ---
**Author:** ![Jonathan\_Bennett](https://avatars.discourse-cdn.com/v4/letter/j/cab0a1/32.png) [@Jonathan\_Bennett](https://forum.inductiveautomation.com/u/Jonathan_Bennett)\ **Post date:** [June 19, 2023, 4:00pm UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/9 "2023-06-19T16:00:12Z")
Removing the " \> g:nth-child(x)" several times seemed to work. I have 5 pens enabled with legend. Here is what my code reduced to: `} .psc-InjectChartSize svg > g > g:nth-child(2) > g:nth-child(1) > g:nth-child(2) > g:nth-child(3) circle{ r:3} {` Thank you for your help and introduction to CSS injection. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 19, 2023, 4:13pm UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/10 "2023-06-19T16:13:31Z")
If you expect the chart's configuration to change (number of pen, time range, whatever you can think of) I suggest you test those cases thoroughly because they might change the html structure and boink up the selector. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 20, 2023, 6:26am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/11 "2023-06-20T06:26:32Z")
Yeah and well if you dont mind the legend having a small circle too you can just use `.psc-InjectChartSize svg circle{ r:2}` to target every circle on the component ---
**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\ **Post date:** [April 22, 2024, 4:08pm UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/12 "2024-04-22T16:08:08Z")
> [@victordcq](#): > > .psc-InjectChartSize svg circle{ r:2} Hi @victordcq I have tired this style class ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8aab1319f95ea88e360376465a6b0f2baea42fe2.png) Still size is not reduced. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/b/1b8be448a6bbc84062c96b4f33839c0f3776ac4a.png) Is there something i have missing? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 23, 2024, 6:31am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/13 "2024-04-23T06:31:29Z")
did you give the chart the class "InjectChartSize"? ---
**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\ **Post date:** [April 23, 2024, 8:54am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/14 "2024-04-23T08:54:03Z")
> [@victordcq](#): > > .psc-InjectChartSize svg circle{ r:2} yes missed it. working now one question if I change render type to label and give shape rectangle ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fafed1804e774e8706f35f35aa362d5fafa66bf9.png) For that is any option to reduce size? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 23, 2024, 9:18am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/15 "2024-04-23T09:18:43Z")
something like this, note you will have to adjust the position a bit too, this can be done in the designer, change the dy to some small negative value ```python .psc-InjectChartSize svg > g > g:nth-child(2) > g:nth-child(1) > g:nth-child(2) > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(1) text{ font-size:50%; } ``` ---
**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\ **Post date:** [April 23, 2024, 9:29am UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/16 "2024-04-23T09:29:23Z")
Can you take a look in to this post when you have time > [@XY Chart - adding batch labels](https://forum.inductiveautomation.com/t/xy-chart-adding-batch-labels/78428/5): > > Hi @Transistor I need to create feature similar kind what u did. I am going to develop X bar R chart in Perspective Below image which developed in vision module if mean is above UCL limit or below the LCL limit. I need to show the datapoint in red color and label with number Can you give me guidance how to achieve this in XY chart perspective we have discussed few things related bullet labels give your guidance for any better way to do it ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 23, 2024, 12:13pm UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/17 "2024-04-23T12:13:16Z")
Does not look like css will be much of help here, it cant read the content or something to allow you only to target a specifc value.... Js injction would work, but its not really better ---
**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\ **Post date:** [April 23, 2024, 3:04pm UTC](https://forum.inductiveautomation.com/t/how-to-reduce-the-size-of-the-bullets-in-xy-chart/75132/18 "2024-04-23T15:04:40Z")
Thanks for your feedback