Hi. I'm fairly new to Node-red and definitely new here (I just joined...)
I apologize in advance if this is a dumb question, but I'm trying to import custom widgets code into the dashboard and I noticed that even though the dashboard columns are over 300 pixels wide, any widget that I put in is limited to 210 pixels in width, leaving a blank space to the right. Anything larger is still accessible, but via vertical and horizontal scroll bars. I'm looking for a simple way to use the whole width of the column. Can someone point me in the right direction? thanks.
This is the widget code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script>
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBorderWidth: 2,
plotBackgroundColor:
{
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops:[[0, '#FFF4C6'],[0.3, '#FFFFFF'],[1, '#FFF4C6']]
},
plotBackgroundImage: null,
height: 180
},
title: {
text: 'VU meter',
margin: 0
},
pane:
[{
startAngle: -40,
endAngle: 40,
background: null,
center: ['51%', '125%'],
size: 200
}],
exporting: {enabled: false},
tooltip: {enabled: false},
yAxis:
[{
min: -20,
max: 6,
minorTickPosition: 'inside',
tickAmount: 4,
tickPosition: 'outside',
labels: {rotation: 'auto',distance: 15},
plotBands:
[{
from: 0,
to: 10,
color: '#bf2013',
innerRadius: '100%',
outerRadius: '108%'
}],
pane: 0,
title:
{
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
y: -20
}
}],
plotOptions:
{
gauge:
{
dataLabels: {enabled: false},
dial: {radius: '110%'}
}
},
series:
[{
name: 'Channel A',
data: [0],
yAxis: 0
}]
},
// Test animation data
function (chart) {
setInterval(function () {
if (chart.series)
{ // the chart may be destroyed
var left = chart.series[0].points[0],
leftVal,
inc = (Math.random() - 0.5) * 3;
leftVal = left.y + inc;
if (leftVal < -20 || leftVal > 6) {leftVal = left.y - inc;}
left.update(leftVal, false);
chart.redraw();
}
}, 1000);
});
</script>
and this is the style section
.highcharts-figure,
.highcharts-data-table table
{
min-width: 250pt;
}
