diff --git a/docs/nodes/widgets/ui-chart.md b/docs/nodes/widgets/ui-chart.md
index 7d9863eb9..0a5cc05e8 100644
--- a/docs/nodes/widgets/ui-chart.md
+++ b/docs/nodes/widgets/ui-chart.md
@@ -6,6 +6,8 @@ props:
Class: The text shown within the button.
Chart Type: Line
| Bar
| Scatter
Show Legend: Defines whether or not a legend is shown between the title and the chart. Each label is driven by msg.topic
.
+ Point Shape: Define the shape of the point shown in Scatter & Line charts.
+ Point Radius: Define the radius (in pixels) of each point rendered onto a Scatter or Line chart.
X-Axis Type: Timescale
| Linear
| Categorical
X-Axis Limit: Any data that is before the specific time limit (for time charts) or where there are more data points than the limit specified will be removed from the chart.
Properties:
diff --git a/docs/user/migration/ui_chart.json b/docs/user/migration/ui_chart.json
index 52b4251b1..5d46553f3 100644
--- a/docs/user/migration/ui_chart.json
+++ b/docs/user/migration/ui_chart.json
@@ -32,6 +32,11 @@
"changes": null,
"notes": null
},
+ {
+ "property": "cutout",
+ "changes": "improved",
+ "notes": "We now support both the 'size' and 'shape' of dots in a Scater and Line chart."
+ },
{
"property": "interpolate",
"changes": -1,
diff --git a/nodes/widgets/locales/en-US/ui_chart.json b/nodes/widgets/locales/en-US/ui_chart.json
index 075d033d9..2b599dd6f 100644
--- a/nodes/widgets/locales/en-US/ui_chart.json
+++ b/nodes/widgets/locales/en-US/ui_chart.json
@@ -14,7 +14,10 @@
"last": "last",
"yAxis": "Y-Axis",
"min": "min.",
- "max": "max."
+ "max": "max.",
+ "pointStyle": "Point Style",
+ "pointShape": "Shape",
+ "pointRadius": "Radius (px)"
}
}
}
\ No newline at end of file
diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html
index bce9e443b..1fbd10b30 100644
--- a/nodes/widgets/ui_chart.html
+++ b/nodes/widgets/ui_chart.html
@@ -61,6 +61,8 @@
yAxisProperty: { value: null },
ymin: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
ymax: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
+ pointShape: { value: 'circle' },
+ pointRadius: { value: 4 },
showLegend: { value: true },
removeOlder: { value: 1, validate: RED.validators.number(), required: true },
removeOlderUnit: { value: '3600', required: true },
@@ -144,6 +146,29 @@
typeField: $('#node-input-yAxisPropertyType'),
types: [propertyType]
})
+
+ $('#node-input-pointShape').typedInput({
+ type: 'pointShape',
+ default: 'circle',
+ typeField: $('#node-input-pointShapeType'),
+ types: [{
+ value: 'circle',
+ options: [
+ { value: 'circle', label: 'Circle' },
+ { value: 'cross', label: 'Cross' },
+ { value: 'crossRot', label: 'Cross Rotated' },
+ { value: 'crossRot', label: 'Cross Rotated' },
+ { value: 'dash', label: 'Dash' },
+ { value: 'line', label: 'Line' },
+ { value: 'rect', label: 'Rectangle' },
+ { value: 'rectRounded', label: 'Rounded Rectangle' },
+ { value: 'rectRot', label: 'Rotated Rectangle' },
+ { value: 'star', label: 'Star' },
+ { value: 'triangle', label: 'Triangle' },
+ { value: false, label: 'None' }
+ ]
+ }]
+ })
// handle event when chart's type is changed
$('#node-input-chartType').on('change', (evt) => {
@@ -162,8 +187,9 @@
$('#node-input-xAxisType').typedInput('type', 'time')
// show x-axis property setting
$('#node-container-xAxisProperty').show()
- // show x-axis limit options
+ // show x-axis limit options & points sizing
$('#x-axis-show').show()
+ $('#point-radius-show').show()
} else {
// for bar
// types - categorical
@@ -176,8 +202,9 @@
$('#node-input-xAxisType').typedInput('type', 'category')
// show x-axis property setting
$('#node-container-xAxisProperty').hide()
- // hide x-axis limit options
+ // hide x-axis limit options & points sizing
$('#x-axis-show').hide()
+ $('#point-radius-show').hide()
}
})
@@ -271,6 +298,18 @@
+