chartjs

Last modified by Lucas Charpentier on 2026/10/27 10:30

Audit

Macro ID
chartjs
Source
Chart.js Integration
Type
Generator
Classification reason
The mandatory content is only the JSON data source of a chart that the macro draws in the browser, not text that the macro wraps or decorates, like the content of chart and translation.
Status
Reviewed
Criteria version
15.20
XWiki version
18.8.0
Audit date
2026-10-20
Auditor
Compared macros
chart liveData

Sources

Where to gather the information the criteria are checked against, see Gather the sources.

SourceWhat it givesUsed forWhere
DocumentationParameters, default values and examples, including the most common exampleL2, L3, and the criteria measured with the most common examplehttps://extensions.xwiki.org/xwiki/bin/view/Extension/Chart.js%20Integration/#HChartJSMacro
Source codeHow the macro declares its parameters and content: types, groups, features, advanced and hidden flags, constraints, content type, inline supportC4, C5, C7, C8, C9, C13, E4, E6https://github.com/xwiki-contrib/application-chartjs/blob/master/application-chartjs-ui/src/main/resources/XWiki/ChartJS/WebHome.xml
Macro descriptorWhat the Edit Macro dialog is built from, on design.xwiki.orgD1, D2, C1 to C9, E4Descriptor, list of macros with their categories
TranslationsThe name, description and parameter names in each languageD1, D2, D4, C1l10n.xwiki.org
Uses in XWiki pagesHow XWiki itself uses the macro, a realistic example when the documentation has noneL3, C2, C3, C6, C8, C9Search the xwiki organization on GitHub
Compared macrosThe audits of the macros of the same typeL1, D3chart, liveData
Other sources specific to this macro
  • ChartJS WebHome.xml: a wiki macro of the XAR, with a mandatory content that is put in the data-source attribute of a canvas, declares no inline support, and holds the JavaScript that draws the chart with Chart.js.
  • Chart.js Integration: the legacy documentation page of both macros of the extension, the only documentation of the parameters.
  • Table to ChartJS macro audit: the other macro of the extension, audited at the same time, whose ratings for what the two share are kept the same.
CriterionResultNotes
D1 wordingOK"ChartJS" is the name of the technology, which is what a developer macro that takes JSON data may be named after, and it says that the macro draws charts. It is not a code identifier. The macro of the same extension that reads a table is "Table to ChartJS".
D2 summaryKO"Simple HTML5 charts using the canvas element." describes the technique, the canvas element, in words that mean nothing to most users, and does not state the rule that the user needs to insert the macro: the content must be a JSON object with labels and datasets, and the type must be one of the Chart.js types, see C1 of the content. The name of the macro plus "charts" is mostly repeated.
D3 categoryOKin Content, like chart and liveData, the compared macros, and like Table to ChartJS, the other macro of the extension.
D4 quick-actionKOQuick Actions finds the macro first for its ID "chartjs" and for its name "ChartJS", which are the same in English, French and German, and no other language gives a different name that finds it. The synonym "chart" ranks it 5th, after Chart, Table to ChartJS, jiraPieChart and jiraCreatedVsResolvedChart, at the limit of the measure, and "charts" ranks it first. The synonyms "graph", "diagram", "bar chart", "pie chart" and "plot" do not find it: "graph" lists Paragraph, Chart and map, "diagram" the Diagram macros and kroki, "pie chart" only jiraPieChart, and the other two nothing. The rule for a technical macro named after its technology does not apply, since the macro is in Content and these are the words a user would type for a chart. Same result as chart and as the Table to ChartJS macro.
L1 consistencyOKcompared with chart and liveData, two generators of the Content category. Like chart, the content is mandatory, which is by design: it is the data of the chart, and an empty one makes no sense. Unlike chart, whose content is a table in wiki syntax, the content is a JSON object, a format specific to the macro, which the Edit Macro dialog does not describe, see C1 of the content. Type is mandatory as in chart, so Quick Actions opens the Edit Macro dialog, counted under C2 of type. No default is declared, as for liveData.
L2 doc-parametersKOthe parameters are only documented on the legacy extensions.xwiki.org page of the extension, Chart.js Integration, not in the new documentation, where a search by the name chartjs and by Chart.js finds only release notes. The content, which is mandatory, is not in the parameter table. The five parameters of the table have the right mandatory flags, and the type list "line, bar, radar, pie, doughnut, polarArea, bubble, scatter" misses horizontalBar, which the documentation examples use. The keys of the JSON options, like backgroundColors, skipZeros or opacity, are documented in the description of the options parameter and on the page. The template also reads a width and a height parameter, which are not declared, so the Edit Macro dialog does not offer them, and no documentation lists them as parameters: they only exist as the keys "width" and "height" of options. See the bug note below.
L3 doc-exampleOKthe most common example is Example 2 of the documentation, a pie chart with a backgroundColors option and a JSON content of three labels and two data sets. Example 1, with "..." values, is a template, not an example. The examples render a chart in view mode after the JavaScript runs, with no error in the page or the console. The content can be typed in the Edit Macro dialog, so they can be reproduced in the editor.
I1 patternOKQuick Actions and the Insert Macro dialog both open the Edit Macro dialog, since the content and type are mandatory, the behavior of a generator that needs a value to work, like include, and the one of chart. One entry lists the macro.
I2 zero-configOKsubmitting the Edit Macro dialog with the default values keeps it open with no message, the generic behavior of the dialog. {{chartjs/}} renders "Failed to execute the [chartjs] macro. Cause: [Parameter [type] is mandatory]" and an empty content renders "Missing macro content: this macro requires content (a body)", clear messages that a generator may require, since an empty chart makes no sense. With a type and a JSON content, the chart renders in view mode.
I3 instantN/A
I4 cursorN/A
I5 focusOKthe content and type, the only mandatory parameters, come first, outside the Optional parameters tab, with the focus on the content, so every mandatory parameter is visible without scrolling.
E1 wysiwygKOthe editor shows an empty block of about 155 pixels in place of the macro: the canvas of the chart stays blank, 0 painted pixels, with no chart, no placeholder and no text, 30 seconds after the insertion and after saving and reopening the page, where view mode draws the pie chart with its legend after the JavaScript runs. Chart.js is loaded in the editor, so it is not a wait problem. Nothing in the editor says that a chart is there or what it shows. Same as the tableToChartJS macro. To reproduce: insert the most common example and wait.
E2 errorsKOmost invalid values are accepted with no message in view mode, in the page or in the console, so the user gets a wrong or missing chart. type="abc" and type="Pie" , the wrong case, draw nothing, 0 painted pixels. A content that is not JSON, like "not json", draws nothing either. options="{" and options="abc" are ignored and the chart is drawn with the default options. id="my chart" is written on the canvas as given, an invalid HTML id. A missing type and an empty content give a clear error, which names the parameter or the content. An unknown parameter, noSuchParameter="x" , is generic and not counted.
E3 nestingKOin a list item and in a table cell, the macro renders "The [chartjs] macro is a standalone macro and it cannot be used inline." in view mode, and the editor shows the macro with no canvas, a standalone error. In a box it renders, with its canvas, and the chart is drawn in view mode, like at the top level. The content is typed in a dialog text area, so a paragraph, a table, a box or a numbered list in it does not apply: each is only text for the JSON, which is not valid and draws nothing, see E2. Same as the tableToChartJS macro.
E4 inline-supportOKthe macro declares no inline support, and its output is a responsive block container that Chart.js sizes to the width of its parent, which is a technical reason to stay standalone. In a sentence it renders the same standalone error as in E3.
E5 emptyN/Anot applicable to a generator, whose content is the data source of the chart and not text that the macro decorates.
E6 inplaceN/Anot applicable to a generator. The content is edited only in the Edit Macro dialog, in a text area, with no in-place area.

Parameters

ParameterC1 clarityC2 mandatoryC3 defaultsC4 input-assistanceC5 groupsC6 orderC7 alternativesC8 advancedC9 technicalC13 constraintsNotes
$contentKOOKN/AOKN/AOKN/AN/AN/AN/A

C1: "The chart data." does not say that the data is a JSON object with labels and datasets, which the dialog never describes, nor that each data set has a label and a list of numbers. The format is only visible in the examples of the documentation. To reproduce: open the Edit Macro dialog from Quick Actions.

C2: mandatory, since there is no chart without data and an empty content has no sensible meaning.

C4: a text area for a JSON text, the same field as the other macros with a data content, so a single text area is OK. It is edited only in the dialog, see E6.

C6: first of the dialog, with the focus, and set by the most common example.

typeKOKON/AKOOKOKN/AOKOKN/A

C1, minor: "The type of chart. Choose from: line, bar, radar, pie, doughnut, polarArea, bubble, scatter." says what it sets and gives the values, but the list is presented as complete while the horizontalBar of the examples of the documentation works and is not in it, and the values are the Chart.js identifiers, written as is, with the case that matters, see E2.

C2: mandatory, while a default type, like bar, would work for any content of the documentation: {{chartjs}}{...}{{/chartjs}} would give a chart instead of the error "Parameter [type] is mandatory". Because of it, Quick Actions opens the Edit Macro dialog, see L1.

C4: a free text field, although the accepted values are a short list of chart types: a select, ideally with a preview of each type, could be used. type="abc" and type="Pie" are accepted and draw nothing, see E2.

C5: outside any group, with the content, so 2 fields, and the Optional parameters group comes after.

C6: second of the dialog, after the content, and set by the most common example.

C13: the accepted values are a list rather than a format, so it is recorded N/A: the select of C4 would declare them.

optionsOKOKOKOKOKOKN/AOKOKKO

C1: "Advanced options specified as JSON. Checkout the Chart.js documentation for the available configuration options." gives the format and where the keys are listed. The keys that the macro adds, like backgroundColors, opacity, skipZeros, width and height, are in the long description, which the dialog does not show in full, and on the documentation page.

C3: the field opens empty, for the default options of Chart.js.

C4: a one line text field for a JSON object. A custom picker for this mini-syntax would be overkill, so the text field is OK, as long as the description explains the format, which it does.

C5: the 4 fields of the Optional parameters group, cssClass, id, options and title, with the content and type outside it, are not above 7.

C6: third of the group, in alphabetical order, visible without scrolling, and set by the most common example, so it is reachable.

C8: the description says "Advanced", but both examples of the documentation set options, including the most common one, a pie chart with backgroundColors, so the parameter is not rarely used and it stays visible. The word in the description is misleading but the measure is met.

C13: a JSON format that the macro cannot declare, since the parameters of a wiki macro cannot declare a format, see XWIKI-25197 in the Cross-macro findings. options="{" and options="abc" are accepted and ignored, see E2.

cssClassOKOKOKOKOKOKN/AKOOKN/A

C1: "Additional CSS class to be added to the chart container. It can be useful in particular for setting the canvas dimensions at the CSS level." is a technical term for a styling hook, which another wording would only make more confusing. The name is the ID and the description is not translated in French and German.

C5: the 4 fields of the Optional parameters group, cssClass, id, options and title, with the content and type outside it, are not above 7.

C6: first of the group, not set by the most common example.

C8: a rarely used styling hook, not marked advanced.

titleKOOKOKOKOKOKN/AOKOKN/A

C1, minor: "Chart title, added as aria-label to the generated canvas" uses developer terms, and the name suggests a title drawn on the chart, like the title of the Chart macro of XWiki Standard, while it is only the text alternative of the canvas, which no title is drawn from. The meaning is clear once read. The name is the ID and the description is not translated in French and German.

C3: the field opens empty, for no text alternative, the value of the most common example. A chart with no title has an img role and no name.

C5: the 4 fields of the Optional parameters group, cssClass, id, options and title, with the content and type outside it, are not above 7.

C6: last of the group, below the fold of the dialog, not set by the most common example.

C8: the only text alternative of a chart that screen readers cannot read, so it is not a rarely used parameter, even if the examples do not set it.

idOKOKOKOKOKOKN/AKOOKKO

C1: "Chart identifier" is a technical term for a hook, the id of the canvas, which another wording would only make more confusing. The name is the ID and the description is not translated in French and German.

C5: the 4 fields of the Optional parameters group, cssClass, id, options and title, with the content and type outside it, are not above 7.

C6: second of the group, not set by the most common example.

C8: a rarely used hook, not marked advanced.

C13: an HTML id has no space and is unique in the page, a format that the macro cannot declare, since the parameters of a wiki macro cannot declare one, see XWIKI-25197 in the Cross-macro findings. id="my chart" is accepted and written on the canvas as given, an invalid id, see E2.

Other notes

Bug outside the criteria: the title parameter is only the aria-label of the canvas and no title is drawn on the chart. The template also reads a width and a height parameter, which are not declared, so the dialog does not offer them, and which only set the width and height attributes of the canvas, that Chart.js overrides with the default options, so they have no visible effect: the working ones are the "width" and "height" keys of options. An unknown or wrong-case type fails silently, with nothing drawn, instead of an error that lists the types. The console shows the JQMIGRATE warning "jQuery.isNumeric() is removed" on the pages where the macro renders.

The English names of the parameters cssClass, title and id are their IDs, and their descriptions are not translated in French and German, which translate the name of the Optional parameters group and not the descriptions of the content. The name of the macro is the same in the three languages.

KOs and tickets

Every KO needs a ticket covering it, see Report the KOs. One ticket can cover several KOs. Known issues filed for this macro are suggested in italics: link them as existing tickets when they cover the KO.

KOCriterionExisting ticketsNew tickets
D2D2 summaryCHARTJS-40
D4D4 quick-actionXWIKI-25444
L2L2 doc-parametersXINFRA-525
E1E1 wysiwygXWIKI-22046 (partial)XWIKI-25523 (partial), CHARTJS-43
E2E2 errorsCHARTJS-38XCOMMONS-3847 (partial), XRENDERING-823 (partial)
E3E3 nestingXWIKI-23501
C1:$contentC1 clarity, $contentCHARTJS-40
C1:typeC1 clarity, typeCHARTJS-40
C2:typeC2 mandatory, typeCHARTJS-41
C4:typeC4 input-assistance, typeXWIKI-23045 (partial)CHARTJS-42
C13:optionsC13 constraints, optionsXWIKI-25197
C8:cssClassC8 advanced, cssClassCHARTJS-41
C1:titleC1 clarity, titleCHARTJS-40
C8:idC8 advanced, idCHARTJS-41
C13:idC13 constraints, idXWIKI-25197
Success

Every KO is covered by a ticket.

Tickets

TicketOriginKOs coveredKOs partly covered
CHARTJS-38ExistingE2
XWIKI-22046ExistingE1
XWIKI-23501ExistingE3
XWIKI-25197ExistingC13:id C13:options
XCOMMONS-3847NewE2
XRENDERING-823NewE2
XWIKI-25444NewD4
CHARTJS-40NewC1:$content C1:title C1:type D2
CHARTJS-41NewC2:type C8:cssClass C8:id
CHARTJS-42NewC4:type
XWIKI-23045ExistingC4:type
XINFRA-525NewL2
XWIKI-25523NewE1
CHARTJS-43NewE1

Known issues of this macro

IssueTitleStatusCriteria
CHARTJS-38A blank block is displayed if the content json is malformedOpenE2

68 more known issues affect every macro: see the Known issues.

Get Connected