Charts
XY Chart : Revenue
Revenue
$37,950
-
Closed Amount
-
Revenue Goal
Documentation
Available Parameters
| Parameter | Type | Description |
|---|---|---|
baseId
|
Unique Text
required |
Set Unique Base ID for Chart. |
title
|
Text
required |
Set title of Chart. |
summary
|
Summary Object | Display summary for chart. available attributes : style, value, trendExample: {
|
height
|
Number | Set height for chart in pixels. |
legend
|
Boolean
Default : false
|
Set true value for legend parameter to display chart legend base on series. |
tabs
|
Array of Tab Item | Set list of tabs for card. 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-revenue",
"title" : "Revenue",
"summary" : {
"style" : "chart-summary-style-2",
"value" : "$37,950",
},
"height" : 216,
"legend" : true,
"tabs" : [
{
"text" : "Revenue",
"link" : "javascript:void()",
"class" : "active"
},
{
"text" : "Users",
"link" : "javascript:void()",
},
{
"text" : "Deals",
"link" : "javascript:void()",
},
{
"text" : "Profit",
"link" : "javascript:void()",
},
],
"data" : [
{
"date" : "2023/01/12 08:20",
"closed" : 1470,
"goal" : 1238,
},
{
"date" : "2023/01/12 10:20",
"closed" : 1821,
"goal" : 1438,
},
{
"date" : "2023/01/13 08:20",
"closed" : 1691,
"goal" : 1310,
},
{
"date" : "2023/01/13 10:20",
"closed" : 621,
"goal" : 255,
},
{
"date" : "2023/01/14 08:20",
"closed" : 710,
"goal" : 351,
},
{
"date" : "2023/01/14 10:20",
"closed" : 822,
"goal" : 689,
},
{
"date" : "2023/01/15 08:20",
"closed" : 1470,
"goal" : 1310,
},
{
"date" : "2023/01/15 10:20",
"closed" : 721,
"goal" : 255,
},
{
"date" : "2023/01/16 08:20",
"closed" : 1410,
"goal" : 1280,
},
{
"date" : "2023/01/16 10:20",
"closed" : 1821,
"goal" : 1618,
},
{
"date" : "2023/01/17 08:20",
"closed" : 1903,
"goal" : 1420,
},
{
"date" : "2023/01/17 10:20",
"closed" : 2080,
"goal" : 1575,
},
{
"date" : "2023/01/18 08:20",
"closed" : 1943,
"goal" : 1593,
},
{
"date" : "2023/01/18 10:20",
"closed" : 1123,
"goal" : 987,
},
{
"date" : "2023/01/19 08:20",
"closed" : 1011,
"goal" : 856,
},
{
"date" : "2023/01/19 10:20",
"closed" : 672,
"goal" : 457,
},
{
"date" : "2023/01/20 08:20",
"closed" : 1743,
"goal" : 1613,
},
{
"date" : "2023/01/20 10:20",
"closed" : 1372,
"goal" : 1157,
},
{
"date" : "2023/01/21 08:20",
"closed" : 1490,
"goal" : 1360,
},
{
"date" : "2023/01/21 10:20",
"closed" : 1202,
"goal" : 887,
},
{
"date" : "2023/01/22 08:20",
"closed" : 990,
"goal" : 807,
},
{
"date" : "2023/01/22 10:20",
"closed" : 373,
"goal" : 257,
},
{
"date" : "2023/01/23 08:20",
"closed" : 512,
"goal" : 327,
},
{
"date" : "2023/01/23 10:20",
"closed" : 1102,
"goal" : 987,
},
{
"date" : "2023/01/24 08:20",
"closed" : 912,
"goal" : 717,
},
],
"options" : {
"grid" : {
"left" : 0,
"right" : 0,
},
"xAxis" : {
"dataKey" : "date",
"axisLine" : {
"show" : false,
},
},
"yAxis" : {
"interval" : 500,
"min" : 0,
"max" : 2000,
"axisLine" : {
"show" : false,
},
"splitLine" : {
"show" : false,
},
},
"series" : [
{
"dataKey" : "closed",
"type" : "bar",
"name" : "Closed Amount",
"itemStyle" : {
"borderRadius" : [4, 4, 0, 0],
"color" : "#F9BD29"
},
"barMaxWidth" : 18,
"highlightStyle" : {
"active" : {
"color" : "#F9BD29"
},
"inactive" : {
"color" : "#E6E8EC"
},
}
},
{
"dataKey" : "goal",
"type" : "line",
"smooth" : true,
"symbol" : "circle",
"showSymbol" : true,
"symbolSize" : 6,
"name" : "Revenue Goal",
"itemStyle" : {
"color" : "#1F58D4"
},
"lineStyle" : {
"width" : 2,
"type" : [4, 4],
},
},
],
}
} %}