Reference Line text is cut off in Bar Chart

Hi, May you try in some other browser, it might be an issue of your screen resolution.

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)?

Thanks for your reply Gaurav. I have tried in different browsers and also on mobile devices but this issue is still present.

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.)

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!

So...another (not very nice, but still an) option is...to artificially append one column that contains the maximum value possible in your chart, and label it "Reference Maximum Score" or some such...this then forces the chart to stretch beyond the maximum and thus your top reference line is always rendered correctly...it's not elegant but it works:

a!columnChartField(
  labelPosition: "ABOVE",
  categories: {"Stage 1", "Stage 2", "Stage 3", "Stage 4", "Stage 5", "Stage 6", "Stage 7","Maximum (for Reference"},
  series: a!chartSeries(
    label: "# Opportunities",
    data: {
      a!forEach(
      items: enumerate(7) + 1,
      expression: with(
        rand()*20+1
      )
    ),
    20
    },
    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
    )
  }
)

(The real answer is to raise a Support Ticket with Appian and get them to either provide an answer or a fix)

The best solution would be to raise support ticket as suggested by Stewart. But alternate quick solution  would be if you can give label to your columnChartField.

a!columnChartField(
label: "Heading",
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
)
}
)

That would be a workaround, yes. I can probably use it in the meantime. Thanks Stewart!