# Templates

### 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.

```javascript
{
	"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
	}
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pavel-kuligin.gitbook.io/chart/templates.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.