Skip to main content
The XY chart is a comprehensive charting module that encompasses various types of charts utilizing both x-axis and y-axis for data representation. Currently, it includes bar charts and line charts.

​
Basic example

​
Syntax overview

Single-word text values don’t need quotes. Multi-word values with spaces must be enclosed in quotes.

​
Orientation

Charts can be horizontal or vertical (default): 
xychart horizontal
    ...

​
Title

Add a title to your chart: 
xychart
    title "This is a simple example"
    ...

​
X-axis

The x-axis can be categorical or numeric: Categorical: 
x-axis "title with space" [cat1, "cat2 with space", cat3]
Numeric range: 
x-axis title min --> max

​
Y-axis

The y-axis represents numerical range values: With range: 
y-axis title min --> max
Auto-generated range: 
y-axis title
Both axes are optional. If not provided, ranges will be auto-generated from data.

​
Line chart

Add a line to your chart: 
line [2.3, 45, .98, -3.4]

​
Bar chart

Add bars to your chart: 
bar [2.3, 45, .98, -3.4]

​
Simple example

The minimal chart needs only the chart name and one data set:

​
Multiple data series

Combine multiple lines and bars in one chart:

​
Configuration

ParameterDescriptionDefault
widthWidth of the chart700
heightHeight of the chart500
titlePaddingTop and bottom padding of title10
titleFontSizeTitle font size20
showTitleShow or hide titletrue
chartOrientation’vertical’ or ‘horizontal''vertical’
plotReservedSpacePercentMinimum space plots take50
showDataLabelShow values within barsfalse
ParameterDescriptionDefault
showLabelShow axis labels or tick valuestrue
labelFontSizeFont size of labels14
labelPaddingTop and bottom padding of labels5
showTitleShow axis titletrue
titleFontSizeAxis title font size16
titlePaddingTop and bottom padding of title5
showTickShow tickstrue
tickLengthLength of ticks5
tickWidthWidth of ticks2
showAxisLineShow axis linetrue
axisLineWidthThickness of axis line2

​
Theme variables

Customize chart colors using theme variables:
---
config:
  themeVariables:
    xyChart:
      titleColor: '#ff0000'
---
ParameterDescription
backgroundColorBackground color of the whole chart
titleColorColor of the title text
xAxisLabelColorColor of the x-axis labels
xAxisTitleColorColor of the x-axis title
xAxisTickColorColor of the x-axis tick
xAxisLineColorColor of the x-axis line
yAxisLabelColorColor 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

​
Custom colors

Set colors for lines and bars using plotColorPalette:

​
Complete example

Here’s a comprehensive example with configuration and theming:
Use horizontal orientation for charts with long category names to improve readability.

Build docs developers (and LLMs) love

Get started for freeTalk to us