The example code is below. To clarify, when you say radius is not a gauge chart option, are you referring to an object within mango?

No, I am referring to the amCharts options for gauge charts as per the linked document. The options="" attribute is passed through to amCharts.

@wingnut2-0 said in Gauge styles:

From the above I have attempted the following without any luck.

You have only passed through a small subset of the options you specified in your configuration to the component. Also the animate-band-mode="true" attribute is not a valid attribute for <ma-gauge-chart>. This was something that Will put into a modified version of the component and it will not do anything for the current version of the component.

The example code is below. To clarify, when you say radius is not a gauge chart option, are you referring to an object within mango?

{
	"type": "gauge",
	"marginBottom": 20,
	"marginTop": 40,
	"startDuration": 0,
	"fontSize": 13,
	"theme": "dark",
	"arrows": [
		{
			"id": "GaugeArrow-1",
			"innerRadius": "35%",
			"nailRadius": 0,
			"radius": "170%",
			"value": 100
		}
	],
	"axes": [
		{
			"axisThickness": 0,
			"bottomText": "0 km/h",
			"bottomTextYOffset": -20,
			"centerY": "-6%",
			"endAngle": 90,
			"endValue": 100,
			"fontSize": -7,
			"id": "GaugeAxis-1",
			"labelOffset": 8,
			"minorTickLength": 6,
			"startAngle": -90,
			"tickAlpha": 0.42,
			"valueInterval": 20,
			"bands": [
				{
					"alpha": 0.7,
					"color": "#00CC00",
					"endValue": 100,
					"gradientRatio": [
						0.5,
						0,
						-0.5
					],
					"id": "GaugeBand-1",
					"innerRadius": "105%",
					"radius": "174%",
					"startValue": 0
				}
			]
		}
	],
	"allLabels": [],
	"balloon": {},
	"titles": []
}

From the above I have attempted the following without any luck.

<ma-gauge-chart point="myPoint" start="0" end="100" band-1-end="100" band-1-color="#00CC00" gradientRatio="[0.5,0,-0.5]" band-1-innerRadius= "105%" band-1-radius= "174%" arrow-alpha="0" arrow-innerRadius= "35%" arrow-radius= "170%" value-offset="-80" value-font-size="30" axis-thickness="1" options="{axes: [{startAngle: -90, endAngle:90}]}" style="width:100%; height:250px" animate-band-mode="true"></ma-gauge-chart>

radius is not a gauge chart option and will not do anything. The reference for the options is here - https://docs.amcharts.com/3/javascriptcharts/AmAngularGauge

Reference the codepen example to see what options you should set - https://codepen.io/anon/pen/rGVKNM

options="{axes: [{startAngle: -90, endAngle:90}], radius: '50%'}"

but I cant seem to get the format of the parameters correct. Would you be able to provide an example please?

Thank you

You should then be able to display the gauge chart with an animated band and no arrow with this code:

<ma-get-point-value point-xid="Demmy-outsidetemp" point="myPoint"></ma-get-point-value>

<h3>Modified to animate band end</h3>

<ma-gauge-chart point="myPoint" start="0" end="100" band-1-end="50" band-1-color="blue" band-2-end="100" band-2-color="red" arrow-alpha="0" value-offset="-100" value-font-size="40" options="{axes: [{startAngle: -90, endAngle:90}], radius: '50%'}" style="width:100%; height:250px" animate-band-mode="true"></ma-gauge-chart>

You can also remove the band-2.. attributes if you just want to display one band.

Seeing as it is a nice alternate look to the gauge chart I may include it in the next UI release and then you would not need the override file.

Based on these examples:
https://docs.amcharts.com/3/javascriptcharts/AmAngularGauge#arrows
https://codepen.io/anon/pen/rGVKNM

• it does look to be doable with amCharts

I will try to share a modified version of out component that can do so.

I found this code and it is exactly what I need but I am not able to implement it in dashboard designer, can you help me with that? It is there a way to use this?

<ng-gauge size="150" type="full" thick="5" 
          min="0" max="120" value="68.2" 
          cap="round" label="Speed" append="mph"
          foreground-color="#ffcc66" background-color="#EEE">
</ng-gauge>

The thing that i like at the first gauge is that the red part is proportional with the value, i can put colors to the second gauge but they are fixed.

Unfortunately our built in gauges do not support this. You will need to build your own gauge.

@georgestefan said in Gauge styles:

And, yes, I would like to make a 180 degree half gauge...

You can set the start and end angles of the gauge like so -

<ma-gauge-chart point="point" options="{axes: [{startAngle: -90, endAngle:90}]}"></ma-gauge-chart>

And, yes, I would like to make a 180 degree half gauge...

[edit] You can certainly create your own component similar to the first gauge if you are familiar with Angular/HTML and CSS. We can also help you with this but its outside the scope of the forum.