chartjs
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.
| Other sources specific to this macro |
|---|
|
| Criterion | Result | Notes |
|---|---|---|
| D1 wording | OK | "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 summary | KO | "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 category | OK | in Content, like chart and liveData, the compared macros, and like Table to ChartJS, the other macro of the extension. |
| D4 quick-action | KO | Quick 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 consistency | OK | compared 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-parameters | KO | the 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-example | OK | the 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 pattern | OK | Quick 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-config | OK | submitting 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 instant | N/A | |
| I4 cursor | N/A | |
| I5 focus | OK | the 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 wysiwyg | KO | the 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 errors | KO | most 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 nesting | KO | in 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-support | OK | the 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 empty | N/A | not applicable to a generator, whose content is the data source of the chart and not text that the macro decorates. |
| E6 inplace | N/A | not applicable to a generator. The content is edited only in the Edit Macro dialog, in a text area, with no in-place area. |
Parameters
| Parameter | C1 clarity | C2 mandatory | C3 defaults | C4 input-assistance | C5 groups | C6 order | C7 alternatives | C8 advanced | C9 technical | C13 constraints | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| $content | KO | OK | N/A | OK | N/A | OK | N/A | N/A | N/A | N/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. |
| type | KO | KO | N/A | KO | OK | OK | N/A | OK | OK | N/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. |
| options | OK | OK | OK | OK | OK | OK | N/A | OK | OK | KO | 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. |
| cssClass | OK | OK | OK | OK | OK | OK | N/A | KO | OK | N/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. |
| title | KO | OK | OK | OK | OK | OK | N/A | OK | OK | N/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. |
| id | OK | OK | OK | OK | OK | OK | N/A | KO | OK | KO | 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.
| KO | Criterion | Existing tickets | New tickets |
|---|---|---|---|
| D2 | D2 summary | CHARTJS-40 | |
| D4 | D4 quick-action | XWIKI-25444 | |
| L2 | L2 doc-parameters | XINFRA-525 | |
| E1 | E1 wysiwyg | XWIKI-22046 (partial) | XWIKI-25523 (partial), CHARTJS-43 |
| E2 | E2 errors | CHARTJS-38 | XCOMMONS-3847 (partial), XRENDERING-823 (partial) |
| E3 | E3 nesting | XWIKI-23501 | |
| C1:$content | C1 clarity, $content | CHARTJS-40 | |
| C1:type | C1 clarity, type | CHARTJS-40 | |
| C2:type | C2 mandatory, type | CHARTJS-41 | |
| C4:type | C4 input-assistance, type | XWIKI-23045 (partial) | CHARTJS-42 |
| C13:options | C13 constraints, options | XWIKI-25197 | |
| C8:cssClass | C8 advanced, cssClass | CHARTJS-41 | |
| C1:title | C1 clarity, title | CHARTJS-40 | |
| C8:id | C8 advanced, id | CHARTJS-41 | |
| C13:id | C13 constraints, id | XWIKI-25197 |
Tickets
| Ticket | Origin | KOs covered | KOs partly covered |
|---|---|---|---|
| CHARTJS-38 | Existing | E2 | |
| XWIKI-22046 | Existing | E1 | |
| XWIKI-23501 | Existing | E3 | |
| XWIKI-25197 | Existing | C13:id C13:options | |
| XCOMMONS-3847 | New | E2 | |
| XRENDERING-823 | New | E2 | |
| XWIKI-25444 | New | D4 | |
| CHARTJS-40 | New | C1:$content C1:title C1:type D2 | |
| CHARTJS-41 | New | C2:type C8:cssClass C8:id | |
| CHARTJS-42 | New | C4:type | |
| XWIKI-23045 | Existing | C4:type | |
| XINFRA-525 | New | L2 | |
| XWIKI-25523 | New | E1 | |
| CHARTJS-43 | New | E1 |
Known issues of this macro
| Issue | Title | Status | Criteria |
|---|---|---|---|
| CHARTJS-38 | A blank block is displayed if the content json is malformed | Open | E2 |
68 more known issues affect every macro: see the Known issues.
Lucas Charpentier