JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Gantt › Charts Label › Reply To: Charts Label
April 12, 2021 at 12:36 pm
#101694
yavordashew
Member
Hi Dark Beccio,
Yes with the formatFunction is totally doable.
I have prepared a quick code example for you on how to achieve this.
const sampleData = [{ "Date": "1", "Referral": "1391", "SearchPaid": "1158", "SearchNonPaid": "1201", "uid": 0 }, { "Date": "2", "Referral": "1379", "SearchPaid": "1439", "SearchNonPaid": "1015", "uid": 1 }, { "Date": "3", "Referral": "1026", "SearchPaid": "1288", "SearchNonPaid": "1282", "uid": 2 }, { "Date": "4", "Referral": "1497", "SearchPaid": "1063", "SearchNonPaid": "1089", "uid": 3 }, { "Date": "5", "Referral": "1153", "SearchPaid": "1107", "SearchNonPaid": "1051", "uid": 4 }, { "Date": "6", "Referral": "1367", "SearchPaid": "1351", "SearchNonPaid": "1037", "uid": 5 }, ]
window.Smart('#chart', class {
get properties() {
return {
caption: 'Web Site Traffic Analysis',
description: 'Daily unique visitors (stacked)',
showLegend: true,
padding: { left: 5, top: 5, right: 11, bottom: 5 },
titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
dataSource: sampleData,
xAxis: {
dataField: 'Date',
type: 'auto',
baseUnit: 'month',
valuesOnTicks: false,
labels: {
formatFunction: function (value) {
let months = [ 'jan', 'feb' ,'march' , 'april' , 'may' , 'june' , 'july' , 'august' , 'september', 'october' , 'november' , 'december']
return months[value-1]
}
},
// Rest of your Code
//Note that i'm using this demo for base : https://www.htmlelements.com/demos/chart/stacked-line-series/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/