jqxChart valueaxis deimal places not working

[rbmanian75Participant]

Hi,
I have this code

export class AppComponent implements AfterViewInit {

    @ViewChild('chartReference') myChart: jqxChartComponent;

    ngAfterViewInit(): void {
        this.myChart.createWidget(this.settings);
    }

    sgcData = [{ "HrchyLevel1Code": "1", "HrchyLevel1Descr": "Acções", "LY_NavPC": 10428985.2053, "LY_Weight": 84.505300897500, "LD_NavPC": 10555769.4933, "LD_Weight": 86.312492702400, "LY_Date": "2015-12-31", "LD_Date": "2016-11-08" }, { "HrchyLevel1Code": "2", "HrchyLevel1Descr": "Obrigações", "LY_NavPC": 445287.0200, "LY_Weight": 3.608128007700, "LD_NavPC": 366318.6400, "LD_Weight": 2.995316917600, "LY_Date": "2015-12-31", "LD_Date": "2016-11-08" }, { "HrchyLevel1Code": "3", "HrchyLevel1Descr": "Fundos", "LY_NavPC": 55580.0000, "LY_Weight": 0.450360656500, "LD_NavPC": 52144.5000, "LD_Weight": 0.426375526500, "LY_Date": "2015-12-31", "LD_Date": "2016-11-08" }, { "HrchyLevel1Code": "4", "HrchyLevel1Descr": "Imóveis", "LY_NavPC": 1700000.0000, "LY_Weight": 13.774975100500, "LD_NavPC": 1700000.0000, "LD_Weight": 13.900572354100, "LY_Date": "2015-12-31", "LD_Date": "2016-11-08" }, { "HrchyLevel1Code": "6", "HrchyLevel1Descr": "Liquidez", "LY_NavPC": -288632.0977, "LY_Weight": -2.338764681700, "LD_NavPC": -444520.3815, "LD_Weight": -3.634757485900, "LY_Date": "2015-12-31", "LD_Date": "2016-11-08" }];

    sampleData = [
        { Day: 'Monday', Keith: 30.50, Erica: 15, George: 25 },
        { Day: 'Tuesday', Keith: 25.50, Erica: 25, George: 30 },
        { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
        { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
        { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
        { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
        { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
    ];
    settings: jqwidgets.ChartOptions = {
        title: "Fitness & exercise weekly scorecard",
        description: "Time spent in vigorous exercise",
        enableAnimations: true,
        showLegend: true,
        padding: { left: 5, top: 5, right: 5, bottom: 5 },
        titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
        source: this.sgcData,
        xAxis:
        {
            dataField: 'HrchyLevel1Descr',
            gridLines: {
                visible: true
            }
        },
        colorScheme: 'scheme01',
        seriesGroups:
        [
            {
                type: 'column',
                columnsGapPercent: 50,
                seriesGapPercent: 0,
                valueAxis:
                {

                    labels: {
                        visible: true,
                        angle: 0,
                        formatSettings: { decimalPlaces: 0, sufix: '%' }
                    },
                    unitInterval: 10,
                    minValue: -10,
                    maxValue: 100,
                    displayValueAxis: true,
                    description: 'Time in minutes',
                    axisSize: 'auto',
                    tickMarksColor: '#888888',                    
                },
                series: [
                    { dataField: 'LY_Weight', displayText: "LY" },
                    { dataField: 'LD_Weight', displayText: "LD" },
                ]
            }
        ]
    }
}

In the value axis i have specified decimalplaces as 0. But when the chart is displayed the value axis labels are displayed with 2 decimals.

Is there anyway to fix this.

[Ivo ZhulevParticipant]

Hi rbmanian75,

Just use this:

formatFunction: (val: number) =>
{
    return val + '%';
}

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[rbmanian75Participant]

Fine. This solved my issue. Thanks

[Author]

Posts