Search code examples
iosobjective-chighchartstooltip

Add additional data to tooltip in iOS which does not belongs to x&y-axis of graph


I followed this demo to draw Column charts. (https://www.highcharts.com/ios/demo/column-rotated-labels).

What Issue I am facing is : I can easily show x-axis and y-axis information in tooltip. But I am not able to put additional information in tooltip from a different array (suppose array for depicting required qty for item).

I tried to do like this ;

tooltip.pointFormat = [NSString stringWithFormat:@"Velocity : {point.y:.2f} Remaining Quantity : %@",RemainingQtyArray]; It will print whole array in tooltip. tooltip.pointFormat = [NSString stringWithFormat:@"Velocity : {point.y:.2f} Remaining Quantity : %@",RemainingQtyArray[i++]]; It will print last item from array. So, how can i put additional info so that when anyone taps on graph, it will show this info too.

Want tooltip like this.


Solution

  • Check this Fiddle demo in JS

    Tooltip in JS way

     tooltip: {
            pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b><br>Extra One: <b>{point.data1}</b><br>Extra Two: <b>{point.data2}</b>'
        },
    

    Series data in JS way

    data: [
            {name:'Shanghai', y:24.2,data1:'Aa',data2:'Ba'},
            {name:'Beijing', y:20.2,data1:'Ab',data2:'Bb'},
            {name:'Karachi', y:14.2,data1:'Ac',data2:'Bc'},
            {name:'Shenzhen', y:13.2,data1:'Ad',data2:'Bd'},
        ],
    

    Through doc I convert into ios.

    For ios

    HITooltip *tooltip = [[HITooltip alloc]init];
    tooltip.pointFormat = @"Population in 2017: <b>{point.y:.1f} millions</b><br>Extra One: {point.data1}<br>Extra Two: {point.data2}";
    

    For ios series data

    column.data = [NSMutableArray arrayWithObjects:
                        @{
                          @"name":@"Shanghai",
                          @"y":@23.7,
                          @"data1":@'Aa',
                          @"data2":@'Ba'
                         },
                       @{
                          @"name":@"Shanghai",
                          @"y":@16.1,
                          @"data1":@'Aa',
                          @"data2":@'Ba'
                         },
                       @{
                          @"name":@"Karachi",
                          @"y":@14.2,
                          @"data1":@'Aa',
                          @"data2":@'Ba'
                         },
                       @{
                          @"name":@"Shenzhen",
                          @"y":@14,
                          @"data1":@'Aa',
                          @"data2":@'Ba'
                         }
                       , nil];