Pre loader

Center Labels on StackedColumnRenderableSeries


I have a basic StackedColumnRenderableSeries using a HorizontallyStackedColumnCollection, which has 2 DataSeries in it. The chart renders fine, and for each point on the x axis, I see the 2 bars. However, the labels on the x Axis are left aligned (relative to the bars). How do I get the labels to be centered under the bars? See the image below for reference. Note how the labels appear left aligned under the yellow bars… I’d like them to be center aligned, in the middle of the yellow and blue bars.

enter image description here

  • Yura Khariton
    Can you tell what type of xAxis are you using?
  • Brad Ball
    yep, it’s a DateAxis val axis = chartBuilder.newDateAxis() .withTextFormatting(“MMM d”) .withDrawMinorGridLines(false) .withDrawMinorTicks(false) .withDrawMajorTicks(true) .withDrawMajorBands(false) .withDrawMajorGridLines(false) .build()
  • You must to post comments

I’m using a Date Axis for the x axis, like so:

DateAxis val axis = chartBuilder.newDateAxis()
.withTextFormatting(“MMM d”)

and the primary series is setup like this:
private var dailySeriesColumns = HorizontallyStackedColumnsCollection().apply {
spacing = 0.0
dataPointWidth = 1.0

When I add a single XyDataSeries<Date, In> to dailySeriesColumns, I get a chart that looks like this:

enter image description here

You can see above that the axis tick marks and labels are not centered. Also the last value in the chart (Apr 11) gets cut off at the end.

  • You must to post comments

Hi Brad,

The easiest way to provide desired behavior is to use CategoryDateAxis. This axis type is index based and in this case ticks will be drawn though nearest data points. Is it possible for you to switch to CategoryDateAxis? If date are placed with same interval then there should be no noticable difference between DateAxis and CategoryDateAxis

On the other hand, DateAxis is value axis and it tries to calculate tick label values in a such way that they will look nice on screen ( e.g. if there is days to display it will display dates at midnight, if hours it will try to place ticks at the end of the hour etc ). In you case it looks like column is placed in the middle of day ( not at midnight ) and axis displays days. If you need to use DateAxis I would suggest you to try create custom TickProvider for DateAxis ( ) and add major ticks which go though desired dates ( TickProvider expects double values so you’ll need to convert dates to double values when calculating major ticks )

Hope this will help you!

Best regards,

  • You must to post comments

Thanks @Yura. I tried converting to a CategoryDateAxis, but now the chart doesn’t render at all and I get the following Error when trying to add an XyDataSeries<Date, Int> to it:

java.lang.UnsupportedOperationException: This operation is not supported in StackedSeriesCollectionBase and inheritors
    at com.scichart.charting.visuals.renderableSeries.StackedSeriesCollectionBase.getDataSeries(SourceFile:251)
    at com.scichart.charting.visuals.axes.rangeCalculators.CategoryRangeCalculationHelper.updateXDataRange(SourceFile:65)
    at com.scichart.charting.visuals.axes.rangeCalculators.RangeCalculationHelper2DBase.updateDataRange(SourceFile:88)
    at com.scichart.charting.visuals.axes.rangeCalculators.RangeCalculatorHelperBase.getDataRange(SourceFile:69)
    at com.scichart.charting.visuals.axes.rangeCalculators.RangeCalculatorHelperBase.updateMaximumRange(SourceFile:96)
    at com.scichart.charting.visuals.axes.rangeCalculators.RangeCalculationHelper2DBase.updateMaximumRange(SourceFile:178)
    at com.scichart.charting.visuals.axes.rangeCalculators.RangeCalculatorHelperBase.getMaximumRange(SourceFile:83)
    at com.scichart.charting.visuals.axes.AxisBase.getMaximumRange(SourceFile:1090)
    at com.scichart.charting.viewportManagers.ViewportManagerBase.onApplyAutoRange(SourceFile:218)
    at com.scichart.charting.viewportManagers.ViewportManagerBase.tryPerformAutoRange(SourceFile:205)
    at com.scichart.charting.visuals.rendering.RenderSurfaceRenderer.a(SourceFile:233)
    at com.scichart.charting.visuals.rendering.RenderSurfaceRenderer.a(SourceFile:204)
    at com.scichart.charting.visuals.rendering.RenderSurfaceRenderer.a(SourceFile:142)
    at com.scichart.charting.visuals.rendering.RenderSurfaceRenderer.onDraw(SourceFile:131)
    at com.scichart.drawing.opengl.GLTextureView$b.onDraw(SourceFile:213)
    at com.scichart.drawing.opengl.MyGLRenderer.b(SourceFile:270)
    at com.scichart.drawing.opengl.ap.handleMessage(SourceFile:52)
    at android.os.Handler.dispatchMessage(
    at android.os.Looper.loop(

Also, I have another (Mountain Series) that uses the same data. I converted it to CategoryDateAxis as well, and it renders ok, but the labels on that chart do not show as dates anymore, even though the axis is setup using withTextFormating(“MMM d”)? Every label shows exactly the same “18:59”? What am I doing wrong here? Is there documentation somewhere on how to use CategoryDateAxis?

  • Yura Khariton
    It looks like CategoryDateAxis tries to get DataSeries to get amount of points from stacked mountain, but since this type of series consists of other series it throws exception. This is a bug in SciChart code. I’m going to create a task to fix this.
  • Yura Khariton
    Regarding text formatting – I’m sorry but this is how default LabelProvider for CategoryDateAxis works. It has a set of predefined formatting strings and selects one of them, ignoring TextFormatting which is set for parent axis. You can easily override this behavior by creating custom LabelProvider ( )
  • You must to post comments
Showing 3 results
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