Charts

Progress Chart : Company Growth
Company Growth
43% Growth
  • 2022
    $602.10
  • 2023
    $602.10
Documentation
Available Parameters
Parameter Type Description
baseId Unique Text
required 		Set Unique Base ID for Chart.
title Text
required 		Set title of Chart.
type Text Set chart type. Set default or "progress".
progressDetails Progress Details Object Set progress details for chart type "progress".
Example:
{
    "name"    : "Company Growth",
    "value"   : 43,
    "unit"    : "Growth",
    "color"   : "#F9BD29",
}
height Number Set height for chart in pixels.
legend Array of Legend Set list of legend for chart.
Example:
[
    {
        "icon"    : "<i class=\"ic ic-trend-up white\"></i>",
        "name"    : "2022",
        "value"   : "$602.10",
        "color"   : "#1F58D4",
    }
]
dropdown Dropdown Object Set dropdown filter for chart.
required attributes : text, options
Example:
{
    "text"    : "2023",
    "options"    : [
        "2023",
        "2022",
    ],
}
options Options Object Set Options for chart.
More about options see https://echarts.apache.org/en/option.html
Starter Kit Codes
Starter Kit Code 
 {# include charts/pie  #}
 {% include "../../charts/pie.twig", with {
    	"baseId"	: "example-chart-company-growth",

	"title"	: "Company Growth",

	"type"	: "progress",

	"height"	: 203,

	"progressDetails"	: {
		"name"	: "Company Growth",
		"value"	: 43,
		"unit"	: "Growth",
		"color"	: "#F9BD29",
	},

	"legend"	: [
		{
			"icon"	: "<i class=\"ic ic-trend-up white\"></i>",
			"name"	: "2022",
			"value"	: "$602.10",
			"color"	: "#1F58D4",
		},
		{
			"icon"	: "<i class=\"ic ic-trend-up white\"></i>",
			"name"	: "2023",
			"value"	: "$602.10",
			"color"	: "#93B1F4",
		},
	],

	"legendStyle"	: "chart-legend-company-growth",

	"dropdown"		: {
		"text"	: "2023",
		"options"	: [
			"2023",
			"2022",
		],
	}
 } %}