Charts

Alexei Kozachenko
3 min readOct 29, 2018

--

In many iOS/macOS projects I needed to visualize datasets. It can take a while to learn the fundamentals of Core Graphics and write a simple graph view. In addition, it will take even more time to make them interactive, and even more time to build something that creates different types of charts (like line, bar, pie, radar, cubic, etc.) for your data. And what if you want to make them appear with different animations, different colors and sizes?

Charts is an open source project that can do all of that!

I played around with it and decided to fix some issues (at that time there were more than 340 issues reported on github).

One of the issues was related to a pie chart, and the lack of ability to have value lines in different colors.

Here is a picture of how a pie chart with value lines looked like:

All the value lines have the same color, and the user wanted value lines to have the same color as pie slices.

I looked at the Renderer class, and found that pie charts are drawn by a PieChartRenderer.

A user could set a color for a value line as a property in dataSet (PieChartDataSet) and all value lines would be drawn using that color (black color is set by default).

In renderer the color is set using:

context.setStrokeColor(dataSet.valueLineColor!.cgColor)

To solve the problem I added a new property `valueLineAutoColor`to a IPieChartDataSet protocol and PieChartDataSet class that conforms to it.

var valueLineAutoColor: Bool = false

In a renderer I added a check for that flag. If it is set to false, renderer would use a standard color, and a color of a pie slice otherwise.

So:

context.setStrokeColor(dataSet.valueLineColor!.cgColor)

Became:

if dataSet.valueLineAutoColor {
context.setStrokeColor(dataSet.color(atIndex: j).cgColor) }
else {
context.setStrokeColor(dataSet.valueLineColor!.cgColor) }

Where dataSet.color(atIndex: j) is a method that returns a color of pie slice for data at specified index. So drawing a slice for data point I would also use the same color for it’s value line.

Now, the only thing user needs to do is to set `valueLineAutoColor` to true, and the final result looks like this:

I committed changes that I’ve made, pushed them to my fork of this repo, and created a pull request with a reference to that issue created 4 month ago.

I think that in future I may contribute to this project again.

--

--

Alexei Kozachenko

Computer programming and Analysis student at Seneca College.