Search code examples
javascriptrhighchartsr-highcharter

Highcharter - move data label to top of column

I would like to move the data labels, which are centered on the columns by default, of my waterfall chart above each column. Looking through the Highcharts options I found the overflow option and this SO post on how to move data labels with highcharts (not highcharter though).

However, implementing the proposed steps of setting crop = FALSE and overflow = 'none' did not move the data labels.

Here is a small example with the proposed settings:

library(highcharter)

dataframe <- data.frame(name = c("A","B","C", "D"),
                        y = c(12.10, 5.45, -8.60, NA),
                        isIntermediateSum = c(FALSE, FALSE, FALSE, FALSE),
                        isSum = c(FALSE, FALSE, FALSE, TRUE),
                        color = c("#377EB8", "#4DAF4A", "#E41A1C", "#377EB8"),
                        stringsAsFactors = F)

data_list = dataframe %>% list_parse()

highchart() %>% 
  hc_chart(type = "waterfall") %>% 
  hc_title(text = "") %>% 
  hc_subtitle(text = "") %>%
  hc_xAxis(type = 'category') %>%
  hc_yAxis(
    title = list(text = ""),
    labels = list(format = "{value:,.2f}%", useHTML = TRUE)
  ) %>%
  hc_legend(enabled=FALSE) %>%
  hc_tooltip(pointFormat = '<b>{point.y:,.2f}%</b>', useHTML = TRUE) %>%
  hc_add_series(data = data_list, 
                dataLabels = list(
                  enabled=TRUE,
                  formatter= JS("function(){ return Highcharts.numberFormat(this.y, 2, ',') + '%';}"),
                  style=list(
                    color="#FFFFFF",
                    fontWeight="bold",
                    textShadow="0px 0px 3px black"
                  ),
                  crop = FALSE,
                  overflow = 'none'
                )
  )

Does someone of you know how to move the data labels?

Solution

  • If i understood u correctly

    verticalAlign: StringSince 2.3.3 The vertical alignment of a data label. Can be one of top, middle or bottom. The default value depends on the data, for instance in a column chart, the label is above positive values and below negative values.

    doc

            dataLabels: {verticalAlign: 'top'}

    JS Fiddle: http://jsfiddle.net/obryLg6q/

    new fiddle: http://jsfiddle.net/obryLg6q/1/

            crop: false,
        overflow: 'none',
        x: 0,
        y: -30, // above the bar

    OR

    set dataLabels.inside to false: jsfiddle.net/obryLg6q/2 – Grzegorz Blachliński 18 mins ago

    Highcharts developer comment. I think you should follow this advice) 

           crop: false,
       overflow: 'none',
       inside: false