charts/docs/basic/basic_chart.md

What is it

A chart is generally a 2D rendition of data. For example, for a set of values across items, the data could look like:

data = {
	labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
	datasets: [
		{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
	]
}

Plug that in with a type bar, a color and height,

new frappe.Chart( "#chart", {
    data: data,
    type: 'bar',
    height: 140,
    colors: ['red']
});

And similarly, a line chart:

type:'line'

Tweaks

Axes lines are configurable. By default they are long spanning lines, but can also be short ticks:`

axisOptions: {
	xAxisMode: 'tick' // default: 'span'
},

The bar width can be set by defining the ratio of the space between bars to the bar width.

barOptions: {
	spaceRatio: 0.2 // default: 1
},

So can the dot size on a line graph, with the dotSize property in lineOptions.

lineOptions: {
	dotSize: 8 // default: 4
},

Next up, we’ll discover how multiple datasets can behave in different charts.