Highcharts with pointFormatter function

[rroyer-xyz]

My users have asked to see percentages on a histogram, similar to this

Is there a way, to build a "pointFormatter" function in JustPy? Below is my example code. I've read through the JustPy examples for tooltips, but wasn't sure how to apply them for this use case.

Thanks

import justpy as jp


chart_options = """
    {
        title: {
            text: '',
            visible: false,
        },
        xAxis: [{
            title: {text: ''},
            opposite: false
        }, {
            title: {text: '<b>Answers</b>'},
            opposite: false,    
        }],

        yAxis: [{
            title: {
                text: ''
            },
        }, {
            title: {
                text: '<b>Count<b>'
            },
            opposite: false,
        }],
        credits: {
            enabled : false
        },
        legend: {
            enabled: false        
        },
        exporting: {
            enabled: false
        },    
        plotOptions: {
            histogram: {
            // binWidth: 5
            },
            series: {
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                //    pointFormatter: function () {
                //      var number = ((this.y / numItems) * 100);
                //      return  + Highcharts.numberFormat(number, 1) + ' %</b>';
                //    }
                }
            },
        },
        series: [{
            name: 'Count',
            type: 'histogram',
            xAxis: 1,
            yAxis: 1,
            baseSeries: 's1',
            zIndex: -1,        
        }, {
            name: '',
            type: 'scatter',
            data: [1,1,2,3,4,5,5,6,7,8,9,20,22],
            visible: false,
            id: 's1',
            marker: {
            radius: 0
            }
        }]
    }
    """    

def chart_test():
    wp = jp.WebPage()
    my_chart = jp.HighCharts(a=wp, classes='m-2 p-2 border', style='width: 600px')
    my_chart.options = chart_options
    return wp

jp.justpy(chart_test)

[elimintz]

There is no simple way to do it as python dictionaries that are used to define the chart cannot hold a JavaScript function. Unfortunately, the only way to do this currently is to modify the highcharts.js file (https://github.com/elimintz/justpy/blob/master/justpy/templates/js/chartjp.js) and use it as a template for your own chart component. In the component, you would add the specific JavaScript function you need to the chart definition. In the future, I will try to find a better solution for this.

[elimintz]

There will be a solution for this in the new version. The component will automatically evaluate all formatter fields as if they are a javascript function. The only caveat is that the string representing the function all has to be on one line if the chart options are defined from a string and not a python dictionary (the translation of the string into a python dictionary fails otherwise).

[wy1189]

Can you provide an example of this? I'm wondering how I can use pointFormatter (or any other formatter in Highcharts)

import justpy as jp


chart_options = """
    {
        title: {
            text: '',
            visible: false,
        },
        xAxis: [{
            title: {text: ''},
            opposite: false
        }, {
            title: {text: '<b>Answers</b>'},
            opposite: false,    
        }],

        yAxis: [{
            title: {
                text: ''
            },
        }, {
            title: {
                text: '<b>Count<b>'
            },
            opposite: false,
        }],
        credits: {
            enabled : false
        },
        legend: {
            enabled: false        
        },
        exporting: {
            enabled: false
        },    
        plotOptions: {
            histogram: {
            // binWidth: 5
            },
            series: {
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    pointFormatter: function () {var number = ((this.y / numItems) * 100); return  + Highcharts.numberFormat(number, 1) + ' %</b>';}
                }
            },
        },
        series: [{
            name: 'Count',
            type: 'histogram',
            xAxis: 1,
            yAxis: 1,
            baseSeries: 's1',
            zIndex: -1,        
        }, {
            name: '',
            type: 'scatter',
            data: [1,1,2,3,4,5,5,6,7,8,9,20,22],
            visible: false,
            id: 's1',
            marker: {
            radius: 0
            }
        }]
    }
    """    

def chart_test():
    wp = jp.WebPage()
    my_chart = jp.HighCharts(a=wp, classes='m-2 p-2 border', style='width: 600px')
    my_chart.options = chart_options
    return wp

jp.justpy(chart_test)

I've tried "function () {var number = ((this.y / numItems) * 100); return + Highcharts.numberFormat(number, 1) + ' %</b>';}", and of course, it didn't work.

[Luong2705]

@elimintz ,Is there a solution in the new version?

[WolfgangFahl]

see #685