Uitbreiding:Kart

**MediaWiki extensions manual**
Chart; Release status: stable
Implementation	Tag
Description	Vertoon grafieke
Author(s)	Brooke Vibber, Katie Filbert, Roan Kattouw
Compatibility policy	Master maintains backward compatibility.
MediaWiki	>= 1.47.0
Database changes	No
	Parameters $wgChartRequestSizeLimit; $wgChartProgressiveEnhancement; $wgChartWizardEnabled; $wgChartTransformsEnabled; $wgChartServiceUrl; $wgChartCliPath;
	Hooks used ChangeTagsListActive; LinksUpdateComplete; ListDefinedTags; PageSaveComplete; ParserFirstCallInit; RecentChange_save; SkinTemplateNavigation::Universal; SpecialPage_initList;
Licence	GNU General Public License 3.0 or later
Download	Download extension ; Git [?]: Browse repository (Phabricator · GitHub); Gerrit code review; Git commit log; Download source tarball; ; README
	Translate the Chart extension if it is available at translatewiki.net
Issues	Open tasks · Report a bug

This page is a translated version of the page Extension:Chart and the translation is 30% complete.

The Chart extension provides basic interactive data visualization capabilities designed to replace some but not all aspects of the Graph extension. Hierdie uitbreiding is tans in ontwikkeling vir Wikimedia-wiki. Sien Extension:Chart/Project vir meer besonderhede oor die ontwikkelingsproces.

Hierdie uitbreiding ondersteun die volgende grafiek tipes:

Lijnkaart
Grondkaart
Barkaart
Koekgrafiek

Installasie

Die Chart-uitbreiding vereis dat die JsonConfig -uitbreidings geïnstalleer word, sowel as die Chart Renderer JavaScript-biblioteek (regtig TypeScript) aflaai.

Sien die lêer README.md in die bewaarplek vir die volledige instellingsinstruksies.

Wikimedia production

For Wikimedia production usage, see wikitech:Kubernetes/Deployments#Cheatsheet for general instructions on service deployments. Key bits here:

find your commit's build image id from chart-renderer's CI, eg "2025-06-24-201619-production"
- edit deployment-charts's helmfile.d/services/chart-renderer/values.yaml to reference the new version
- get it +2'd by a deployer
(as a deployer) log into deployment.codfw.wmnet or deployment.eqiad.wmnet depending on the active data center
- $ cd /srv/deployment-charts/helmfile.d/services/chart-renderer
  - latest service config should appear within a couple minutes (there's a regular update job)
- $ helmfile -e staging -i apply --context 5
  - confirm the changes and let it deploy to staging
test rendering on beta cluster
- TODO: add a specific page with our planned live test charts
- TODO: add directions on checking pixel rendering results
once confirmed good, deploy to main clusters:
- $ helmfile -e codfw -i apply --context 5
  - confirm the changes and let it deploy to codfw
- $ helmfile -e eqiad -i apply --context 5
  - confirm the changes and let it deploy to eqiad

How to use

To render a chart, you must define a chart definition to associate with the tabular data source you want to render. 'n Kaartdefinisie is gestruktureer as 'n relatief eenvoudige JSON-lêer; sien Extension:Chart/Specification vir die sintaksisbesonderhede.

Tabel data .tab sintaksis

All the charts in this example can be rendered from the same data source: Data:Chart Example Data.tab, a fictional dataset. Sample contents for these pages can be found in the sample directory.

Data:Example.chart

{
    "license": "CC0-1.0",
    "version": 1,
    "source": "Chart Example Data.tab",
    "type": "line",
    "title": {
        "en": "Example Chart Title"
    },
    "subtitle": {
        "en": "Example Subtitle"
    },
    "xAxis": {
        "title": {
        	"en": "Example X Axis Title"
        },
        "format": "none"
    },
    "yAxis": {
        "title": {
            "en": "Example Y Axis Title"
        },
        "format": "none"
    },
    "mediawikiCategories": [
        {
            "name": "Example category",
            "sort": "Its sortkey"
        }
    ],
    "transform": {
        "module": "Optional lua module for data transforms",
        "function": "transform_func",
        "args": {
            "arg_name": "arg_value"
        }
    }
}

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:Chart Example Data.tab, and the chart itself is defined in Data:Example.Line.chart:

Wikipedia article title

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

Note that a chart can be generic and reused with different data sources, like so:

{{#chart:Population through years.chart
|data=Population of USA.tab
}}

{{#chart:Population through years.chart
|data=Population of UK.tab
}}

{{#chart:Population through years.chart
|data=Population of Poland.tab
}}

Deprecated formats

The Chart definition JSON format originally allowed the title to be a plain string, rather than an object with localized title strings. xAxis and yAxis title fields also supported plain strings, but is now deprecated.

Deprecated:

{
    "license": "CC0-1.0",
    "description": {
        "en": "1993 Canadian federal election"
    },
    "title": "Example chart",
    "xAxis": {
        "title": "month"
    },
    "yAxis": {
        "title": "votes"
    },
}

This should instead be:

{
    "license": "CC0-1.0",
    "description": {
        "en": "1993 Canadian federal election"
    },
    "title": {
      "en": "Example chart"
    },
    "xAxis": {
        "title": {
            "en": "month"
        }
    },
    "yAxis": {
        "title": {
            "en": "votes"
        }
    },
}

Date formats in tabular data

When creating charts with dates on the x-axis, dates in tabular data should be formatted as strings that are exactly 10 characters long in the format:

YYYY-MM-DD, e.g., 2025-10-20

Ander 10-karaktersstrings wat deur JavaScript se Date.parse()-funksie gespesifiseer kan word, kan ook werk, hoewel dit nie amptelik ondersteun word nie.

Wanneer datums in die eerste kolom van die tabeldata opgespoor word, word hulle outomaties gelokaliseer op grond van die inhoudtaal van die wiki.

{
    "license": "CC0-1.0",
    "description": {
        "en": "1993 Canadian federal election"
    },
    "mediawikiCategories": [
        {
            "name": "Data:.tab",
            "sort": ""
        },
        {
            "name": "Data:Examples.tab",
            "sort": ""
        }
    ],
    "schema": {
        "fields": [
            {
                "name": "date",
                "type": "string",
                "title": {
                    "en": "Date",
                    "fr": "Date"
                }
            },
            {
                "name": "pc",
                "type": "number",
                "title": {
                    "en": "PC",
                    "fr": "PC"
                }
            },
            {
                "name": "liberal",
                "type": "number",
                "title": {
                    "en": "Liberal",
                    "fr": "Libéral"
                }
            },
            {
                "name": "ndp",
                "type": "number",
                "title": {
                    "en": "NDP",
                    "fr": "NPD"
                }
            },
            {
                "name": "bq",
                "type": "number",
                "title": {
                    "en": "BQ",
                    "fr": "BQ"
                }
            },
            {
                "name": "reform",
                "type": "number",
                "title": {
                    "en": "Reform",
                    "fr": "Réform"
                }
            }
        ]
    },
    "data": [
        [
            "1993-09-09",
            35,
            37,
            8,
            8,
            10
        ],
        [
            "1993-09-14",
            36,
            33,
            8,
            10,
            11
        ],
        [
            "1993-09-20",
            35,
            35,
            6,
            11,
            11
        ]
    ]
}

Sien voorbeelde op Commons:

Die datums moet vir jare getalle wees:

{
    "license": "CC0-1.0",
    "description": {
        "en": "New Zealand annual wine production, in millions of litres"
    },
    "sources": "Statistics from New Zealand Winegrowers 1998–2024 annual reports",
    "schema": {
        "fields": [
            {
                "name": "year",
                "type": "number",
                "title": {
                    "en": "Year"
                }
            },
            {
                "name": "production",
                "type": "number",
                "title": {
                    "en": "Wine produced (million litres)"
                }
            }
        ]
    },
    "data": [
        [
            1990,
            54.4
        ],
        [
            1991,
            49.9
        ],
        [
            1992,
            41.6
        ],
        [
            1993,
            32.5
        ],
        [
            1994,
            41.1
        ],
        [
            1995,
            56.4
        ]
    ]
}

Voorbeeld van grafieke en tabeldata met jare op die x-as:

See Support for dates ADR in gerrit for more details on date support.

Customization

Rou data

Die tien Hex kleure beskikbaar.

Customization of charts is currently limited. Die hoop is dat, na toetsing, bespreking en evaluering, oplossings vir aanpassing gevind kan word wat nie die toeganklikheid, toestel-spesifieke weergawe of sekuriteit in gevaar stel nie.

Sizing

Currently, charts occupy the entire container width where you place them. There is no way to adjust the height.

Die uiteindelike doel is om te verseker dat grafieke leesbaar weergegee kan word, ongeag op watter toestel hulle gelees word; sien T376845 vir meer besonderhede.

Theming

Currently, charts are restricted to a single default color palette. Hierdie palet is met sorg ontwerp met die oog op toeganklikheid. The thinking behind these color choices can be explored in T369863.

Party grafieke vereis spesifieke kleurtemas, byvoorbeeld om data wat verband hou met politieke partye te verteenwoordig. 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.

Note of caution

Note, while charts currently render SVG output which can be styled via TemplateStyles, please note that styling associated SVG elements should not be considered stable as it may change at any time. Please do not rely on CSS to alter chart appearance as this may result in non-functional charts in future or may interfere with accessibility features that change font size and features such as dark mode.

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 the Charts Phabricator board.

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 or curves on the y-axis.

Line

Rou data

This is an example of a line chart.

In the following example, the {{#chart: }} is wrapped in an {{Image frame }} container to set the chart’s width and include a caption. 'n Link word ook verskaf na die rou tabeldata, waar inligting oor databronne gevind kan word:

Wikipedia article title

{{image frame
|content={{#chart:Example.Line.chart}} [[commons:Data:Chart Example Data.tab|'''Raw data''']]
|width = 340
|caption = This is an example of a line chart.
}}

Sien die resultaat in hierdie afdeling.

Bar

Here the chart spans the full width of the page content area:

Wikipedia article title

{{#chart:Example.Bar.chart}} <div align="center">[[commons:Data:Chart Example Data.tab|'''Raw data''']]</div>

This results in:

Rou data

Area

Rou data

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.

Rou data

Finding existing charts

Charts that can be used in articles live on Wikimedia Commons and can be tracked using MediaWiki categories.

This query can be used as a proxy to find charts that others have made and contribute translations, and this to find tab pages that may be used to produce charts.

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 en MediaWiki:Chart-error-category (Category:Pages using the Chart extension en Category:Pages using the Chart extension with rendering errors on this wiki). Please make sure to connect your wiki categories to d:Q131382738 and d:Q131406605 to make the interwiki search easier.

Migrating from the Graph extension

Please see the category Wikipedia pages with disabled graphs in various languages for old graphs that need to be migrated to the Charts extension. Some have however already been deleted without replacing them with new charts. The list can be compared with an archived list of the first 200 out of 23,811 English Wikipedia pages with disabled graphs from 2023, soon after the templates were added to that category, and corresponding in other languages.

Tegniese besonderhede

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.

Error monitoring

Failing .chart pages are automatically stored in commons:Category:Pages using the Chart extension with rendering errors. Wiki pages with faulty charts are automatically stored in Category:Pages using the Chart extension with rendering errors in different language versions.

Errors with client side chart rendering will be logged to logstash. (Only for developers.)

Tools for producing the charts

There are several conceivable methods to semi-automatically produce and edit the charts and their tabular data:

The script graphDataImport can be used in the web browser to extract data from existing graph wikitext and similar, and convert it to a .tab page, a .chart definition page and new wikitext.
Generative AI can be prompted to extract data from existing graph wikicode and tables, and convert it to .tab and .chart pages and generate new wikicode, according to given specifications. It can also provide translation of titles, and be utilized to extend and update the .tab page with new data.
The gadget TabularImportExport can convert Excel and .csv files to and from the .tab pages. You can activate it via your Commons preferences.
The JSON Edit as table user interface (part of the Jsonconfig extension) is available from the .tab edit page.
Some bots can periodically import statistics from the web, or from existing Wikipedia graphs, to .tab or .chart pages, upon request. Such bots include DPLA bot and SLiuBot.
GraphBot ports English Wikipedia graphs to charts.

Sien ook

Extension:Chart/Project/FAQ – Gereelde vrae
Transforms

This extension is being used on one or more Wikimedia projects. This probably means that the extension is stable and works well enough to be used by such high-traffic websites. Look for this extension's name in Wikimedia's CommonSettings.php and InitialiseSettings.php configuration files to see where it's installed. A full list of the extensions installed on a particular wiki can be seen on the wiki's Special:Version page.