Skip to content

XY Chart

In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.

It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.

Example

Code:
mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Syntax

INFO

All text values that contain only one word can be written without ". If a text value has many words in it, specifically if it contains spaces, enclose the value in "

Orientations

The chart can be drawn horizontal or vertical, default value is vertical.

xychart-beta horizontal
...

Title

The title is a short description of the chart and it will always render on top of the chart.

Example

xychart-beta
    title "This is a simple example"
    ...

INFO

If the title is a single word one no need to use ", but if it has space " is needed

x-axis

The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.

Example

  1. x-axis title min --> max x-axis will function as numeric with the given range
  2. x-axis "title with space" [cat1, "cat2 with space", cat3] x-axis if categorical, categories are text type

y-axis

The y-axis is employed to represent numerical range values, it cannot have categorical values.

Example

  1. y-axis title min --> max
  2. y-axis title it will only add the title, the range will be auto generated from data.

INFO

Both x and y axis are optional if not provided we will try to create the range

Line chart

A line chart offers the capability to graphically depict lines.

Example

  1. line [2.3, 45, .98, -3.4] it can have all valid numeric values.

Bar chart

A bar chart offers the capability to graphically depict bars.

Example

  1. bar [2.3, 45, .98, -3.4] it can have all valid numeric values.

Simplest example

The only two things required are the chart name (xychart-beta) and one data set. So you will be able to draw a chart with a simple config like

xychart-beta
    line [+1.3, .6, 2.4, -.34]

Chart Configurations

ParameterDescriptionDefault value
widthWidth of the chart700
heightHeight of the chart500
titlePaddingTop and Bottom padding of the title10
titleFontSizeTitle font size20
showTitleTitle to be shown or nottrue
xAxisxAxis configurationAxisConfig
yAxisyAxis configurationAxisConfig
chartOrientation'vertical' or 'horizontal''vertical'
plotReservedSpacePercentMinimum space plots will take inside the chart50

AxisConfig

ParameterDescriptionDefault value
showLabelShow axis labels or tick valuestrue
labelFontSizeFont size of the label to be drawn14
labelPaddingTop and Bottom padding of the label5
showTitleAxis title to be shown or nottrue
titleFontSizeAxis title font size16
titlePaddingTop and Bottom padding of Axis title5
showTickTick to be shown or nottrue
tickLengthHow long the tick will be5
tickWidthHow width the tick will be2
showAxisLineAxis line to be shown or nottrue
axisLineWidthThickness of the axis line2

Chart Theme Variables

INFO

Themes for xychart resides inside xychart attribute so to set the variables use this syntax %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%

ParameterDescription
backgroundColorBackground color of the whole chart
titleColorColor of the Title text
xAxisLableColorColor of the x-axis labels
xAxisTitleColorColor of the x-axis title
xAxisTickColorColor of the x-axis tick
xAxisLineColorColor of the x-axis line
yAxisLableColorColor of the y-axis labels
yAxisTitleColorColor of the y-axis title
yAxisTickColorColor of the y-axis tick
yAxisLineColorColor of the y-axis line
plotColorPaletteString of colors separated by comma e.g. "#f3456, #43445"

Example on config and theme

Code:
mermaid
---
config:
    xyChart:
        width: 900
        height: 600
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
---
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]