We are using a gauge component in perspective to display a tag value and we have the ranges bound to the value's high and low limits. Ideally we would like the high and low limits displayed alongside the tick marks on the gauge component. I appreciate that we could add our own labels external to the gauge component, however they would look strange next to the labels that are already there on the component. It there a way to hide these labels or choose which ones are displayed? They seem to adjust dynamically depending on the size of the gauge component.
Try adding a custom style to the outer-most thing to set overflow to "visible"
These are the steps to do this:
- click on the icon next to the "style" property
- Expand the "Misc" category from the popup.
- Click "visible" under the Overflow property
If you did it right you should see a property appear that says "overflow: visible"
Play around with that and see if the words continue to display outside the bounds of the container.
I feel Steve that you might have misinterpreted the question. Amy is asking about hiding the gauges tick labels (Well, ideally, to move the labels to the high/low values, but I'm 99% sure this isn't possible).
However, you might be able to convert the component into a drawing with the new context menu? Although I'm not sure this will get you what you're after either, or will take more time than it's worth 
2 Likes
There's a way to remove the labels, but it will remove the labels for every gauge in your project unless you set up the View to allow for a more-specific selector.
Placing this into the stylesheet.css (version 8.1.22 or newer) resource will remove the labels from the Gauge component:
div[data-component="ia.chart.gauge"] text {
display: none;
}
Alternatively, you could place that same rule into the theme files to use that rule across all projects on your Gateway.
If you need to use this rule for just one View, you would need to provide an id attribute to a container somewhere along the component tree for reference. For example, adding a meta.domId prop to some parent container of your Gauge component and giving that prop a value of hide_gauge_labels_ancestor would allow you to provide a more specific selector (#hide_gauge_labels_ancestor div[data-component="ia.chart.gauge"] text) which would apply the rule to only Gauges which are descendants of that container.
1 Like
Hello,
Above mentioned stylesheet.css is hiding all the tickMarks, I want to Show current running value tickmark , Min and Max tickmark
Please let me know how can we update the stylesheet.css?
I want the Tick mark for Running Value in below case only Value 70 Should show on needle instead of all 0 -120 range tick marks.
If Current value is 4, Min is 0 and Max is 11 then below gauge should show.
