Reference Line text is cut off in Bar Chart

Certified Lead Developer

When using a!chartReferenceLine() in a bar chart the last line text is cut off a little bit.

Have anyone experienced this before?

Please refer to screenshot (Extremely Satisfying text)

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    I believe it's because of the resolution or UI layout configuration of your screen.

    Also, is it possible for you to share the code snippet of your interface (by setting some dummy data)?

  • 0
    Certified Lead Developer
    in reply to aloks0189

    Thanks for your reply. I don't think it is because of the resolution. I have tried many devices and browsers.

    Please find the snippet code below. (It also happens in column charts)

    a!columnChartField(
                  labelPosition: "ABOVE",
                  categories: {"Stage 1", "Stage 2", "Stage 3", "Stage 4", "Stage 5", "Stage 6", "Stage 7"},
                  series: a!chartSeries(
                    label: "# Opportunities",
                    data: a!forEach(
                      items: enumerate(7) + 1,
                      expression: with(
                        rand()*20+1
                      )
                    ),
                    color: "ACCENT"
                  ),
                  showLegend: false,
                  showTooltips: true,
                  referenceLines: {
                    a!chartReferenceLine(
                      label: "Level One",
                      value: 5
                    ),
                    a!chartReferenceLine(
                      label: "Level Two",
                      value: 10
                    ),
                    a!chartReferenceLine(
                      label: "Level Three",
                      value: 15
                    ),
                    a!chartReferenceLine(
                      label: "Level Four",
                      value: 20
                    )
                  }
                )
    

  • So, I had a little try out and see what you mean. One way is to avoid the situation. You can use the 'showWhen' to NOT show the reference line if none of the values in your chart are above that value. That is, your last reference line will be that which is immediately below your maximum value. That may or may not be an acceptable solution (looking at your first example I suspect not - you want to have the full range by the looks of it)

    (Off-topic: I also noticed that you're effectively repeating the a!chartReferenceLine() component, so you could derive these using some data and the a!forEach() to make the code more flexible for maintenance purposes.)

  • 0
    Certified Lead Developer
    in reply to Stewart Burchell

    Thanks for your reply, Stewart. Unfortunately, I do want all the reference lines to be shown as you saw in the example.

    And that's true, a forEach function should be used here. The snippet code was just an example of how to reproduce the issue that I made on the fly, it is not the actual code. I appreciate all your suggestions, though!

Reply Children