pradip.walghude
Posts: 23
Joined: Thu Jan 28, 2021 10:02 am

iOS- Display custom troffee icon on progreee bar chart

Hi Team,

I want to display a custom progress icon on progress bar charts. Could you please help me with the best approaches to achieve this requirement?
Attachments
Screen Shot 2022-08-17 at 3.57.26 PM.png
Screen Shot 2022-08-17 at 3.57.26 PM.png (12.1 KiB) Viewed 578 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: iOS- Display custom troffee icon on progreee bar chart

Hi pradip.walghude!
Welcome to our forum and thanks for contacting us with your question!

I have forwarded your question to our iOS developer and I will be back with an answer asap.

Best regards!
Hubert Kozik
Highcharts Developer
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: iOS- Display custom troffee icon on progreee bar chart

I have an answer for you. Below, you can find a code for a demo in iOS, where the image is set as a data label and also with complementary bars.

Code: Select all

let options = HIOptions()

let chart = HIChart()
chart.type = "bar"
options.chart = chart

let xAxis = HIXAxis()
xAxis.categories = ["A", "B", "C", "D", "E"]
options.xAxis = [xAxis]

let yAxis = HIYAxis()
yAxis.max = 100
yAxis.title = HITitle()
options.yAxis = [yAxis]

let bar1 = HIBar()
bar1.name = "Win"
bar1.data = [50, 30, 40, 70, 10]
bar1.color = HIColor(hexValue: "4fce00")

let bar1DataLabels = HIDataLabels()
bar1DataLabels.enabled = true
bar1DataLabels.useHTML = true
bar1DataLabels.inside = true
bar1DataLabels.align = "right"
bar1DataLabels.x = 20
bar1DataLabels.y = 0
bar1DataLabels.formatter = HIFunction(jsFunction: "function() { return `<img src=\"https://cdn-icons-png.flaticon.com/512/195/195115.png\" style=\"width: 30px\"><img>`; }")
bar1.dataLabels = [bar1DataLabels]

let bar2 = HIBar()
bar2.name = "Fake Series"
bar2.color = HIColor(hexValue: "c1ff9b")
bar2.data = [100, 100, 100, 100, 100]
bar2.showInLegend = true
bar2.enableMouseTracking = false
bar2.zIndex = -1

options.series = [bar1, bar2]

options.additionalOptions = [
  "plotOptions": [
    "series": [
      "grouping": false
    ]
  ]
]
Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
pradip.walghude
Posts: 23
Joined: Thu Jan 28, 2021 10:02 am

Re: iOS- Display custom troffee icon on progreee bar chart

Please share sample example with us where we can test the progress bar chart
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: iOS- Display custom troffee icon on progreee bar chart

pradip.walghude,
I have attached an example code in my previous post. All you need to do is test it in your iOS development environment. Here is an image of how it looks on the iPhone 12 Pro emulator:
ios.jpg
ios.jpg (34 KiB) Viewed 538 times
Regards!
Hubert Kozik
Highcharts Developer
pradip.walghude
Posts: 23
Joined: Thu Jan 28, 2021 10:02 am

Re: iOS- Display custom troffee icon on progreee bar chart

If you share a working example then it would be helpful to get more clarity on this.
Also on our side, we are using a dictionary to pass all data to high charts. Using the below methods we are rendering charts

json: [String: Any] = [key : values]
loadJSONOptions(json)

JSON- all properties and chart data parsing


Thanks in advance
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: iOS- Display custom troffee icon on progreee bar chart

pradip.walghude,
Here is the same demo as the previous, but converted to JSON format. As I said before, it is using dataLabels to show images on each bar and some fake series with grouping set to false to make a background behind bars.

Code: Select all

let formatter = HIFunction(jsFunction: "function() { return `<img src=\"https://cdn-icons-png.flaticon.com/512/195/195115.png\" style=\"width: 30px\"><img>`; }")

let json = [
  "series":[
     [
        "dataLabels": [
           [
              "inside": true,
              "x": 20,
              "enabled": true,
              "y": 0,
              "formatter": formatter,
              "useHTML": true,
              "align": "right"
           ]
        ],
        "data":[
           50,
           30,
           40,
           70,
           10
        ],
        "name": "Win",
        "type": "bar",
        "color": "#4fce00"
     ],
     [
        "zIndex": -1,
        "color": "#c1ff9b",
        "showInLegend": true,
        "data": [
           100,
           100,
           100,
           100,
           100
        ],
        "enableMouseTracking": false,
        "type": "bar",
        "name": "Fake Series"
     ]
  ],
  "xAxis": [
     [
        "categories": [
           "A",
           "B",
           "C",
           "D",
           "E"
        ]
     ]
  ],
  "plotOptions": [
     "series": [
        "grouping": false
     ]
  ],
  "chart": [
     "type": "bar"
  ],
  "yAxis": [
     [
        "max": 100,
        "title":[
        ]
     ]
  ]
] as [String: Any]
chartView.loadJSONOptions(json)
Regards!
Hubert Kozik
Highcharts Developer
pradip.walghude
Posts: 23
Joined: Thu Jan 28, 2021 10:02 am

Re: iOS- Display custom troffee icon on progreee bar chart

Hi Team,

I have used trophyImageDataLabel["overflow"] = "allow" but image position will change after scrolls up-down

if you provide a solution to fix this bug then would be helpful
Attachments
Screen Shot 2022-10-20 at 4.35.55 PM.png
Screen Shot 2022-10-20 at 4.35.55 PM.png (14.96 KiB) Viewed 443 times
Screen Shot 2022-10-20 at 4.36.08 PM.png
Screen Shot 2022-10-20 at 4.36.08 PM.png (21.61 KiB) Viewed 443 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: iOS- Display custom troffee icon on progreee bar chart

pradip.walghude,
I have found, that you have asked the same question on another topic here: viewtopic.php?f=9&t=49683
Please do not duplicate posts on our forum, it would be best to just wait for an answer and make conversation there.

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”