EJ2 LinearGauge - Label Format does not change values

[Mark]

No matter what, the gauge displays 0, 0.5, 1, 1.5, etc.  We just need 0,1,2,3,4...

var gauge = new ej.lineargauge.LinearGauge({
    orientation: 'Horizontal',
    axes: [{
        minimum: 0,
        maximum: 6,
        line: {
            width: 0
        },
        labelStyle: {
            format: 'n0',
            offset: 20
        },

        majorTicks: {
            height: 0
        },
        minorTicks: {
            height: 0
        },
        pointers: [{
            height: 0,
        }],
        ranges: [
            {
                start: 0,
                end: 2,
                color: '#008000',
                startWidth: 15,
                endWidth: 15
            },
            {
                start: 2,
                end: 6,
                startWidth: 15,
                endWidth: 15,
                color: '#A00000'
            }
        ]
    }],
    annotations: [{
        content: '<div style="width:200px;font-size:18px;">Goal Info</div>',
        axisIndex: 0,
        axisValue: 3,
        y: -50, zIndex: '1'
    }],
});
gauge.appendTo('#goalList');

[Mark]

Any thoughts on this?  We have tried all different formatters, n1, n2,etc and nothing changes the label.  We can do {value}XYZ and but not make it whole numbers only.

[Swetha Babu]

Hi Mark,

Thank you for contacting Syncfusion support.

We have checked your code snippet. We are able to reproduce the reported scenario. In linear gauge, the major ticks and minor ticks get split exactly half the interval between the ticks. In the reported scenario, the ticks get split half the value of ticks. We can split the ticks based on our requirement using the interval property in linear gauge. Please find the below-resolved code snippet for the reported scenario. 

var gauge = new ej.lineargauge.LinearGauge({ 

    orientation: 'Horizontal', 

    axes: [{ 

        minimum: 0, 

        maximum: 6, 

        line: { 

            width: 0 

        }, 

        labelStyle: { 

            format: 'n0', 

            offset: 20 

        }, 

  

        majorTicks: { 

            height: 0, 

            interval: 1 

        }, 

        minorTicks: { 

            height: 0, 

             interval: 1 

        }, 

        pointers: [{ 

            height: 0, 

        }], 

        ranges: [ 

            { 

                start: 0, 

                end: 2, 

                color: '#008000', 

                startWidth: 15, 

                endWidth: 15 

            }, 

            { 

                start: 2, 

                end: 6, 

                startWidth: 15, 

                endWidth: 15, 

                color: '#A00000' 

            } 

        ] 

    }], 

    annotations: [{ 

        content: '<div style="width:200px;font-size:18px;">Goal Info</div>', 

        axisIndex: 0, 

        axisValue: 3, 

        y: -50, zIndex: '1' 

    }], 

}); 

gauge.appendTo('#goalList'); 

In the above code snippet, we have added the "interval" as 1 for the major ticks and minor ticks. Please let us know if the provided code snippet meets your requirement.

Please let us know if you need any further assistance.

Regards,
Swetha Babu