Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101692
    Dark Beccio
    Member
    Up
    0
    Down

    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
     

    #101694
    yavordashew
    Member
    Up
    0
    Down

    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/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.