Charts

Pie Chart : Device Used
Device Used
  • Desktop
  • Tablet
  • Mobile
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"    : "Desktop",
        "color"   : "#1F58D4",
    },
    {
        "name"    : "Tablet",
        "color"   : "#93B1F4",
    },
    {
        "name"    : "Mobile",
        "color"   : "#001F63",
    },
]
action Link Action Object Set action link for chart.
Example:
{
    "text"    : "See Details",
    "link"    : "javascript:void()",
}
data Array of Data Object
required 		Set list of Data item.
Example:
[
    {
        "name"     : "Desktop",
        "value"    : 86,
        "itemStyle"    : {
            "color"    : "#1F58D4"
        },
    }
]
options Options Object
required 		Set Options for chart.
More about options see https://echarts.apache.org/en/option.html
Example:
{
    "series"    : [
        {    
            "startAngle"       : 154,
            "label"            : {
                "show"            : true,
                "position"        : "inside",
                "fontSize"        : 18,
                "formatter"       : "{d}%"
            },
            "itemStyle"        : {
                "borderWidth"    : 2,
            },
        }
    ]
}
Starter Kit Codes
Starter Kit Code 
 {# include charts/pie  #}
 {% include "../../charts/pie.twig", with {
    	"baseId"	: "example-chart-device-used",

	"title"	: "Device Used",

	"height"	: 230,

	"legend"	: [
		{
			"name"	: "Desktop",
			"color"	: "#1F58D4",
		},
		{
			"name"	: "Tablet",
			"color"	: "#93B1F4",
		},
		{
			"name"	: "Mobile",
			"color"	: "#001F63",
		},
	],

	"actions"	: [
		{
			"text"	: "Action 1",
			"link"	: "javascript:void()"
		},
		{
			"text"	: "Action 2",
			"link"	: "javascript:void()"
		},
		{
			"text"	: "Action 3",
			"link"	: "javascript:void()"
		},
	],

	"data"	: [
		{
			"name"	: "Desktop",
			"value"	: 86,
			"itemStyle"	: {
				"color"	: "#1F58D4"
			},
		},
		{
			"name"	: "Tablet",
			"value"	: 30,
			"itemStyle"	: {
				"color"	: "#93B1F4"
			},
		},
		{
			"name"	: "Mobile",
			"value"	: 84,
			"itemStyle"	: {
				"color"	: "#001F63"
			},
		},
	],

	"options"	: {
		"series"	: [
			{	
				"startAngle"	: 154,
				"label"		: {
					"show"		: true,
					"position"		: "inside",
					"fontSize"		: 18,
					"formatter"	: "{d}%"
				},
				"itemStyle"		: {
					"borderWidth"	: 2,
				},
			}
		]
	}
 } %}