Pre loader

showing x value on each chart bar of column chart

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


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.

  • You must to post comments

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)

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

    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

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies