The purpose of the gauge is to show sensor levels, and it has been segmented into three parts to represent the three different overall levels of a sensor. When the gauge is viewed on a small screen like a phone, it looks good. However, when it is viewed on a browser or tablet, the segment marks do not get larger and the gauge appears slightly distorted. Please see the images and my code below.
How can I correct this?
Looks good
- b.png (7.93 KiB) Viewed 498 times
- a.png (27.31 KiB) Viewed 498 times
Code: Select all
air_main_gauge() {
const getData = () => {
//var x=Math.floor(Math.random() * 100) + 1;
var x = this.gauge1_value1;
return x;
}
let data = getData();
let height = document.body.offsetHeight - 600;
this.chart = this.maingauge_chart.stockChart('MainGuageA', {
chart: {
type: 'solidgauge',
backgroundColor: 'transparent',
height: height < 160 ? 160 : height,
events: {
load: function () {
const chart = this;
setInterval(function () {
chart.series[0].points[0].update(getData());
}, 2000);
}
}
},
credits: {
enabled: false
},
pane: {
center: ['50%', '50%'],
size: '100%',
innerSize: '10%',
startAngle: -150,
endAngle: 150,
background: {
backgroundColor: HighCharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '90%',
outerRadius: '100%',
shape: 'arc',
borderWidth: 0
}
},
lineWidth: 1,
tooltip: {
enabled: false,
},
navigator: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
scrollbar: { enabled: false },
yAxis: {
labels: {
enabled: false,
},
stops: [
// [0.0, '#0c8eca'], // blue
// [0.33, '#0c8eca'], // blue
// [0.34, '#eeb333'], // yellow
// [0.66, '#eeb333'], // yellow
// [0.67, '#f0250a'] // red
[0.0, '#0c8eca'], // blue
[0.20, '#0c8eca'], // blue
[0.21, '#eeb333'], // yellow
[0.40, '#eeb333'], // yellow
[0.41, '#f0250a'] // red
],
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [100 / 3, 2 / 3 * 100],
minorTickWidth: 0,
zIndex: 10,
tickColor: '#deeeee',
tickWidth: 10,
tickLength: 30,
offset: 20,
},
plotOptions: {
solidgauge: {
innerRadius: '90%',
dataLabels: {
enabled: false
},
rounded: true
},
},
series: [{
//data: [this.gauge1_value1],
data: [data],
tooltip: {
enabled: false
},
},
],
});
}