downrunner

Chart

Interactive charts directly in your Markdown with options to edit the chart data and show or hide the Markdown.

Open the optional editor below and edit the rows. Then, click on the chart. Or, try changing “PieChart” to “BarChart”, “ColumnChart”, “LineChart” or “Table”.

{
	type: PieChart,
	columns:[Topping,Slices],
	rows:[
      [Mushrooms, 3],
      [Onions, 1],
      [Olives, 1],
      [Zucchini, 1],
      [Pepperoni, 2]
    ],
	options: {
		title: 'How Much Pizza I Ate Last Night',
		height: 300
	}
}

Below is the source:

Note the title is surrounded by single quotation marks. You must put single quotation marks around values that contain spaces.

If you have a hard time remembering the order of values, you can also use data with named properties label and value.

{
	type: PieChart,
	columns:[Topping,Slices],
	rows:[
      {label: Mushrooms, value:3},
      {label: Onions, value:1},
      {label: Olives, value:1},
      {label: Zucchini, value:1},
      {label: Pepperoni, value:2}
    ],
	options: {
		title: 'How Much Pizza I Ate Last Night',
		height: 300
	}
}

Below is the source:

You can even use the exact (including case) names you assigned in the column definition.

{
	type: PieChart,
	columns:[Topping,Slices],
	rows:[
      {Topping: Mushrooms, Slices: 3},
      {Topping: Onions, Slices: 1},
      {Topping: Olives, Slices: 1},
      {Topping: Zucchini, Slices: 1},
      {Topping: Pepperoni, Slices: 2}
    ],
	options: {
		title: 'How Much Pizza I Ate Last Night',
		height: 300
	}
}

Below is the source: