Graphing

Network graph

Graphing is visually showing how different pieces of information (data) are related, using pictures like lines, bars, or dots on a grid to make patterns, trends, and comparisons easy to see at a glance, essentially turning numbers into a "map" of data. The act of "graphing" is the process of creating these visual charts, like drawing a line graph to show temperature changes or a bar graph to compare sales. Graphs are a subset under the broader umbrella of diagramming. A diagram visually explains concepts, processes, or relationships (e.g. flowcharts, Venn diagrams, floor plans) using abstract shapes and symbols, focusing on structure, while a graph specifically plots numerical data on axes (X/Y) to show mathematical relationships, trends, or comparisons (e.g. line graphs, bar charts, scatter plots). Diagrams tend to illustrate ideas, whereas graphs visualize quantitative data for analysis.

Real-world needs of charting data and relationships go far beyond simple pie charts or flow diagrams. Consider this example: rotating globe of seismic activity in the past 30 days.

Examples

Here are example chart types from leading charting libraries.

• eCharts examples (also, just watch the animation on the project home page)
• Vega examples

In MediaWiki

Semantic MediaWiki

The Semantic Result Formats (SRF) extension to SMW has support for many chart formats such as Jqplot (using the outdated as of 2015 jqPlot library) Gantt charts leveraging Mermaid, Bar and Pie charts (using the Google Charts service - but its unclear whether this actually works since the website seems to indicate it was defunct in 2012 while Google's Chart website is very much active in 2025 with a gallery of chart types.) and many more on top of the result formats already provided by SMW. Of course to use these result formats you must annotate your data semantically.

Graph

The Graph extension was archived in late 2025 due to XSS concerns, after being disabled on WMF wikis since 2023. It is suggested to use alternatives such as Extension:Chart, Extension:EasyTimeline and Extension:Kartographer Graph is/was powered by an older version of Vega.

Chart

Chart is the 'new' (2025) supported extension for MediaWiki on WMF wikis.

The current architecture requires chart data to be stored on commons, so there is non-trivial work for third-party wikis - especially private ones - to be able to use this extension (along with its dependencies).

It requires extension JsonConfig and the TypeScript ChartRenderer library running on node.js. It does appear to be possible to setup and configure the (JsonConfig) system to work with a local storage and service endpoint but more research is required.

Only a few basic chart types (line, area, bar, pie) are supported currently.

There is an FAQ that answers some key questions about the project to develop this extension. One in particular is

Where will chart definitions be stored? Where do I go if I want to edit a particular chart?

Chart definitions will live on their own .chart pages on Commons, under the Data: namespace. Charts will be treated as a standalone content type, rather than just as part of an article. It will be easy to reuse the same chart across wikis, and beyond Wikimedia platforms by making them available as links. Editors who want to embed charts in an article will be able to do so with a short piece of wikitext, similar to including an image from Commons, without needing to interact with complex templates.

One weakness of requiring that the data come from Commons tabular data is that data sourcing flows such as from MediaWiki APIs or Wikidata Query Service are not handled. While those sources are not the focus for this project, this project aims to design the extension in a way that they can be supported in the future.

Technical Decisions

A key objective in the development was to avoid needing tons of templates and Lua modules for editors to rely on. Technical decisions are documented in the "Architectural Decision Records" in the source repo.

Underlying Library

The underlying library is Apache ECharts. The project team looked at almost a dozen available libraries and ended up comparing eCharts to Vega The extension offers a great deal of functionality to wiki editors, but will never offer direct access to the underlying library for several (good) reasons. Digging further down just for knowledge sake, the rendering subsystem for ECharts is zrender, while Vega and Observable Plot are powered by Data-Driven Documents, more commonly known as D3 (examples).

Transforms

Extension:JsonConfig is used to allow transforms on data by specifying a Lua module (through Extension:Scribunto)

EChart

ECharts is an extension created by Bertrand Gorge that directly leverages the same Apache ECharts library chosen by WMF. It does pose a risk for XSS, but with a private, registered user scenario where you trust your editors it can be exactly what you're looking for. I haven't looked at the 'definitions' submodule, but you might need to change that if it's specific to the creator's environment.

EasyTimeline

EasyTimeline is a one-purpose solution for timelines. This extension is not compelling as a graphing solution in 2025. The underlying ploticus system was last active in 2013, with support ending in 2016. It has migrated from Perl to Python in 2023 with no visible source code.

• Method: Uses a dedicated scripting language (EasyTimeline syntax) within wiki pages to define timeline events and appearance.
• "Easy" refers to understanding and modifying existing timelines, though the syntax is from the ploticus perl utility.
• Requires perl and ploticus on the server.

Old memories

It invokes the memory of the SIMILE project from MIT's CSail and their Timeline widget based on XML and JavaScript - which sadly hasn't really been developed since about 2010. That project did far more - creating data-rich, highly interactive timelines for general web publication. For the timeline-curious, Tantek Çelik (microformats.org etc.) has a page with real-world implementations as they've tried to standardize a 'history' microformat.

Timelines in MediaWiki with Mermaid

Currently it seems the best way to create timelines in MediaWiki is to use Mermaid. (see Diagrams)

{{#mermaid:
timeline
    title Timeline of Industrial Revolution
    section 17th-20th century
        Industry 1.0 : Machinery, Water power, Steam <br>power
        Industry 2.0 : Electricity, Internal combustion engine, Mass production
        Industry 3.0 : Electronics, Computers, Automation
    section 21st century
        Industry 4.0 : Internet, Robotics, Internet of Things
        Industry 5.0 : Artificial intelligence, Big data, 3D printing
}}

produces the following:

Kartographer

Kartographer is an extension that, like Charts, is tightly integrated with WMF wikis and infrastructure and therefore is unsuitable for 3rd-party wikis.

Instead, third-party wikis should use the Maps extension which is more general purpose, and flexible. It supports various map providers like OSM and Google Maps, and data formats like GeoJSON and KML. With GeoJSON support, it's pretty powerful for creating easy-to-edit maps on-wiki. See Using Leaflet to design a Disc Golf Course for example.

Graphing Libraries

The best open-source graphing libraries include D3.js (for ultimate customization), Chart.js (simple and popular for basic charts), Plotly (versatile for Python, JS, R, etc.) and ECharts (powerful and interactive, especially for big data), with Recharts and ApexCharts being excellent for React/JS dashboards. The choice depends on your tech stack and complexity needs. D3 is the underlying library for many other charting solutions due to its power and complexity.

D3.js (Data-Driven Documents)

The foundational library for complex, custom data visualizations, offering immense power but with a steeper learning curve.

Chart.js

Very popular, easy to use for standard charts (bar, line, pie) with a clean look, ideal for beginners.

ECharts (Apache ECharts)

Feature-rich, interactive, great for big datasets, supports many chart types.

Plotly.js

Powerful, interactive, supports a wide range of chart types, integrates well with Python/R.

Recharts

A composable charting library built on React components, great for React apps.

ApexCharts

Modern, interactive, SVG-based charts with great responsiveness.

Vis.js

Excellent for network diagrams, timelines, and 3D graphs.

When the WMF went out to select a chart library for the new Chart extension, they looked at all of the following:

Apache ECharts

Vega (used by the legacy Graph extension)

D3

Observable Plot

Our World in Data grapher

see too ourworldindata.org/

RGraph

Teechart

Plotly.js

Chart.js

(HTML canvas only - canvas can be easily converted to raster images, but not vector ones)

Mermaid

DataDraw

(cf T338098, but seems inactive since 2023)

Observability

In enterprise operations, you're tasked with getting intelligence from large streams of data. The "dashboards" and monitors you use often get tagged with the term 'observability'.

Grafana Labs produces a suite of tools (many open source) including their namesake Grafana as a leading tool for visualization of time-series data. Most importantly for job seekers, you will often see Prometheus and Grafana listed as job requirements.

Semantic MediaWiki = See Metadata

WikiMedia Foundation = the organization which runs various projects including Wikipedia.org

Extensible Markup Language = a system for markup such that you can create your own 'schema' of terms rather than a specific markup language.

JavaScript = A computer language.

Scalable Vector Graphics = an XML-based open standard of the W3C since 1999. See wp:SVG

HyperText Markup Language = structured text that uses logical links (hyperlinks) between nodes containing text.