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?
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
]
]
]
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)