← Back to Components
ScatterChart
dataScatter chart for visualizing correlations between two variables
Parameters
dataxKeyyKeywidthheightcolorsshowGridshowLabelsPreview
Loading preview...
Example
{
"version": "1.0",
"state": {
"scatterData": {
"type": "list",
"initial": [
{ "x": 10, "y": 25 },
{ "x": 20, "y": 15 },
{ "x": 35, "y": 30 },
{ "x": 45, "y": 20 },
{ "x": 55, "y": 35 },
{ "x": 70, "y": 28 },
{ "x": 80, "y": 40 }
]
}
},
"actions": [],
"view": {
"kind": "component",
"name": "ScatterChart",
"props": {
"data": { "expr": "state", "name": "scatterData" },
"xKey": { "expr": "lit", "value": "x" },
"yKey": { "expr": "lit", "value": "y" },
"width": { "expr": "lit", "value": 400 },
"height": { "expr": "lit", "value": 300 },
"showGrid": { "expr": "lit", "value": true },
"showLabels": { "expr": "lit", "value": true }
}
}
}Installation
Copy component files from:
node_modules/@constela/ui/components/scatter-chart/