Charts

Donut Chart : Account Analytics
Account Analytics
  • Gross Volume
  • New Costumers
  • Payments
  • New MRR
  • New ARR
  • Churned MRR
  • Untitled Row
Documentation
Available Parameters
Parameter Type Description
baseId Unique Text
required 		Set Unique Base ID for Chart.
title Text
required 		Set title of Chart.
height Number Set height for chart in pixels.
legend Array of Legend Set list of legend for chart.
Example:
[
    {
        "name"     : "Gross Volume",
        "color"    : "#1F58D4",
    }
]
dropdown Dropdown Object Set dropdown filter for chart.
required attributes : text, options
Example:
{
    "text"    : "Nov 5-12",
    "options"    : [
        "Nov 5-12",
        "Nov 13-20",
    ],
}
data Array of Data Object
required 		Set list of Data item.
Example:
[
    {
        "name"     : "Gross Volume",
        "value"    : 20,
        "itemStyle"    : {
            "color"    : "#1F58D4"
        },
    }
]
options Options Object Set Options for chart.
More about options see https://echarts.apache.org/en/option.html
Example:
{
    "series"    : [
        {
            "radius"        : ["75%", "100%"],
            "startAngle"    : 90
        }
    ]
}
Starter Kit Codes
Starter Kit Code 
 {# include charts/pie  #}
 {% include "../../charts/pie.twig", with {
    	"baseId"	: "example-chart-account-analytics",

	"title"	: "Account Analytics",

	"height"	: 203,

	"legend"	: [
		{
			"name"	: "Gross Volume",
			"color"	: "#1F58D4"
		},
		{
			"name"	: "New Costumers",
			"color"	: "#93B1F4"
		},
		{
			"name"	: "Payments",
			"color"	: "#001F63"
		},
		{
			"name"	: "New MRR",
			"color"	: "#04B04B"
		},
		{
			"name"	: "New ARR",
			"color"	: "#F9BD29"
		},
		{
			"name"	: "Churned MRR",
			"color"	: "#F3443E"
		},
		{
			"name"	: "Untitled Row",
			"color"	: "#BEBEBE"
		},
	],

	"dropdown"	: {
		"text"	: "Nov 5-12",
		"options"	: [
			"Nov 5-12",
			"Nov 13-20",
		],
	},

	"data"	: [
		{
			"name"	: "Gross Volume",
			"value"	: 20,
			"itemStyle"	: {
				"color"	: "#1F58D4"
			},
		},
		{
			"name"	: "New Costumers",
			"value"	: 10,
			"itemStyle"	: {
				"color"	: "#93B1F4"
			},
		},
		{
			"name"	: "Payments",
			"value"	: 5,
			"itemStyle"	: {
				"color"	: "#001F63"
			},
		},
		{
			"name"	: "New MRR",
			"value"	: 22,
			"itemStyle"	: {
				"color"	: "#04B04B"
			},
		},
		{
			"name"	: "New ARR",
			"value"	: 42,
			"itemStyle"	: {
				"color"	: "#F9BD29"
			},
		},
		{
			"name"	: "Churned MRR",
			"value"	: 8,
			"itemStyle"	: {
				"color"	: "#F3443E"
			},
		},
		{
			"name"	: "Untitled Row",
			"value"	: 18,
			"itemStyle"	: {
				"color"	: "#BEBEBE"
			},
		},
	],

	"options"	: {
		"series"	: [
			{
				"radius"		: ["75%", "100%"],
				"startAngle"	: 90
			}
		]
	}
 } %}