Templates

Template is the config that allows you to control each parameter of Chart.

Why to use templates

Template is the powerful tool to control hidden parameters of Chart, e.g. rounded corners of Bar chart. Another common use case is themes, if you have Light and Dark themes in your product or you have different products with different brand assets — templates are made for you.

What is template

Template is the JSON configuration. By default you always have Default template that could be edited. Below you can find the example of template with comments.

{
	"name" : "Default template", // name of template
	"id" : 0, // id of template, set it as 0 for new templates
	"colors" : {
		"common" : ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"], // common colors are used for all charts except below ones. Must be an array
		"progressChart" : ["#e31a1c"], // Must be an array
		"sparkline" : ["#343434"], // Must be an array
		"scatterPlot" : ["#1f78b4"], // Must be an array
		"candlestickChart" : ["#33a02c", "#e31a1c"], // Must be an array
		"heatmap" : ["#a6cee3"] // Must be an array
	},
	"grid" : {
		"type" : 1, // 0 - without, 1 - full grid, 2 - horizontal lines, 3 - vertical lines
		"lineWidth" : 1,  // line width in px
		"color" : "#F0F0F0" // color in HEX
	},
	"labels" : {
		"type" : 1, // 0 - without, 1 - X & Y labels, 2 - Y labels, 3 - X labels
		"fontName" : "Helvetica", // font name as written in Text dropdown
		"fontStyle" : "Regular", // font style as written in Font style dropdown
		"textCase" : "ORIGINAL", // "ORIGINAL", "UPPER", "LOWER", "TITLE"
		"fontSize" : 10, // font size in px
		"lineHeight" : 10, // line height in px
		"letterSpacing" : 0, // letter spacing in percents
		"color" : "#a3a3a3", // color in HEX
		"yAxisPosition" : "left", // position of Y labels (not implemented yet)
		"xAxisPosition" : "bottom" // position of x labels (not implemented yet)
	},
	"beginAtZero" : 0, // 0 - false, 1 - true
	"lineType" : 0, // 0 - curved, 1 - straight, 2 - spline
	"sorting" : 0, // (for pie and donut charts) 0 - desc, 1 - without sorting
	"typeOfCircle" : 0, // (for pie and donut charts) 0 - full circle, 1 - half of circle
	"lineChart" : {
		"lineWidth" : 2, // line width in px
		"dotType" : 1, // 0 - without dots, 1 - filled dots, 2 - unfilled dots
		"dotDiameter" : 10 // dot diameter in px
	},
	"areaChart" : {
		"lineWidth" : 0, // if more than 0, area chart will be with line on the top
		"opacity" : 0.8 // opacity for area's fill
	},
	"verticalBarChart" : {
		"margin" : 0.4, // margin between bars (0...1)
		"roundTop" : 0, // round top corners of bar 
		"useOneColor" : true // if false, each bar will have it's own color (not implemented yet)
	},
	"horizontalBarChart" : {
		"margin" : 0.4, // margin between bars (0...1)
		"roundTop" : 0, // round top corners of bar 
		"useOneColor" : true // if false, each bar will have it's own color (not implemented yet)
	},
	"groupedBarChart" : {
		"margin" : 0.4, // margin between groups (0...1)
		"roundTop" : 0  // round top corners of bar 
	},
	"groupedHorizontalBarChart" : {
		"margin" : 0.4, // margin between groups (0...1)
		"roundTop" : 0  // round top corners of bar 
	},
	"donutChart" : {
		"thicknessOfDonut" : 30 // thickness in px
	},
	"progressChart" : {
		"backgroundColor" : "#f7f7f7", // BG of progress bar
		"thicknessOfProgress" : 10, // thickness of circle progress in px
		"endOfLine" : 0 // 0 - default, 1 - round
	},
	"sparkline" : {
		"lineWidth" : 1, // line width in px 
		"dotDiameter" : 4 // dot diameter in px
	},
	"scatterPlot" : {
		"dotDiameter" : 8 // dot diameter in px
	},
	"candlestickChart" : {
		"margin" : 0.4, // margin between candles (0...1)
		"unfilledNegativeBoxes" : false // if true, negative candles will be with border, instead of fill (not implemented yet)
	},
	"histogram" : {
		"margin" : 2 // margin between boxes in px
	},
	"heatmap" : {
		"margin" : 0, // margin between cells in px
		"segments" : 4 // number of color segments
	}
}