SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

0
0

Hi guys,

I want to show x value on chart bar itself as shown in the attached image along with this query. I tried using annotation where I need to give x and y value each time and it look not appropriate in the 2 data series column chart using, instead of that I need easy way to represent label of bar value on graph bar.

please suggest if any.

Thanks in advance.

Version
4.1.0.5498
Images
  • You must to post comments
0
0

Hi, there.

What you can do is to draw your labels directly on your columns. You need to subclass your RenderableSeries, override internalDraw method, create your SCITextLabelContainer and provide a proper drawing frame, like this

import SciChart.Protected.SCIRenderableSeriesBase

let xAxis = SCINumericAxis()
xAxis.axisAlignment = .left

let yAxis = SCINumericAxis()
yAxis.axisAlignment = .bottom
yAxis.flipCoordinates = true

class LabeledStackedColumnRenderableSeries: SCIStackedColumnRenderableSeries {
    override func internalDraw(with renderContext: ISCIRenderContext2D!, assetManager: ISCIAssetManager2D!, renderPassData: 
ISCISeriesRenderPassData!) {
    super.internalDraw(with: renderContext, assetManager: assetManager, renderPassData: renderPassData)

    guard
        let rpd = renderPassData as? SCIStackedColumnRenderPassData,
        let xCoords = rpd.xCoords?.itemsArray,
        let yCoords = rpd.yCoords?.itemsArray
    else {
        return
    }

    for i in 0..<xCoords.count {
        let x = CGFloat(xCoords[i])
        let y = CGFloat(yCoords[i])

        let textLabel = SCITextLabelContainer()
        textLabel.text = "\(rpd.yValues.getValueAt(i))"
        textLabel.padding = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 5)

        let size = textLabel.sizeWithMargins

        // set y to x and x to y because xAxis.axisAlignment == .left and yAxis.axisAlignment = .bottom
        let frame = CGRect(x: y - size.width, y: x - size.height / 2, width: size.width, height: size.height)
        textLabel.onDraw(with: renderContext, assetManager: assetManager, inFrame: frame)
        }
    }
}

See the screenshot.
Let us know if it works for you.
Thanks in advance

Images
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.