Pie

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

Bar

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

Line

To build a line chart use: genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 Use multiple CSV columns to add more lines 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 x, company one, company two 10, 100, 150 15.5, 110, 145 30, 120, 130 40, 110, 145 50, 115, 100 :include-linechart: charts/genres.csv genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 :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 :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 to treat as time series time: true X 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 to add legend to a chart day, RPG, RTS, FPS Monday, 100, 10, 0 Tuesday, 50, 50, 20 Wednesday, 10, 30, 50 Thursday, 5, 5, 100 Friday, 0, 100, 10 legend: true :include-linechart: charts/daily-genres.csv {legend: true}

Wide Mode

Use to use available horizontal space 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 in combination with height to fit larger charts day, RPG, RTS, FPS Monday, 100, 10, 0 Tuesday, 50, 50, 20 Wednesday, 10, 30, 50 Thursday, 5, 5, 100 Friday, 0, 100, 10 wide: true :include-linechart: charts/daily-genres.csv {wide: true} :include-linechart: charts/daily-genres.csv {wide: true, height: 800}

Inlined Data

Use fence block plugin to inline chart data into markdown genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 day, RPG, RTS, FPS Monday, 100, 10, 0 Tuesday, 50, 50, 20 Wednesday, 10, 30, 50 Thursday, 5, 5, 100 Friday, 0, 100, 10 genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 ```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 parameter. genre, preference, rating RPG, 75, 8 Action, 50, 9 RTS, 40, 1 FPS, 50, 1 columns ```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 to add extra slides transitions. x, company one, company two 10, 100, 150 15.5, 110, 145 30, 120, 130 40, 110, 145 50, 115, 100 To try it, press on icon next to the Presentation header genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 Use as breakpoint value to create a slide for each textual entry genre, preference RPG, 75 Action, 50 RTS, 40 FPS, 50 breakpoint :include-linechart: charts/competitors.csv { legend: true, breakpoint: [17, 42] } :include-piechart: charts/genres.csv {breakpoint: "Action"} all :include-barchart: charts/genres.csv { legend: true, breakpoint: "all" }

ECharts

uses the beautiful and functional EChart library to render charts. Znai