Chart
Search…
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.
1
{
2
"name" : "Default template", // name of template
3
"id" : 0, // id of template, set it as 0 for new templates
4
"colors" : {
5
"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
6
"progressChart" : ["#e31a1c"], // Must be an array
7
"sparkline" : ["#343434"], // Must be an array
8
"scatterPlot" : ["#1f78b4"], // Must be an array
9
"candlestickChart" : ["#33a02c", "#e31a1c"], // Must be an array
10
"heatmap" : ["#a6cee3"] // Must be an array
11
},
12
"grid" : {
13
"type" : 1, // 0 - without, 1 - full grid, 2 - horizontal lines, 3 - vertical lines
14
"lineWidth" : 1, // line width in px
15
"color" : "#F0F0F0" // color in HEX
16
},
17
"labels" : {
18
"type" : 1, // 0 - without, 1 - X & Y labels, 2 - Y labels, 3 - X labels
19
"fontName" : "Helvetica", // font name as written in Text dropdown
20
"fontStyle" : "Regular", // font style as written in Font style dropdown
21
"textCase" : "ORIGINAL", // "ORIGINAL", "UPPER", "LOWER", "TITLE"
22
"fontSize" : 10, // font size in px
23
"lineHeight" : 10, // line height in px
24
"letterSpacing" : 0, // letter spacing in percents
25
"color" : "#a3a3a3", // color in HEX
26
"yAxisPosition" : "left", // position of Y labels (not implemented yet)
27
"xAxisPosition" : "bottom" // position of x labels (not implemented yet)
28
},
29
"beginAtZero" : 0, // 0 - false, 1 - true
30
"lineType" : 0, // 0 - curved, 1 - straight, 2 - spline
31
"sorting" : 0, // (for pie and donut charts) 0 - desc, 1 - without sorting
32
"typeOfCircle" : 0, // (for pie and donut charts) 0 - full circle, 1 - half of circle
33
"lineChart" : {
34
"lineWidth" : 2, // line width in px
35
"dotType" : 1, // 0 - without dots, 1 - filled dots, 2 - unfilled dots
36
"dotDiameter" : 10 // dot diameter in px
37
},
38
"areaChart" : {
39
"lineWidth" : 0, // if more than 0, area chart will be with line on the top
40
"opacity" : 0.8 // opacity for area's fill
41
},
42
"verticalBarChart" : {
43
"margin" : 0.4, // margin between bars (0...1)
44
"roundTop" : 0, // round top corners of bar
45
"useOneColor" : true // if false, each bar will have it's own color (not implemented yet)
46
},
47
"horizontalBarChart" : {
48
"margin" : 0.4, // margin between bars (0...1)
49
"roundTop" : 0, // round top corners of bar
50
"useOneColor" : true // if false, each bar will have it's own color (not implemented yet)
51
},
52
"groupedBarChart" : {
53
"margin" : 0.4, // margin between groups (0...1)
54
"roundTop" : 0 // round top corners of bar
55
},
56
"groupedHorizontalBarChart" : {
57
"margin" : 0.4, // margin between groups (0...1)
58
"roundTop" : 0 // round top corners of bar
59
},
60
"donutChart" : {
61
"thicknessOfDonut" : 30 // thickness in px
62
},
63
"progressChart" : {
64
"backgroundColor" : "#f7f7f7", // BG of progress bar
65
"thicknessOfProgress" : 10, // thickness of circle progress in px
66
"endOfLine" : 0 // 0 - default, 1 - round
67
},
68
"sparkline" : {
69
"lineWidth" : 1, // line width in px
70
"dotDiameter" : 4 // dot diameter in px
71
},
72
"scatterPlot" : {
73
"dotDiameter" : 8 // dot diameter in px
74
},
75
"candlestickChart" : {
76
"margin" : 0.4, // margin between candles (0...1)
77
"unfilledNegativeBoxes" : false // if true, negative candles will be with border, instead of fill (not implemented yet)
78
},
79
"histogram" : {
80
"margin" : 2 // margin between boxes in px
81
},
82
"heatmap" : {
83
"margin" : 0, // margin between cells in px
84
"segments" : 4 // number of color segments
85
}
86
}
Copied!
Last modified 1yr ago