Pie

To build a pie chart use: :include-piechart: charts/genres.csv genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50

Bar

To build a bar chart use: :include-barchart: charts/genres.csv genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 Add more columns to CSV data to use multiple bars per X axis tick :include-barchart: charts/game-activities.csv game, walking, fighting, reading Oblivion, 100, 100, 20 Elden Ring, 110, 110, 5 Persona 5, 20, 30, 50 Divinity, 30, 30, 10 Use stack: true to render multiple bars stacked :include-barchart: charts/game-activities.csv {stack: true} Use horizontal: true and height parameter to change render direction :include-barchart: charts/game-activities.csv {stack: true, horizontal: true, height: 250}

Line

To build a line chart use: :include-linechart: charts/genres.csv genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 Use multiple CSV columns to add more lines :include-linechart: charts/daily-genres.csv day, RPG, RTS, FPS Monday, 100, 10, 0 Tuesday, 50, 50, 20 Wednesday, 10, 30, 50 Thursday, 5, 5, 100 Friday, 0, 100, 10 Use numbers in first column to have a regular X, Y plots :include-linechart: charts/competitors.csv x, company one, company two 10, 100, 150 15.5, 110, 145 30, 120, 130 40, 110, 145 50, 115, 100

Time Series

Use time: true to treat X as time series day, RPG 2022-08-01, 100 2022-08-04, 50 2022-08-05, 10 2022-08-08, 5 2022-09-12, 22 :include-linechart: charts/time-series.csv {time: true}

Legend

Use legend: true to add legend to a chart :include-linechart: charts/daily-genres.csv {legend: true}

Wide Mode

Use wide: true to use available horizontal space :include-linechart: charts/daily-genres.csv {wide: true} Use in combination with height to fit larger charts :include-linechart: charts/daily-genres.csv {wide: true, height: 800}

Inlined Data

Use fence block plugin to inline chart data into markdown ```piechart genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 ``` ```linechart {legend: true} day, RPG, RTS, FPS Monday, 100, 10, 0 Tuesday, 50, 50, 20 Wednesday, 10, 30, 50 Thursday, 5, 5, 100 Friday, 0, 100, 10 ``` ```barchart genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 ```

Filtering columns

You can filter for specific columns from a CSV input by using the columns parameter. ```barchart {columns: ["genre", "rating"]} genre, preference, rating RPG, 75, 8 Action, 50, 9 RTS, 40, 1 FPS, 50, 1 ```

Presentation

Charts automatically participate in slides. Each chart becomes an individual slide.Use breakpoint to add extra slides transitions. :include-linechart: charts/competitors.csv { legend: true, breakpoint: [17, 42] } To try it, press on icon next to the Presentation header :include-piechart: charts/genres.csv {breakpoint: "Action"} Use all as breakpoint value to create a slide for each textual entry :include-barchart: charts/genres.csv { legend: true, breakpoint: "all" }

ECharts

Znai uses the beautiful and functional https://echarts.apache.org/ EChart library to render charts.