Extension:Chart

MediaWiki extensions manual

Chart Release status: stable
Implementation	Tag
Description	Renders charts
Author(s)	TODO
Compatibility policy	Master maintains backward compatibility.
MediaWiki	>= 1.44
Database changes	No
License	GNU General Public License 3.0 or later
Download	Download extension Git [?]: Download Git master GitHub) commit history repository contributors (GitHub) README
Parameters $wgChartCliPath $wgChartServiceUrl $wgChartProgressiveEnhancement
Hooks used ParserFirstCallInit
Quarterly downloads	52 (Ranked 87th)
Translate the Chart extension if it is available at translatewiki.net
Issues	Report a bug

The Chart extension is a chart-rendering extension that replaces the Graph extension , and possibly also the EasyTimeline extension . This extension is currently in development for Wikimedia wikis. See Extension:Chart/Project for more details on the development process.

Installation

The Chart extension requires having the JsonConfig extension installed, as well as downloading the Chart Renderer JavaScript (actually TypeScript) library.

See the README file in the repository for the full setup instructions.

How to use

All the charts in this example can be rendered from the same data source: sample directory.

To render a chart, you must define a chart definition to associate with the data source you want to render.

This extension supports the following chart types:

• Bar chart
• Pie chart
• Line chart
• Area chart

A chart definition is relatively simple. In the chart definition, specify the following:

• source – where to obtain the data for the chart.
• license – the license the chart is available under
• xAxis -> title – what to label the x-axis with
• yAxis -> title – what to label the y-axis with
• type – the type of chart being rendered; charts with different chart types must use different definitions, even if they are otherwise identical

{
    "license": "CC0-1.0",
    "version": 1,
    "type": "line",
    "xAxis": {
        "title": {
        	"en": "Date"
        }
    },
    "yAxis": {
        "title": {
            "en": "%support",
            "fr": "%soutien"
        }
    },
    "source": "Chart Example Data.tab",
    "mediawikiCategories": [
        {
            "name": "Example category",
            "sort": "Its sortkey"
        }
    ]
}

Once a chart is defined, you can render it easily using the #chart parser function. In this case, the chart data is defined in Data:Example.Line.chart:

{{#chart:Example.Line.chart}}

Customization

The initial proof of concept severely limits customization. The hope is that, after testing, discussion and evaluation, solutions for customization can be found that do not compromise accessibility, device-specific rendering, or security.

Sizing

Currently, charts occupy the entire container width where you place them.

The eventual goal is to ensure that charts can be rendered legibly no matter what device they are read on; see T376845 for more details.

Theming

Currently, charts are restricted to a single color palette. This palette has been carefully designed with accessibility in mind. The thinking behind these color choices can be explored in T369863.

Some charts do require specific color themes, for example, to represent data relating to political parties. It remains an open question of how best to support this type of customization without compromising the ability of readers with accessibility needs (e.g., color blindness) to use them.

Internationalization

Charts can only be embedded in the wiki's content language; so, for example, the "uselang" query string (e.g. ?uselang=es) will not impact the chart.

The chart format supports defining text like title and labels in different languages, so that the same chart can be used in wikis of different languages. See this example of a chart with support for multiple languages being displayed in a Spanish-language wiki.

Known issues

See this filtered view of phab:tag/charts/.

Types of chart

For all charts, data is expected to be arranged in columns, with the first column representing the x-axis and the following columns representing series on the y-axis.

Line

Bar

Area

Pie

Pie charts are a special chart type, and data sources may require modification to be rendered appropriately.

When reading data, any non-number columns (e.g., the x-axis) will be discarded, and the sum of all rows will be represented on the chart.

For example, where multiple rows depict values for A, B, and C on numerous dates, e.g., January 1st and January 2nd, the pie chart segment for A will represent the sum of all A's row values across those dates.

Finding existing charts

Charts that can be used in articles live on Wikimedia Commons.

Plans to add a tracking category to discover charts will be added at https://phabricator.wikimedia.org/T242596

In the meantime, this query can be used as a proxy to find charts that others have made and contribute translations.

The set of wiki pages that use charts on any particular wiki can be found in the category whose name is defined at MediaWiki:chart-render-category (Category:Pages using the Chart extension on this wiki). Please make sure to connect your wiki categories to d:Q131406605 to make the interwiki search easier.

Migrating from the Graph extension

Please see Category:Pages with disabled graphs for charts that need to be migrated to the Charts extension.

Technical documentation

Given the problems with Extension:Graph , all the decisions regarding the new extension have been carefully considered, with the hope of building trust and confidence in its replacement.

So far, the technical decisions are documented in the code repository in the doc/adr folder.