XY chart
An XY chart is a comprehensive charting module: a chart that uses the x-axis and y-axis for data representation
Example
Copy
Embed
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
All text values containing only a single word can be written without double quotes. If a text value contains multiple words, especially spaces, it needs to be enclosed in double quotes.
Direction
The chart can be drawn horizontally or vertically; the default is vertical.
Copy
Embed
xychart-beta horizontal
...
Title
The title is a short description of the chart, and it is always rendered at the top of the chart.
Example
Copy
Embed
xychart-beta
title "This is a simple example"
...
x-axis
The x-axis mainly represents categorical values, although it can also be used as a numeric range.
Example
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y-axis
The y-axis is used to represent a numeric range; it cannot have categorical values.
Example
- y-axis title min --> max
- It only adds a title; the range is generated automatically based on the data
Line chart
A line chart provides the ability to display lines graphically.
Example
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Bar chart
A bar chart is able to display bars graphically.
Example
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Simple example
The only two elements required are the chart name xychart and one data set. Therefore, you will be able to draw the chart using a simple configuration.
Copy
Embed
xychart-beta
line [+1.3, .6, 2.4, -.34]
Chart configuration
| Parameter | Description | Default value |
|---|---|---|
| width | Chart width | 700 |
| height | Chart height | 500 |
| titlePadding | The top and bottom padding of the title | 10 |
| titleFontSize | Title font size | 20 |
| showTitle | Whether the title is displayed | true |
| xAxis | x-axis configuration | AxisConfig |
| yAxis | y-axis configuration | AxisConfig |
| plotReservedSpacePercent | The minimum percentage of space occupied by each shape in the chart | 50 |
| showDataLabel | Whether to display the corresponding value inside the bar | false |
AxisConfig
| Parameter | Description | Default value |
|---|---|---|
| showLabel | Whether to display axis labels or tick values | true |
| labelFontSize | The font size of the labels to be drawn | 14 |
| labelPadding | The top and bottom spacing of the labels | 5 |
| showTitle | Whether to display the axis title | true |
| titleFontSize | Axis title font size | 16 |
| titlePadding | The top and bottom spacing of the axis title | 5 |
| showTick | Whether to display ticks | true |
| tickLength | Tick length | 5 |
| tickWidth | Tick width | 2 |
| showAxisLine | Whether the axis line is displayed | true |
| axisLineWidth | Axis line thickness | 2 |
Chart theme variables
The theme of xychart is located in the xychart property and can be customized with the following syntax:
Copy
Embed
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Description |
|---|---|
| backgroundColor | The background color of the entire chart |
| titleColor | The color of the title text |
| xAxisLabelColor | The color of the x-axis labels |
| xAxisTitleColor | The color of the x-axis title |
| xAxisTickColor | The color of the x-axis ticks |
| xAxisLineColor | The color of the x-axis line |
| yAxisLabelColor | The color of the y-axis labels |
| yAxisTitleColor | The color of the y-axis title |
| yAxisTickColor | The color of the y-axis ticks |
| yAxisLineColor | The color of the y-axis line |
| plotColorPalette | It can be customized with the following syntax, for example "#f3456, #43445" |
Configuration and theme example
Copy
Embed
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
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]
