Chart

The Chart area displays data as a chart in your publication. You can use it for line graphs, bar charts, pie charts and other chart types. The chart is configured in the JSON Content field using Chart.js settings.

Adding a chart

1. Create a new ChartJS Chart area from the Advanced group in the area menu.
2. Open the Settings tab.
3. Enter the chart configuration in JSON Content.
4. Click outside the field to apply the configuration.
5. Open the Styling tab to adjust the chart's width, height and position.

The Chart area uses a configuration editor, so you will need to enter the labels, values and chart options as text.

Creating a chart with AI

You can use an AI assistant that accepts images to help create the configuration. Upload an image of the chart you want to recreate, then copy the prompt below. If you have the original data, include it with the image for a more accurate result.

Prompt:

Recreate the chart in the supplied image as a Chart.js configuration for an H5mag Chart area. Match the chart type, labels, dataset names, colours, axes, legend and number formatting as closely as possible. Use any original data I supply. If values cannot be read accurately from the image, ask me for the data before generating the final configuration; do not invent values.

Return two separate, clearly labelled code blocks:

1. Chart JSON: valid JSON that I can paste directly into H5mag's JSON Content field. Use double quotes, with no comments, trailing commas or inline JavaScript functions. For every option requiring a function, use a quoted reference beginning with window., such as "window.chartHelpers.formatValue". Use dot-separated paths, without parentheses or slashes.
2. JavaScript functions: all functions referenced by the JSON, assigned to the exact matching window paths. Initialise any namespace without overwriting existing functions, for example window.chartHelpers = window.chartHelpers || {};. Include any helper functions they depend on. This block will go into the article or edition JavaScript Load script, so supply plain JavaScript without script tags. Do not put JavaScript in CSS.

Use Chart.js 4.5.1 configuration. H5mag loads these plugins automatically:

• chartjs-plugin-datalabels: configure data labels through options.plugins.datalabels.
• chartjs-plugin-annotation: configure annotations through options.plugins.annotation.

H5mag also loads chartjs-adapter-date-fns for date and time scales. Use only these extensions and Chart.js's built-in features; do not add other plugins or library imports. Do not create a canvas, register plugins or call new Chart(); H5mag handles this. If no functions are needed, say so instead of generating an unnecessary JavaScript block. Briefly list any details that could not be reproduced from the image.

Using the AI result

1. Check the generated labels and values against your original data.
2. If the result includes functions, add the separate JavaScript block to the article's Load script under Scripting. Use the edition's Load script if you want to reuse the functions across several articles.
3. Paste only the Chart JSON block into JSON Content, then click outside the field.
4. Preview the article and compare the chart with the image. Check it on each artboard.

Custom functions

JSON cannot contain functions directly. H5mag can link a quoted window reference to a function defined in your custom JavaScript. The names must match exactly, and the functions must be available when the chart renders.

For example, an axis tick callback in the Chart JSON can use:

"callback": "window.chartHelpers.formatValue"

The separate JavaScript block would contain:

window.chartHelpers = window.chartHelpers || {};
window.chartHelpers.formatValue = function(value) {
  return value + " visitors";
};

Add this block to the article or edition JavaScript Load script, not to the CSS editor. If a callback needs Chart.js's this context, use a normal function rather than an arrow function.

Example: a bar chart

Copy the following configuration into JSON Content to create a simple bar chart:

{
  "type": "bar",
  "data": {
    "labels": ["January", "February", "March", "April"],
    "datasets": [
      {
        "label": "Visitors",
        "data": [120, 180, 150, 240],
        "backgroundColor": "#2C9C95"
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true
      }
    },
    "plugins": {
      "datalabels": {
        "display": false
      }
    }
  }
}

Changing the data

The labels list contains the names shown along the chart. The data list contains the corresponding values, in the same order. In the example, January has a value of 120 and February has a value of 180.

The dataset label is the name shown in the legend. To compare several series, add more objects to the datasets list, each with its own label, data and colours.

Keep the number and order of the values consistent with the labels.

Chart types and appearance

Change type to choose the chart type. Common values include bar, line, pie and doughnut. Different chart types may need different options. For example, a pie chart does not use the horizontal and vertical axes from the bar chart example.

Use backgroundColor to set the fill colour and borderColor to set the line or border colour. For a pie or doughnut chart, you can provide a list of colours to give each segment its own colour.

The options section controls settings such as axes, the legend, tooltips and animation. Data labels are also supported; the example turns them off to keep the chart uncluttered.

See the Chart.js documentation for more chart types and configuration examples: Chart.js documentation

Sizing and responsive artboards

Use the Styling tab to size and position the Chart area. Set both width and height when you want a specific shape. When only one dimension is set, the chart can use its aspect ratio to determine the other.

Check the chart on each artboard. Leave enough room for labels and the legend, especially on mobile. If needed, place a Heading or Text area next to the chart to explain the data and its source.

Troubleshooting

If the chart does not appear, check that the configuration is valid JSON and that the chosen chart type supports the options you entered. Use double quotes around text, separate items with commas, and check that all brackets are closed. Read any error message shown after leaving the field, correct the configuration and try again.