Charts Label

[Dark Beccio]

HI, in my charts i have xAxis Labels like this {1,2,3,4,5,6 .. 12} from the dataSource.
Since i would like to set 1 = Jan , 2 = Feb and so on,
is it possible to use  xAxis.labels.formatFunction or something similar to do that?
TY
 

[yavordashew]

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/

[Author]

Posts