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?
I don't have good news for you.
The XY Chart component is based on AM Charts and the document regarding bullets is here. It looks to me that much of it is Javascript based so modification by CSS might not be possible without devious trickery.
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}
3 Likes
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.
Transistor called this:
Victor is the king of hijacking unrelated component properties to supply CSS and JS in ways unsupported by IA and clearly unanticipated by IA.
5 Likes
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
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
5 Likes
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.
Is there another step that I'm missing or did I mess up one of them?
Thank you.
Did you apply the style to the chart? (1 is not visible)
}.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}{
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}
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.
1 Like
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.
1 Like
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
Hi @victordcq
I have tired this style class
Still size is not reduced.
Is there something i have missing?
did you give the chart the class "InjectChartSize"?
1 Like
yes missed it. working now
one question if I change render type to label and give shape rectangle
For that is any option to reduce size?
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
.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%;
}
1 Like
Can you take a look in to this post when you have time
we have discussed few things related bullet labels
give your guidance for any better way to do it
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
1 Like
Thanks for your feedback