Resolving Negative Population Values in Highcharter Tooltips

Highcharter is a powerful JavaScript library for creating high-quality charts in the browser. It allows developers to create complex, interactive charts with ease, making it an ideal choice for data visualization.

In this blog post, we’ll delve into a specific issue with Highcharter’s tooltips that can lead to unexpected values being displayed. The issue arises when the value of the series (in this case, population) is negative and the x-axis labels are set to display absolute values.

Setting Up Highcharter

To tackle this issue, we need to first create a basic Highcharter chart using the highchart() function from the HC package in R.

# Load required libraries
library(HC)

# Create a new highchart object
PyramidPlot2 <- highchart() %>%
  hc_add_series(PopEDBinded, type = "bar", hcaes(x = c(PyramidLevels, PyramidLevels), y = value, group = Gender),
    color = c("#2f7ed8", "#FF0000"),
    showInLegend = FALSE) %>%
  hc_plotOptions(bar = list(stacking = "normal")) %>%
  # Format the labels on the x-axis (y-axis per HC)
  hc_yAxis(labels = list(formatter = htmlwidgets::JS(
    "function() {
        return Math.abs(this.value); /* all labels to absolute values */
      }"
  ))) %>%
  hc_xAxis(categories = PyramidLevels, reversed = FALSE) %>%
  hc_title(text = "Males", align = "center", x = -115, y = 20, margin = 0,
           style = list(fontSize = "12px", color = "#FF0000")) %>%
  hc_subtitle(text = "Females", align = "center", y = 20, margin = 0,
              x = 250, style = list(fontSize = "12px", color = "#2f7ed8"))

This code sets up a basic bar chart with two series: males and females. The labels on the x-axis are formatted to display absolute values using JavaScript.

Displaying Absolute Values in Tooltips

By default, Highcharter tooltips display values based on the data’s numerical value. However, when we set the hcaes() function to use absolute values for the x-axis labels, the tooltip displays the negative population values instead of the absolute values.

To resolve this issue, we need to modify the hcaes() function to display absolute values in the tooltips.

Modifying hcaes() Function

We can achieve this by modifying the hcaes() function to format the x-axis labels as absolute values. However, we also need to ensure that the y-values are displayed correctly.

# Modify hc_add_series function
PyramidPlot2 <- highchart() %>%
  hc_add_series(PopEDBinded, type = "bar", hcaes(x = c(PyramidLevels, PyramidLevels), y = abs(value),
    group = Gender), color = c("#2f7ed8", "#FF0000"),
    showInLegend = FALSE) %>%
  # Format the labels on the x-axis (y-axis per HC)
  hc_yAxis(labels = list(formatter = htmlwidgets::JS(
    "function() {
        return Math.abs(this.value); /* all labels to absolute values */
      }"
  ))) %>%
  hc_xAxis(categories = PyramidLevels, reversed = FALSE) %>%
  hc_title(text = "Males", align = "center", x = -115, y = 20, margin = 0,
           style = list(fontSize = "12px", color = "#FF0000")) %>%
  hc_subtitle(text = "Females", align = "center", y = 20, margin = 0,
              x = 250, style = list(fontSize = "12px", color = "#2f7ed8"))

In this modified code, the hcaes() function now uses the absolute value of the population data. The abs() function is used to calculate the absolute value of each y-value.

Displaying Absolute Values in X-Axis Labels

Next, we need to modify the x-axis labels to display the absolute values correctly.

# Format the labels on the x-axis (y-axis per HC)
PyramidPlot2 <- highchart() %>%
  hc_add_series(PopEDBinded, type = "bar", hcaes(x = c(PyramidLevels, PyramidLevels), y = abs(value),
    group = Gender), color = c("#2f7ed8", "#FF0000"),
    showInLegend = FALSE) %>%
  # Format the labels on the x-axis (y-axis per HC)
  hc_yAxis(labels = list(formatter = htmlwidgets::JS(
    "function() {
        return Math.abs(this.value); /* all labels to absolute values */
      }"
  ))) %>%
  hc_xAxis(categories = PyramidLevels, reversed = FALSE) %>%
  # Format the x-axis categories (PyramidLevels)
  hc_xAxis(xCategories = PyramidLevels, crosshair = TRUE) %>%
  # Set the title and subtitle for the chart
  hc_title(text = "Males", align = "center", x = -115, y = 20, margin = 0,
           style = list(fontSize = "12px", color = "#FF0000")) %>%
  hc_subtitle(text = "Females", align = "center", y = 20, margin = 0,
              x = 250, style = list(fontSize = "12px", color = "#2f7ed8"))

In this modified code, we’ve added the crosshair parameter to the hc_xAxis() function. The xCategories parameter is used to specify the categories for the x-axis.

Example Use Cases

Here’s an example use case that demonstrates how to modify the hcaes() function to display absolute values in the tooltips:

# Create a new highchart object
PyramidPlot2 <- highchart() %>%
  hc_add_series(PopEDBinded, type = "bar", hcaes(x = c(PyramidLevels, PyramidLevels), y = abs(value),
    group = Gender), color = c("#2f7ed8", "#FF0000"),
    showInLegend = FALSE) %>%
  # Format the labels on the x-axis (y-axis per HC)
  hc_yAxis(labels = list(formatter = htmlwidgets::JS(
    "function() {
        return Math.abs(this.value); /* all labels to absolute values */
      }"
  ))) %>%
  hc_xAxis(categories = PyramidLevels, reversed = FALSE) %>%
  # Format the x-axis categories (PyramidLevels)
  hc_xAxis(xCategories = PyramidLevels, crosshair = TRUE) %>%
  # Set the title and subtitle for the chart
  hc_title(text = "Males", align = "center", x = -115, y = 20, margin = 0,
           style = list(fontSize = "12px", color = "#FF0000")) %>%
  hc_subtitle(text = "Females", align = "center", y = 20, margin = 0,
              x = 250, style = list(fontSize = "12px", color = "#2f7ed8"))

# Display the highchart object
print(PyramidPlot2)

This code creates a new Highcharter chart with two series: males and females. The hcaes() function is modified to display absolute values in the tooltips, and the x-axis labels are formatted to display absolute values correctly.

Conclusion

In this blog post, we’ve explored an issue with Highcharter’s tooltips that can lead to unexpected values being displayed. By modifying the hcaes() function to use absolute values for the y-values and formatting the x-axis labels to display absolute values correctly, we can resolve this issue and achieve accurate data visualization.

Understanding Highcharter and the Tooltip Issue