Reksio

customizing position of major tick marks in angular gauge

Recommended Posts

Hello,

this angular gauge here: basics of angular gauge or jsFiddle example have 5 major tick marks. It is possible to configure the major tick marks without the value of 25 in this fiddle for example (jsFiddle example), but the other major tick marks stay at their positions? At the upperLimit or lowerLimit there are the posibility to set "upperLimitDisplay": " ", Maybe also for one of the other major tick marks is it possible to set an empty value?

Share this post


Link to post
Share on other sites

Hi,

 

You can show or hide all the tick values using "showTickValues" attribute. Please refer to the documentation for reference : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/tick-marks#showhide-the-tick-values-2
Please note : It is not possible to hide only one or two tick values.

 

You can also set the number of major tick marks on the gauge using the "majorTMNumber" attribute. Refer to the documentation link : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/tick-marks#set-the-number-of-major-and-minor-tick-marks-9

 

Sample : https://jsfiddle.net/q01hvem8/

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Hi Akash,

thank you for the reply. It's nothing to see on your jsfiddle, the close button doesn't work. But my question was, to costumize the shown text of the values of the major tick marks.

I want only to tag the (border) values of the colored areas, no other values. That is not possible in the angular gauge rendering?


image.png.dae8868959c3cdbd2faebec41b47d22c.png

I want to create such like this:

image.png.5325dcd630ccad09737832a8204ac207.png

 

Is there anyone, who can help me seriously.

Best regards

Axel

 

 

Share this post


Link to post
Share on other sites

Hi Akash,

I am not Alexej.
It is possible to create an NPS by FusionCharts or not?
NPS by FusionCharts

The location of the TickValues are a little bit not nice. And how to hide the pivot / needle?

I don't want to  hide only a single tick value absolutely, I am looking for a possibility to costumize the tick values.

 

regards
Axel

Edited by Reksio

Share this post


Link to post
Share on other sites

Hi Axel,

 

Apologies for mistyping your name.

 

Yes, you can configure the tick value position. Refer to the documentation link : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/tick-marks#configure-the-tick-value-position-3

You can also add padding to the tick marks and tick values. Documentation link : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/tick-marks#configure-tick-mark-and-tick-value-padding-8

To configure the tick marks, refer to : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/tick-marks#configure-visuals-of-tick-marks-10

You can even opt to display the nth tick values. Documentation link : https://www.fusioncharts.com/dev/chart-guide/chart-configurations/tick-marks#display-every-nth-tick-mark-value-6

 

But, it is not possible to have a discontinuous tick values as in your provided image below :

image.png.5325dcd630ccad09737832a8204ac207.png

 

Check the entire list of supported attributes for Angular Gauge : https://www.fusioncharts.com/dev/chart-attributes/?chart=angulargauge

 

To hide the pivot needle set the below attributes in chart-level dataSource :

"dialbgHoverAlpha": "0",
"pivotRadius": "0",

And in the dial object, set the below attributes :

"bgColor": "#FFFFFF",
"rearExtension": "0",
"alpha": "0"

Sample fiddle for reference : https://jsfiddle.net/ycgdmv8n/

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now