Charts
XY Chart : Total Revenue
Total Revenue
-
2022
-
2023
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
|
Boolean
Default : false
|
Set true value for legend parameter to display chart legend base on series. |
actions
|
Array of Action Item | Set list of actions 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-total-revenue",
"title" : "Total Revenue",
"height" : 260,
"legend" : true,
"actions" : [
{
"text" : "Action 1",
"link" : "javascript:void()"
},
{
"text" : "Action 2",
"link" : "javascript:void()"
},
{
"text" : "Action 3",
"link" : "javascript:void()"
},
],
"data" : [
{
"month" : "Jan",
"2022" : -12,
"2023" : 28,
},
{
"month" : "Feb",
"2022" : -8,
"2023" : 28,
},
{
"month" : "Mar",
"2022" : -17,
"2023" : 20,
},
{
"month" : "Apr",
"2022" : -11,
"2023" : 12,
},
{
"month" : "May",
"2022" : -15,
"2023" : 16,
},
{
"month" : "Jun",
"2022" : -7,
"2023" : 27,
},
{
"month" : "Jul",
"2022" : -17,
"2023" : 22,
},
{
"month" : "Aug",
"2022" : -12,
"2023" : 18,
},
{
"month" : "Sep",
"2022" : -5,
"2023" : 11,
},
{
"month" : "Oct",
"2022" : -15,
"2023" : 24,
},
{
"month" : "Nov",
"2022" : -3,
"2023" : 18,
},
{
"month" : "Dec",
"2022" : -4,
"2023" : 12,
}
],
"options" : {
"grid" : {
"left" : 0,
"right" : 0,
},
"xAxis" : {
"type" : "category",
"dataKey" : "month",
},
"yAxis" : {
"interval" : 10,
"min" : -20,
"max" : 30,
},
"series" : [
{
"dataKey" : "2022",
"type" : "bar",
"stack" : "total",
"name" : "2022",
"itemStyle" : {
"borderRadius" : 12,
"color" : "#93B1F4"
},
"barMaxWidth" : 16,
"tooltip" : {
"show": false
},
},
{
"dataKey" : "2023",
"type" : "bar",
"stack" : "total",
"name" : "2023",
"itemStyle" : {
"borderRadius" : 12,
"color" : "#1F58D4"
},
"barMaxWidth" : 16,
},
],
}
} %}