简体   繁体   中英

Highcharts percent with value

I am trying to re-create this chart using high charts api. Any ideas how to build this? Trying to group the year categories with both number and percent columns, see example pic attached. Thanks!

1

I have tried this thus far but cannot get both value and percent like the pic attached:

  Highcharts.chart('ContainerMonthToDate', {
        chart: {
            type: 'column'
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        xAxis: {
            categories: [
                'Jan 2017',
                'Jan 2016'

            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '# Patients'
            }
        },


        labels: {
            formatter: function(){
                return 100*this.value / $(this.axis.tickPositions).last()[0] + '%';
            }

    },


        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    crop: false,
                    overflow: 'none'
                }
            }
        },


        colors: [
           '#ff0000',
           '#ff0000',
           '#ff0000',
           '#ff0000'
        ],

        series: [{
            name: 'Cumulative',
            data: [8657, 7824]

        }, {
            name: 'Admissions',
            data: [2025, 1898]

        }, {
            name: 'Budgeted',
            data: [8018, 7913]

        }, {
            showInLegend: false,
            name: '',
            data: [1956, 1889]


        }]



    });

To combine two types of data, use this definition of yAxis:

    yAxis: [{
        title: {
            text: '# Pts'
        }
    }, {
        opposite: true,
        max: 100,
        title: {
            text: '% Pts'
        },
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        }
    }],

example on jsfiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM