Chart Playground

Interactive playground to compose and configure all chart components with live preview and code generation

Chart Type

Line Graph Props

Number of Lines

Data Points

Line 1

Color

Line Type

Show Area Fill

Smooth Curve

Axis

Wrapper & Extras

Wrap in ChartCard

Show Legend

Show ChartNumbers

Preview

Code

<OpGraph
  type="line"
  data={[
  {
    "x": 0,
    "y1": 0.6
  },
  {
    "x": 1,
    "y1": 0.71
  },
  {
    "x": 2,
    "y1": 0.7
  },
  {
    "x": 3,
    "y1": 0.69
  },
  {
    "x": 4,
    "y1": 0.43
  },
  {
    "x": 5,
    "y1": 0.12
  },
  {
    "x": 6,
    "y1": 0.24
  },
  {
    "x": 7,
    "y1": 0.6
  }
]}
  config={{
  "xKey": "x",
  "series": [
    {
      "yKey": "y1",
      "color": "primary",
      "lineType": "solid"
    }
  ],
  "areaDisplay": true,
  "curveDisplay": false,
  "width": 400,
  "height": 80
}}
/>

Current Configuration

{
  "chartType": "line",
  "axisType": "None",
  "wrapInCard": false,
  "showLegend": false,
  "showNumbers": false,
  "lineCount": 1,
  "lineDataPoints": 8,
  "lineColors": [
    "primary"
  ],
  "lineTypes": [
    "solid"
  ],
  "areaDisplay": true,
  "curveDisplay": false
}