Tools

Chart and figure editors.

Paste the source of a chart or a figure in any language Forma answers in, see it drawn, and download it as SVG or PNG. Free, with no sign-up.

Open the editor Have Forma write one

TikZOnline TikZ editor

gnuplotOnline gnuplot editor

Vega-LiteOnline Vega-Lite editor

MetaPostOnline MetaPost editor

PiCTeX example: Histogram: sums of two dice

PiCTeXOnline PiCTeX editor

PlotlyOnline Plotly editor

EChartsOnline ECharts editor

Chart.jsOnline Chart.js editor

Example

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "title": "Energy generated by source, 2021 to 2025 (TWh)",
  "width": 360,
  "height": 260,
  "data": {
    "values": [
      {
        "year": "2021",
        "source": "Coal",
        "twh": 96
      },
      {
        "year": "2021",
        "source": "Gas",
        "twh": 124
      },
      {
        "year": "2021",
        "source": "Wind",
        "twh": 64
      },
      {
        "year": "2021",
        "source": "Solar",
        "twh": 13
      },
      {
        "year": "2022",
        "source": "Coal",
        "twh": 84
      },
      {
        "year": "2022",
        "source": "Gas",
        "twh": 121
      },
      {
        "year": "2022",
        "source": "Wind",
        "twh": 80
      },
      {
        "year": "2022",
        "source": "Solar",
        "twh": 17
      },
      {
        "year": "2023",
        "source": "Coal",
        "twh": 66
      },
      {
        "year": "2023",
        "source": "Gas",
        "twh": 112
      },
      {
        "year": "2023",
        "source": "Wind",
        "twh": 92
      },
      {
        "year": "2023",
        "source": "Solar",
        "twh": 22
      },
      {
        "year": "2024",
        "source": "Coal",
        "twh": 48
      },
      {
        "year": "2024",
        "source": "Gas",
        "twh": 101
      },
      {
        "year": "2024",
        "source": "Wind",
        "twh": 106
      },
      {
        "year": "2024",
        "source": "Solar",
        "twh": 29
      },
      {
        "year": "2025",
        "source": "Coal",
        "twh": 31
      },
      {
        "year": "2025",
        "source": "Gas",
        "twh": 92
      },
      {
        "year": "2025",
        "source": "Wind",
        "twh": 118
      },
      {
        "year": "2025",
        "source": "Solar",
        "twh": 37
      }
    ]
  },
  "transform": [
    {
      "calculate": "indexof(['Coal', 'Gas', 'Wind', 'Solar'], datum.source)",
      "as": "stack_order"
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "year",
      "type": "ordinal",
      "title": "Year",
      "axis": {
        "labelAngle": 0
      }
    },
    "y": {
      "field": "twh",
      "type": "quantitative",
      "stack": "zero",
      "title": "TWh"
    },
    "color": {
      "field": "source",
      "type": "nominal",
      "title": "Source",
      "scale": {
        "domain": [
          "Coal",
          "Gas",
          "Wind",
          "Solar"
        ],
        "range": [
          "#555555",
          "#e6550d",
          "#3182bd",
          "#fdae6b"
        ]
      }
    },
    "order": {
      "field": "stack_order",
      "sort": "ascending"
    }
  }
}

⌘ or Ctrl + Enter draws. Sent to Forma's renderer, which keeps nothing

loadingStarting the renderer…

Stacked bar chart Electricity generated by coal, gas, wind and solar over five years, stacked in a fixed order with a calculate transform and the order channel, so wind overtaking gas is plain to see.

In your browser, drawn with Plotly.js (MIT), Apache ECharts (Apache-2.0, notice), Chart.js (MIT).

Drawn by Forma

Vega-Lite, gnuplot, TikZ, MetaPost and PiCTeX.

Sent to Forma's sandbox renderer and drawn by the same engines that draw Forma's own answers, each in a locked-down process with no network. Nothing you send is kept.

Drawn in your browser

Plotly, ECharts and Chart.js.

These are JavaScript libraries, so they run in a sandboxed frame on this page, cut off from the page and from storage, loading only this site's own files. What you paste in them is not sent anywhere.

Have Forma write it

Describe it instead.

Every format here is one Forma answers in. Describe the chart or figure and Forma returns the source, checked against its rules, from the Forma console or your agent.