← Back to Components

ScatterChart

data

Scatter chart for visualizing correlations between two variables

Parameters

dataxKeyyKeywidthheightcolorsshowGridshowLabels

Preview

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/