Mermaid bar chart examples

Mermaid bar chart syntax, statement by statement

Mermaid has no separate barChart type. Bar charts and line charts are both plots inside the XY chart, which Mermaid’s documentation describes as a module for charts with an x-axis and a y-axis. The keyword is xychart-beta; since Mermaid 11.10.0 the plain xychart is accepted as well, and 11.16 takes either. The optional horizontal word after the keyword flips the orientation.

Everything after the keyword is optional except one data set: Mermaid’s own minimal example is xychart followed by a single line [...]. In practice you want all of the statements below.

How do you set bar colours, size and labels?

Configuration goes in a YAML block between --- lines at the top of the diagram, as in the data-label and colour examples. Sizing and labels live under config: xyChart; colours are theme variables and live under config: themeVariables: xyChart. The options below are the ones Mermaid documents for the XY chart.

Bars take their colours from plotColorPalette in plot order, so a bar series followed by a line series uses the first and second colours. Set the palette explicitly when the chart has to look the same everywhere: each Mermaid theme ships its own default palette, and the first colour of the neutral theme is #EEE, which is why the plain examples above render in light grey on this page. Mermaid draws every bar series across the full width of its category, which means a second bar statement is painted over the first rather than next to it; for a side-by-side comparison use bars for one series and a line for the other, or draw two charts.

Which platforms render a Mermaid bar chart?

The XY chart arrived in Mermaid 10.6.0, so it is younger than the pie chart or Gantt chart and fails on a renderer older than that. The optional parts matter more: data labels need 11.14.0, label rotation and per-point line labels need 11.16.0, and the xychart keyword without -beta needs 11.10.0. Write xychart-beta if the chart has to work on a platform whose version you do not control.

GitHub renders mermaid blocks in issues, pull requests, discussions, wikis and Markdown files, and its documentation suggests rendering the one-word info diagram to see which Mermaid version it runs; the Mermaid in Markdown page shows that check and how GitLab, Obsidian, Notion and VS Code differ. To publish a chart outside those platforms, paste the Markdown into the Docs MD editor and share the link, or convert the document to PDF.

Bar chart, pie chart or Gantt chart?

Use a bar chart to compare amounts across categories or to show how one measure changes over a handful of periods; the vertical form suits time on the x-axis, the horizontal form suits long category names. A pie chart only works for parts of one whole, and a Gantt chart is for tasks with start and end dates rather than values. For many points over a continuous range, a line plot reads better than bars.

Keep the data small. Mermaid charts are drawn from text in a document, not from a spreadsheet, so a chart with more than a dozen categories or more than three plots becomes hard to maintain and hard to read; split it or summarise. The hub of Mermaid examples compares every chart type Docs MD covers.

Is the Mermaid bar chart keyword xychart or xychart-beta?

Both work in Mermaid 11.16. The chart was introduced in 10.6.0 as xychart-beta; the -beta suffix was dropped from the documentation in 11.10.0, and the parser has accepted either spelling since then. Use xychart-beta when the chart must render on a platform whose Mermaid version you cannot check, because versions between 10.6.0 and 11.9 only recognise that form.

Can a Mermaid bar chart show negative values?

Yes. Mermaid’s documentation says both bar and line accept any valid numeric value, and the numeric-axis example above plots negative temperatures. Set the y-axis range so it includes the lowest value, for example y-axis "Degrees C" -5 --> 30; if you leave the range off, Mermaid derives it from the data.

How do I show the numbers on the bars?

Add a config block at the top of the diagram with xyChart: showDataLabel: true. The value is printed inside each bar; add showDataLabelOutsideBar: true to print it above the bar instead. Both options were added in Mermaid 11.14.0, so on an older renderer the chart draws without labels or fails on the unknown option.

Can I draw two bar series side by side in Mermaid?

Not as grouped bars. Each bar statement is drawn across the full width of its category, so a second series is painted over the first and hides it where it is shorter. Mermaid’s documentation shows multiple bars and lines in one chart for colour demonstrations, but for a readable comparison pair a bar series with a line series, as the revenue example does, or use two charts.

Why does my Mermaid bar chart not render?

Check the keyword first: xychart-beta works everywhere the chart exists, xychart only from 11.10.0. Then check quoting: categories and titles with spaces must be in double quotes. Make sure every bar or line has the same number of values as there are categories, and that the config block, if any, uses xyChart with a capital C. Finally confirm the platform runs Mermaid 10.6.0 or later with the info diagram.