Charts
XY Chart : Gross Revenue
Gross Revenue
$764.39
5.56%
-
Jan
-
Dec
- $113.86
- $791.64
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. |
dropdown
|
Dropdown Object | Set dropdown filter for chart. required attributes : text, optionsExample: {
|
summary
|
Summary Object | Display summary for chart. available attributes : style, value, trendExample: {
|
legend
|
Boolean
Default : false
|
Set true value for legend parameter to display chart legend base on series. |
numbers
|
Array of Number Item | Set list of numbers for chart. Example: [
|
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: {
|
Starter Kit Codes
Starter Kit Code
{# include charts/xy #}
{% include "../../charts/xy.twig", with {
"baseId" : "example-chart-gross-revenue",
"title" : "Gross Revenue",
"height" : 218,
"dropdown" : {
"text" : "January",
"options" : [
"January",
"December",
],
},
"summary" : {
"style" : "chart-summary-style-2",
"value" : "$764.39",
"trend" : "<span class=\"trend-up\">5.56%</span>",
},
"legend" : true,
"numbers" : [
{
"label" : "Online Store",
"value" : "$113.86",
},
{
"label" : "Point of sale",
"value" : "$791.64",
},
],
"data" : [
{
"date" : "Jan 12",
"jan" : 130,
"dec" : 73,
},
{
"date" : "Jan 13",
"jan" : 113,
"dec" : 97,
},
{
"date" : "Jan 14",
"jan" : 152,
"dec" : 55,
},
{
"date" : "Jan 15",
"jan" : 106,
"dec" : 119,
},
{
"date" : "Jan 16",
"jan" : 162,
"dec" : 85,
},
{
"date" : "Jan 17",
"jan" : 125,
"dec" : 90,
},
{
"date" : "Jan 18",
"jan" : 137,
"dec" : 46,
},
{
"date" : "Jan 19",
"jan" : 121,
"dec" : 100,
},
{
"date" : "Jan 20",
"jan" : 162,
"dec" : 87,
},
{
"date" : "Jan 21",
"jan" : 130,
"dec" : 100,
},
{
"date" : "Jan 22",
"jan" : 155,
"dec" : 86,
},
{
"date" : "Jan 23",
"jan" : 123,
"dec" : 50,
},
{
"date" : "Jan 24",
"jan" : 133,
"dec" : 98,
},
{
"date" : "Jan 25",
"jan" : 112,
"dec" : 105,
}
],
"options" : {
"xAxis" : {
"type" : "category",
"dataKey" : "date",
"splitLine": {
"show" : true,
"alignWithLabel" : true,
"lineStyle" : {
"color" : "#E6E8EC",
},
},
},
"yAxis" : {
"min" : 0,
"max" : 200,
},
"series" : [
{
"dataKey" : "jan",
"type" : "line",
"smooth" : true,
"name" : "Jan",
"itemStyle" : {
"color": "#F9BD29"
},
},
{
"dataKey" : "dec",
"type" : "line",
"smooth" : true,
"name" : "Dec",
"itemStyle" : {
"color": "#1F58D4"
},
},
],
}
} %}