Custom X Axis for BarChartView

Question

I am using BarChartView from danielgindi/ios-charts charting library. So far I am able to get following BarChartView. My question, is there any way to Customize X Axis that way, it will only show min (left most value 37.03), max (right most value 37.31 which is hiding), value for green bar (37.17) and value for orange bar (37.18 which is hiding again). In a nutshell I want to hide some value from XAxis which is not important in my case.

Why don't you filter the data that is to be displayed on chart ? — Teja Nandamuri, Mar 29 '16 at 14:06
from the source code: https://github.com/danielgindi/ios-charts/blob/master/Charts/Classes/Components/ChartXAxis.swift. I think you can try to use "setLabelsToSkip" method. The method will disable auto calculation of labels on the axis, so you can try to skip (dataset.count - 1) or something around to see how is the result. — Surely, Mar 29 '16 at 14:08
If I do something like barChartView.xAxis.setLabelsToSkip(5) that will show first label then skip 5 the show 6th and then skip 5 agaig. That is not what I want but thank you for the suggestion. — AAV, Mar 29 '16 at 15:47
@AAV hey can you tell me how did you add 2 colors to 2.0 datapoint...Please — sheetal, Aug 24 '16 at 18:08

Wingzero · Answer 1 · 2016-03-30T01:42:54.233

This is an example: add a property called showOnlyLeftRightEnabled in YourChartXAxis class, then in your custom x axis renderer, overide internal override func drawLabels(context context: CGContext, pos: CGFloat, anchor: CGPoint).

To display the middle one's you need to figure out which bar it is, and convert the x Index to pixel values just like what I did for the left most and right most value via CGPointApplyAffineTransform(position, valueToPixelMatrix)

internal override func drawLabels(context context: CGContext, pos: CGFloat, anchor: CGPoint)
{
    let paraStyle = NSParagraphStyle.defaultParagraphStyle().mutableCopy() as! NSMutableParagraphStyle
    paraStyle.alignment = .Center

    let labelAttrs = [NSFontAttributeName: _xAxis.labelFont,
        NSForegroundColorAttributeName: _xAxis.labelTextColor,
        NSParagraphStyleAttributeName: paraStyle]
    let labelRotationAngleRadians = _xAxis.labelRotationAngle * ChartUtils.Math.FDEG2RAD

    let valueToPixelMatrix = transformer.valueToPixelMatrix

    var position = CGPoint(x: 0.0, y: 0.0)

    var labelMaxSize = CGSize()

    if (_xAxis.isWordWrapEnabled)
    {
        labelMaxSize.width = _xAxis.wordWrapWidthPercent * valueToPixelMatrix.a
    }
    if let showOnlyLeftRight = (_xAxis as? YourChartXAxis)?.showOnlyLeftRightEnabled
    {
        if (showOnlyLeftRight)
        {
            for (var i = lowestVisibleXIndex, maxX = min(highestVisibleXIndex + 1, _xAxis.values.count); i < maxX; i += maxX - lowestVisibleXIndex - 1)
            {
                let label = _xAxis.values[i]
                if (label == nil)
                {
                    continue
                }

                position.x = CGFloat(i)
                position.y = 0.0
                position = CGPointApplyAffineTransform(position, valueToPixelMatrix)

                let labelns = label! as NSString

                //label location by string width
                // fix rightLabel
                if (highestVisibleXIndex == lowestVisibleXIndex)
                {
                    return super.drawLabels(context: context, pos: pos, anchor: anchor)
                }
                else if (i == highestVisibleXIndex)
                {
                    let width = labelns.boundingRectWithSize(labelMaxSize, options: .UsesLineFragmentOrigin, attributes: labelAttrs, context: nil).size.width
                    rightLabelX -= width / 2.0
                }
                else if (i == lowestVisibleXIndex)
                { // fix leftLabel
                    let width = labelns.boundingRectWithSize(labelMaxSize, options: .UsesLineFragmentOrigin, attributes: labelAttrs, context: nil).size.width
                    leftLabelX += width / 2.0
                }

                // fill leftLabel and rightLabel in current visible screen
                if (lowestVisibleXIndex == highestVisibleXIndex) {
                    ChartUtils.drawMultilineText(context: context, text: label!, point: CGPoint(x: leftLabelX, y: pos), attributes: labelAttrs, constrainedToSize: labelMaxSize, anchor: anchor, angleRadians: labelRotationAngleRadians)
                    ChartUtils.drawMultilineText(context: context, text: label!, point: CGPoint(x: rightLabelX, y: pos), attributes: labelAttrs, constrainedToSize: labelMaxSize, anchor: anchor, angleRadians: labelRotationAngleRadians)
                    break
                } else if (i == lowestVisibleXIndex) {
                    ChartUtils.drawMultilineText(context: context, text: label!, point: CGPoint(x: leftLabelX, y: pos), attributes: labelAttrs, constrainedToSize: labelMaxSize, anchor: anchor, angleRadians: labelRotationAngleRadians)
                } else if (i == highestVisibleXIndex) {
                    ChartUtils.drawMultilineText(context: context, text: label!, point: CGPoint(x: rightLabelX, y: pos), attributes: labelAttrs, constrainedToSize: labelMaxSize, anchor: anchor, angleRadians: labelRotationAngleRadians)
                }
            }
        } else {
            super.drawLabels(context: context, pos: pos, anchor: anchor)
        }
    }
}

Custom X Axis for BarChartView

1 Answers1