NativeScript / ui-kit

Various UI plugins including SwiftUI, Jetpack Compose, Flutter, Ionic Portals, HighCharts and more.
Apache License 2.0
11 stars 4 forks source link

Version 0.4.0 break pie chart #2

Open cjohn001 opened 1 year ago

cjohn001 commented 1 year ago

Just had a look at the new version. It breaks quite a couple of charts. For example the pie chart given below is completely broken:

private _chartOptions: any = {
        chart: {
            type: 'pie',
            backgroundColor: 'rgba(0,0,0,0)',
            options3d: {
                enabled: true,
                alpha: 65,
                beta: 0
            },
            marginTop: 0,
            marginBottom: 15,
            marginLeft: 15,
            marginRight: 15
        },
        tooltip: {
            // headerFormat: '',
            valueSuffix: ' %',
            shared: false,
            followTouchMove: false
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            y: 8,
            floating: true,
            enabled: true,
            itemStyle: {
                color: '#6E6E6E',
                fontSize: '12px',
                fontWeight: 'normal'
            },
            useHTML: true,
            // tslint:disable-next-line: quotemark
            labelFormatter: "function () {return '<span>' + this.name + '</span>';}"
        },

        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        title: {
            text: '',
            floating: true,
            style: {
                color: '#377576',
                fontSize: '14px',
                fontWeight: 'bold'
            }
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    distance: 10,
                    formatter:
                        // tslint:disable-next-line: quotemark
                        "function () { return '<span style=\"font-size:12px; color:#6E6E6E;margin-bottom:20px; font-weight: normal;\">' + this.y + '%</span>';}"
                },
                allowPointSelect: false,
                depth: 15,
                showInLegend: true
            }
        },
        series: [
            {
                type: 'pie',
                name: '',
                enableMouseTracking: true,
                keys: ['name', 'y', 'color'],
                data: [
                    ['Dietary Fiber', 33.3, '#e4b601'],
                    ['Sugar', 33.3, '#e63e11'],
                    ['Other', 33.3, '#85bb2f']
                ]
            }
        ]
    };

@NathanWalker : Unfortunately, I cannot see the old source code in the repo. Have you updated the underlaying highcharts library? I mean than issues might also arise from changed highcharts interfaces.

NathanWalker commented 1 year ago

@cjohn001 thats same as this I believe: https://github.com/NativeScript/ui-kit/issues/1 it uses latest highcharts so could be adjustment in data needed. The source is here now for better maintainability: https://github.com/NativeScript/ui-kit/tree/main/packages/ui-charts