Custom label on top of the Highchart using swift and highchart cocoapods

ONLINECAST

2 min read

·

05-10-2024

8

0

Share

Adding Custom Labels to Your Highcharts with Swift

Highcharts is a powerful and versatile charting library, allowing you to create stunning data visualizations in your iOS applications. While Highcharts provides many built-in features for customization, sometimes you might need to add a custom label to your chart for extra context or information. This article guides you through adding custom labels to Highcharts charts using Swift and the Highcharts CocoaPods framework.

Understanding the Need for Custom Labels

Imagine you're creating a chart that displays sales figures for different product categories. While Highcharts provides labels for the x and y axes, you might want to add a specific label on top of the chart to highlight the total sales for the year, or perhaps display a company logo for branding purposes. This is where custom labels come into play.

Setting the Stage: Sample Code and Scenario

Let's create a basic Highcharts chart using Swift and CocoaPods. We'll start with a simple line chart displaying sales figures over a period of time.

import UIKit
import Highcharts

class ViewController: UIViewController {

    @IBOutlet weak var chartView: HIChartView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create the chart
        let chart = HIChart()
        chart.type = .line
        chart.title = HIChartTitle(text: "Sales Trend")

        // Define the data points
        let dataPoints = [
            ["x": 1, "y": 20],
            ["x": 2, "y": 35],
            ["x": 3, "y": 45],
            ["x": 4, "y": 55],
            ["x": 5, "y": 65],
        ]

        // Create the series
        let series = HIChartSeries(type: .line, name: "Sales", data: dataPoints)
        chart.series = [series]

        // Set the chart to the chart view
        chartView.chart = chart
    }
}

Adding the Custom Label: The Power of HIChartAnnotation

Highcharts provides the HIChartAnnotation object to add custom elements like labels, images, or shapes to your charts. Let's use this to add a custom label to the top center of our chart.

// Create the annotation
let annotation = HIChartAnnotation(
    id: "customLabel",
    label: HIChartLabel(
        text: "Total Sales: \$125,000",
        style: HIChartLabelStyle(
            fontSize: "14px",
            color: "#FFFFFF",
            fontWeight: "bold"
        )
    )
)

// Position the annotation
annotation.anchorX = "center"
annotation.anchorY = "top"
annotation.x = 0
annotation.y = -10 // Adjust the vertical position as needed

// Add the annotation to the chart
chart.annotations = [annotation]

In this code snippet:

• We create an HIChartAnnotation with an id for reference.
• We set the label property with the desired text and style.
• We define the anchorX and anchorY to position the label at the center top.
• We adjust the x and y values to fine-tune the label's position.
• Finally, we add the annotation to the chart.annotations array.

Additional Customization and Considerations:

• Shape: Besides labels, you can use HIChartAnnotation to add shapes (circles, rectangles, etc.) to your chart.
• Image: You can also display an image by setting the image property of the annotation instead of label.
• Dynamic Positioning: The label's position can be dynamically calculated based on your chart's data.

Conclusion:

Adding custom labels to your Highcharts charts with Swift and CocoaPods is a simple yet powerful way to enhance your visualizations. By leveraging the HIChartAnnotation object, you can create visually appealing and informative charts that effectively communicate your data insights.

Further Reading and Resources:

• Highcharts Documentation: https://www.highcharts.com/docs/
• Highcharts CocoaPods: https://cocoapods.org/pods/Highcharts

Remember, customizing your charts with custom labels adds that extra touch of professionalism and clarity to your iOS applications.