CODEWITHSUNDEEP
rhighchartsr-highcharter
giocomai
giocomai

Reputation: 3518

Interactive row filtering in highcharts/highcharter stacked barchart

I'm using highcharts graphs (produced directly with highcharter in R) in a website. I'd like to include the following graph, created with the R code I paste below.

Example stacked barchart in highcharter

It looks quite nice, and I like to have all the cases in a single graph. At the same time, this is also rather unreadable, so I would like there to be an easy way to filter cases by simple clicking, enabling for example to show only big countries or only small countries (this is just an example, I included in the data frame below the relevant column, not necessarily with accurate data), or possibly some other criteria.

It would be great if it was somehow possible to add additional categories in the legend that are not associated with any colour... so, the legend would look: "Foreign films", "Domestic films", "Big countries", "Small countries", and it would be possible to click on one of these to filter out rows.

Here is my code:

library("highcharter")
library("tidyverse")
data <- structure(list(Market = c("TR", "FR", "DK", "IT", "FI", "GB", 
                          "DE", "CZ", "NO", "PL", "SE", "ES", "NL", "LT", "RU", "IE", "BE", 
                          "MK", "IS", "EE", "CH", "GR", "SI", "LV", "HR", "SK", "AT", "CY", 
                          "PT", "HU", "RO", "BG", "GE", "BA", "ME", "LU", "LI", "TR", "FR", 
                          "DK", "IT", "FI", "GB", "DE", "CZ", "NO", "PL", "SE", "ES", "NL", 
                          "LT", "RU", "IE", "BE", "MK", "IS", "EE", "CH", "GR", "SI", "LV", 
                          "HR", "SK", "AT", "CY", "PT", "HU", "RO", "BG", "GE", "BA", "ME", 
                          "LU", "LI"),
               ShareType = structure(c(2L, 2L, 2L, 2L, 2L, 2L, 
                                       2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 
                                       2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 1L, 
                                       1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
                                       1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
                                       1L, 1L, 1L, 1L),
                                     .Label = c("Foreign films", "Domestic films"                                        ), class = "factor"),
               Share = c(56.4231469116968, 39.5431632399628, 
                         29.749523693326, 28.5269121653326, 27.9677825334658, 25.6887519386218, 
                         24.5183688581634, 23.8053084668207, 23.4444297175255, 22.1408227941667, 
                         21.9442142508713, 19.8078462534516, 17.7571013104236, 17.6063964526984, 
                         17.1661554764454, 16.4523079869757, 14.3484355432636, 9.63514220778755, 
                         8.75976247979877, 8.66662103906533, 7.13410891884076, 7.09263418232668, 
                         5.88023165120894, 5.52250260158876, 5.03914297790774, 5.03160117718049, 
                         4.34368469630644, 4.32982731423597, 4.13061558536597, 3.31738241708324, 
                         2.88418649997091, 2.61611677620005, 2.01407803049061, 1.17033479389436, 
                         0.947702322262302, 0.835625773810161, 0, 43.5768530883032, 60.4568367600372, 
                         70.250476306674, 71.4730878346674, 72.0322174665342, 74.3112480613782, 
                         75.4816311418366, 76.1946915331793, 76.5555702824745, 77.8591772058333, 
                         78.0557857491287, 80.1921537465484, 82.2428986895764, 82.3936035473016, 
                         82.8338445235546, 83.5476920130243, 85.6515644567364, 90.3648577922124, 
                         91.2402375202012, 91.3333789609347, 92.8658910811592, 92.9073658176733, 
                         94.1197683487911, 94.4774973984112, 94.9608570220923, 94.9683988228195, 
                         95.6563153036936, 95.670172685764, 95.869384414634, 96.6826175829168, 
                         97.1158135000291, 97.3838832238, 97.9859219695094, 98.8296652061056, 
                         99.0522976777377, 99.1643742261898, 100),
               BigSmall = c("Big", 
                            "Big", "Small", "Big", "Small", "Big", "Big", "Small", "Small", 
                            "Small", "Small", "Big", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Big", "Big", "Small", "Big", "Small", "Big", "Big", "Small", 
                            "Small", "Small", "Small", "Big", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small", "Small", "Small", "Small", "Small", "Small", "Small", 
                            "Small"),
               Country = c("Turkey", "France", "Denmark", "Italy", 
                           "Finland", "United Kingdom", "Germany", "Czech Republic", "Norway", 
                           "Poland", "Sweden", "Spain", "Netherlands", "Lithuania", "Russian Federation", 
                           "Ireland", "Belgium", "Former Yugoslav Republic of Macedonia", 
                           "Iceland", "Estonia", "Switzerland", "Greece", "Slovenia", "Latvia", 
                           "Croatia", "Slovakia", "Austria", "Cyprus", "Portugal", "Hungary", 
                           "Romania", "Bulgaria", "Georgia", "Bosnia-Herzegovina", "Montenegro", 
                           "Luxembourg", "Liechtenstein", "Turkey", "France", "Denmark", 
                           "Italy", "Finland", "United Kingdom", "Germany", "Czech Republic", 
                           "Norway", "Poland", "Sweden", "Spain", "Netherlands", "Lithuania", 
                           "Russian Federation", "Ireland", "Belgium", "Former Yugoslav Republic of Macedonia",
                           "Iceland", "Estonia", "Switzerland", "Greece", "Slovenia", "Latvia", 
                           "Croatia", "Slovakia", "Austria", "Cyprus", "Portugal", "Hungary", 
                           "Romania", "Bulgaria", "Georgia", "Bosnia-Herzegovina", "Montenegro", 
                           "Luxembourg", "Liechtenstein")), class = c("tbl_df", "tbl", "data.frame"
                           ), row.names = c(NA, -74L), .Names = c("Market", "ShareType", 
                                                                  "Share", "BigSmall", "Country"))

data %>% 
  hchart("bar", hcaes(x = Country, y = Share, group = ShareType), color = c("#dfba47", "#8cbea3")) %>% 
  hc_plotOptions(series=list(stacking='normal')) %>% 
  hc_title(text = "Who watches most movies produced in their own country?",
           style = list(fontWeight = "bold")) %>%
  hc_subtitle(text = "Average for period 2012-2016") %>% 
  hc_xAxis(title = "") %>%
  hc_yAxis(title = "", min = 0, max = 100, labels = list(format = "{value}%")) %>% 
  hc_tooltip(pointFormat = "<span style=\"color:{series.color}\">{series.name}</span>:
             <b>{point.percentage:.1f}%</b>",
             shared = TRUE)

Upvotes: 1

Views: 821

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

Example in JS:

You can create a "phantom" series with no data just to use its legendItemClick event:

  {
    // phantom series with no data
    name: 'Change the color of the second point',
    data: [],
    events: {
      legendItemClick: function() {
        var point = this.chart.series[0].points[1]; // second point
        if (point) {
          point.update({
            color: (ctr++ % 2) ? 'red' : 'blue'
          });
        }
        this.chart.redraw();
      }
    }
  }

Live demo: https://jsfiddle.net/kkulig/0k4m5d2q/

In this event you should handle data/categories alterations. In Highcharts it's not quite intuitive to manipulate visibility of categories because they're associated with y axis and not with the data itself.

This topic explains how to tackle this subject: https://forum.highcharts.com/highcharts-usage/hide-and-show-categories-with-checkboxes-t39380/

Upvotes: 2

Related Questions