Hi Wasim,

OutSystems Charts uses Highcharts at its core, so everything possible in Highcharts is possible with OutSystems (with a little or a lot of fiddling). On the Highcharts examples page there's a lot of chart types, but I can't find one that's exactly like the one you have there; but perhaps there's some other that you can use.

This example looks a lot like what you need, so maybe that's a good starting point.

Wasim Khan wrote:

Hi wasim Khan,i think this will work

Below is the json code for that chart and you have to import json files.

"$(function(){
Highcharts.setOptions({
    colors: ['#131F53', '#C90B6E']
});
$('.chart').highcharts({
    chart:{
        type:'solidgauge',
        height:'75%',
       
        },
 tooltip: {
   
        enabled:true,
        borderWidth: 0,
        backgroundColor: 'none',
        shadow: false,
        borderRadius:'10',
     
        style: {
            fontSize: '12px',
            color:'black',
           
        },

 },
 pane: {
        startAngle: 80,
        endAngle:550,
        background: [{
            outerRadius: '87%',
            innerRadius: '63%',
            backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[3])
                .setOpacity(0)
                .get(),
            borderWidth: 0
        },]
    },

    yAxis: {
        min:0,
        max: " + GetAmounts.List.Current.TotalSum + ",
        lineWidth: 0,
        tickPositions: []
    },

    plotOptions: {
        solidgauge: {
        dataLabels: {
                enabled: true,
           format:'<div style=text-align:center>' +
                '<span style=font-size:25px>{ GetAmounts2.List.Current.Amount.date}</span><br/>' +
                '<span style=font-size:12px;opacity:0.4>km/h</span>' +
                '</div>'
       },
            rounded: true
        },
         
    },

    series: [{
        name: 'Credit',
        data: [{
            color: Highcharts.getOptions().colors[1],
            radius: '60%',
            innerRadius: '45%',
            y: " + GetAmounts.List.Current.DebitSum+ ",

        }]
    }, {
        name: 'Debit',
        data: [{
            color: Highcharts.getOptions().colors[0],
            radius: '90%',
            innerRadius: '75%',
            y:" +GetAmounts.List.Current.CreditSum+",

        }]
    }]
});
});"