Charts
XY Chart : Subscriptions
New Subscriptions
108,080
29.4%
in selected period
Active Subscriptions
$166,098
-0.13%
in selected period
Documentation
Available Parameters
| Parameter | Type | Description |
|---|---|---|
baseId
|
Unique Text
required |
Set Unique Base ID for Chart. |
title
|
Text
required |
Set title of Chart. |
data
|
Array of Data Object
required |
Set list of Data item. Example: [
|
options
|
Options Object
required |
Set Options for chart. required attributes : xAxis.dataKey, series[ { item.dataKey } ]more about options see https://echarts.apache.org/en/option.html Example: {
|
summary
|
Summary Object | Display summary for chart. required attributes : style, value, trend, descriptionExample: {
|
Starter Kit Codes
Starter Kit Code
{# include charts/xy #}
{% include "../../charts/xy.twig", with {
"baseId" : "example-chart-subscriptions-1",
"title" : "New Subscriptions",
"summary" : {
"style" : "chart-summary-style-2",
"value" : "108,080",
"trend" : "<span class=\"trend-up\">29.4%</span>",
"description" : "in selected period"
},
"data" : [
{
"date" : "Jan 12",
"subscriptions" : 402,
},
{
"date" : "Jan 13",
"subscriptions" : 264,
},
{
"date" : "Jan 14",
"subscriptions" : 356,
},
{
"date" : "Jan 15",
"subscriptions" : 238,
},
{
"date" : "Jan 16",
"subscriptions" : 285,
},
{
"date" : "Jan 17",
"subscriptions" : 197,
},
{
"date" : "Jan 18",
"subscriptions" : 367,
},
{
"date" : "Jan 19",
"subscriptions" : 420,
}
],
"options" : {
"grid" : {
"left" : -10,
"right" : -10,
},
"xAxis" : {
"type" : "category",
"dataKey" : "date",
"axisLine" : {
"show" : false,
},
"splitLine" : {
"show" : true,
"alignWithLabel" : true,
"lineStyle" : {
"color" : "#E6E8EC",
},
},
},
"yAxis" : {
"show" : false,
"min" : 0,
"max" : 500,
"axisLabel" : {
"show" : false,
}
},
"tooltip" : {
"axisPointer" : {
"lineStyle" : {
"opacity" : 0,
}
}
},
"series" : [
{
"symbol" : "emptyCircle",
"symbolSize" : 16,
"emphasis" : {
"itemStyle" : {
"color" : "#1F58D4",
"borderColor" : "#fff",
"borderWidth" : 2,
"shadowColor" : "rgba(0, 0, 0, 0.12)",
"shadowBlur" : 16,
"shadowOffsetX" : 0,
"shadowOffsetY" : 4,
}
},
"dataKey" : "subscriptions",
"name" : "New Subscriptions",
"itemStyle" : {
"color" : "rgba(31, 88, 212, 1)"
},
"lineStyle" : {
"color" : "rgba(31, 88, 212, 1)",
"width" : 2,
},
"areaStyle" : {
"color" : "rgba(31, 88, 212, 1)",
"opacity" : 0.08,
},
},
],
}
} %}
Starter Kit Code
{# include charts/xy #}
{% include "../../charts/xy.twig", with {
"baseId" : "example-chart-subscriptions-2",
"title" : "Active Subscriptions",
"summary" : {
"style" : "chart-summary-style-2",
"value" : "$166,098",
"trend" : "<span class=\"trend-down\">-0.13%</span>",
"description" : "in selected period"
},
"data" : [
{
"date" : "Jan 12",
"subscriptions" : 216,
},
{
"date" : "Jan 13",
"subscriptions" : 197,
},
{
"date" : "Jan 14",
"subscriptions" : 132,
},
{
"date" : "Jan 15",
"subscriptions" : 238,
},
{
"date" : "Jan 16",
"subscriptions" : 255,
},
{
"date" : "Jan 17",
"subscriptions" : 197,
},
{
"date" : "Jan 18",
"subscriptions" : 227,
},
{
"date" : "Jan 19",
"subscriptions" : 275,
}
],
"options" : {
"grid" : {
"left" : -10,
"right" : -10,
},
"xAxis" : {
"type" : "category",
"dataKey" : "date",
"axisLine" : {
"show" : false,
},
"splitLine" : {
"show" : true,
"alignWithLabel" : true,
"lineStyle" : {
"color" : "#E6E8EC",
},
},
},
"yAxis" : {
"show" : false,
"min" : 0,
"max" : 500,
"axisLabel" : {
"show" : false,
}
},
"tooltip" : {
"axisPointer" : {
"lineStyle" : {
"opacity" : 0,
}
}
},
"series" : [
{
"symbol" : "emptyCircle",
"symbolSize" : 16,
"emphasis" : {
"itemStyle" : {
"color" : "#1F58D4",
"borderColor" : "#fff",
"borderWidth" : 2,
"shadowColor" : "rgba(0, 0, 0, 0.12)",
"shadowBlur" : 16,
"shadowOffsetX" : 0,
"shadowOffsetY" : 4,
}
},
"dataKey" : "subscriptions",
"name" : "New Subscriptions",
"itemStyle" : {
"color" : "rgba(31, 88, 212, 1)"
},
"lineStyle" : {
"color" : "rgba(31, 88, 212, 1)",
"width" : 2,
},
"areaStyle" : {
"color" : "rgba(31, 88, 212, 1)",
"opacity" : 0.08,
},
},
],
}
} %}