Create a MarkerView when user clicks on Chart

Question

I have searched and searched for how to display the MarkerView when the user clicks on a bar in a bar chart using Charts (was iOS-charts) for Swift.

The documentation states the library is capable of "Highlighting values (with customizable popup-views)" using MarkerViews, but I don't know how to show one.

I want a little tool tip to display, like the image below, when the user clicks on a bar in the bar chart.

Tool tip on bar graph:

I have the chartValueSelected function ready which fires when a bar is selected.

Edison · Accepted Answer · 2017-05-23T07:04:17.010

12

So you are using Charts right?

Did you check BallonMarker.swift?

/ChartsDemo/Classes/Components/BallonMarker.swift

Swift

let marker:BalloonMarker = BalloonMarker(color: UIColor.redColor(), font: UIFont(name: "Helvetica", size: 12)!, insets: UIEdgeInsets(top: 7.0, left: 7.0, bottom: 7.0, right: 7.0))
marker.minimumSize = CGSizeMake(75.0, 35.0)
chartView.marker = marker

Swift 3 Update

let marker:BalloonMarker = BalloonMarker(color: UIColor.black, font: UIFont(name: "Helvetica", size: 12)!, textColor: UIColor.white, insets: UIEdgeInsets(top: 7.0, left: 7.0, bottom: 7.0, right: 7.0))
marker.minimumSize = CGSize(width: 75.0, height: 35.0)
chartView.marker = marker

Objective-C

BalloonMarker *marker = [[BalloonMarker alloc] initWithColor:[UIColor colorWithRed:14.0/255.0 alpha:1.0] font:[UIFont systemFontOfSize:12.0] insets: UIEdgeInsetsMake(7.0, 7.0, 7.0, 7.0)];
marker.minimumSize = CGSizeMake(75.f, 35.f);
_chartView.marker = marker;

edited May 23 '17 at 07:04

answered Jul 05 '16 at 21:31

Edison

11,881
5
42
50

Yeah I have imported the BalloonMarker class into my project, but struggling with the syntax of actually creating the marker. – Tophat Gordon Jul 05 '16 at 21:58
In my chartValueSelected function, I have created a BalloonMarker object and assigned it to the chartView.marker. – Tophat Gordon Jul 05 '16 at 21:59
Thanks for your replies - this is very helpful. So I've added the swift code and that creates a black bubble above the bar when it is clicked. I want to display the bar y value in the bubble as well. Should I be using the refreshContent method from BalloonMarker? Or is there a property of the marker I can assign a value to? – Tophat Gordon Jul 05 '16 at 22:33
Okay, I changed the UIColor to be white instead of black which I think was in your original answer before red and that works fine now. Thanks for your help. – Tophat Gordon Jul 05 '16 at 22:51
1

Glad I could help. Yeah the colour choice was obviously just for the answer :) Btw, did you cmd-click the two classes `ChartDataEntry` and `ChartHighlight` in `BalloonMarker.swift` `refreshContent` function? They have properties you can insert and highlight like `value`, `xIndex`, `data`, `_xIndex`, `_value`, etc. – Edison Jul 05 '16 at 22:58
I use the same code but giving an error of Use of undeclared type BalloonMarker. Can you help me? – shahin ali agharia Nov 29 '16 at 06:52
@tymac, how do you do this on Swift3 version? – Lysdexia May 09 '17 at 09:37
let marker:BalloonMarker = BalloonMarker(color: UIColor.black, font: UIFont(name: "Helvetica", size: 12)!, textColor: UIColor.white, insets: UIEdgeInsets(top: 7.0, left: 7.0, bottom: 7.0, right: 7.0)) marker.minimumSize = CGSize(width: 75.0, height: 35.0) chartView.marker = marker – Sayalee Pote May 22 '17 at 06:52
1

I am using this swift class with Objective C project. Not able to import it. I have not added the whole xcode project as I am using PODS. If anybody can help please? – Krutika Sonawala Jun 29 '17 at 11:53
@KrutikaSonawala did you ever figure out how to import it in obj c project? – sudoExclaimationExclaimation Sep 08 '17 at 18:21
@PranoyC yes, I have added files for marker i.e, balloon marker from the demo project provided explicitly the pods. imported charts to balloon marker class and called it's delegate method. – Krutika Sonawala Sep 14 '17 at 08:59
@PranoyC please refer below answer. It might help you out. – Krutika Sonawala Sep 14 '17 at 09:24
https://github.com/danielgindi/Charts/tree/master/ChartsDemo/Classes/Components here is the link for Ballon Marker and other markers. – Milad Faridnia Nov 08 '17 at 08:14

Krutika Sonawala · Answer 2 · 2017-09-14T09:20:47.173

Swift chart library with Objective C code will be something like this.. I am here just showing some code snippets.

ChartViewController.m

-(void)initializeChart {

    //chart specifications will go here 
    ...
    ...

    //set balloon marker to the chart
    BalloonMarker *marker = [[BalloonMarker alloc]
                     initWithColor: kColorBrown1
                     font: [UIFont systemFontOfSize:12.0]
                     textColor: UIColor.whiteColor
                     insets: UIEdgeInsetsMake(8.0, 8.0, 20.0, 8.0)];
    marker.chartView = chartView;
    marker.minimumSize = CGSizeMake(80.f, 40.f);
    chartView.marker = marker;
}

BalloonMarker.swift

import Charts

...

...

//This method will be called when ever user clicks on a chart to refresh the marker text. You need to specify the value here.

open override func refreshContent(entry: ChartDataEntry, highlight: Highlight)

{  
    setLabel(entry.y!)        
}

score 1 · Answer 3 · answered Feb 13 '18 at 12:09

Even after adding the BalloonMarker to the chart if the markers are not displayed make sure that the markers are enabled on the chart view

chartView.drawMarkers = true

highlighting is enabled on the chart data set. This is should be done after you assign the chart data set.

chartView.data?.highlightEnabled = true

Create a MarkerView when user clicks on Chart

3 Answers3

Linked