Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pie chart onPoint option not working as expected on hcmap/Feature request: update highcharts #814

Open
mawtee opened this issue Apr 8, 2024 · 0 comments

Comments

@mawtee
Copy link

mawtee commented Apr 8, 2024

I am looking to create a highmap with overlaid piecharts based on this JSfiddle. I am fairly confident that my implementation, found below, is correct, given that I lifted the raw JS code from the above fiddle. Still, the output is not what I expect, since each pie series is rendered in the same place, rather than on each point in the series. I have enabled connector labels on the pie charts, which makes it plain to see that multiple piecharts are rendered on top of each other.

Based on this thread, I believe that the problem likely stems from some type of bug in the implementation of the onPoint option of the pie chart series. In the above thread a user of vueJS highcharts encountered the same issue that I have, and the solution in this case was for user to update to the latest version of highcharts (10.2 at the time). I have the latest version of highcharter installed, and so this will not work in my case.

It would be awesome if this issue could looked into. I suspect it might require updating highcharter to the latest version of highcharts, hence the feature request. An initial stackoverflow thread describing the problem in slightly more detail can be found here.

Image of output with connector labels on piecharts

# Required
library(tidyverse)
library(highcharter)

# Create data
data <- tibble(
  idd = c(
    "PL",
    "NO",
    "DE",
    "BY",
    "FR",
    "CZ",
    "SE"
  ),
  successes = c(
    15,
    20,
    10,
    10,
    1,
    20,
    20
  ),
  failures = c(
    3,
    2,
    10,
    15,
    2,
    20,
    8
    
  )
)
data$value <- data$successes-data$failures

# Plot
hcmap("custom/world-highres",
      data = data,
      joinBy = c("iso-a2", "idd"),
      keys =c('idd', 'successes', 'failures', 'value')#,
      #dataLabels = list(enabled = TRUE, format = "{point.idd}",
                        #style=list(fontSize='10'))
)%>%
  hc_colorAxis(
    dataClasses=list(
      list(
        from = -15,
        to = -1,
        color = '#faa',
        name = 'Successes'
      ),
      list(
        from = 0,
        to = 0,
        color = '#ddd',
        name = 'Neutral'
      ),
      list(
        from = 1,
        to = 18,
        color = '#adf',
        name = 'Neutral'
      )
    )
  )%>%
  hc_chart(events = list(load = JS("function() {
  var chart = this;
  chart.series[0].points.forEach(country => {
  if (!country.isNull) {
    chart.addSeries({
      type: 'pie',
      name: country.idd,
      zIndex: 6,
      size: 40,
      dataLabels: {
        enabled: true
      },
      onPoint: {
        id: country.idd
      },
      states: {
        inactive: {
          enabled: true
        }
      },
      data: [{
        name: 'Successes',
        y: country.successes,
        color: '#adf'
      }, {
        name: 'Failures',
        y: country.failures,
        color: '#faa'
      }]
    }, false);
  }
        }
        );
  chart.redraw();
}
"
  )
  )
  )
@mawtee mawtee changed the title Pie chart onPoint option not working as expected Pie chart onPoint option not working as expected on hcmap Apr 8, 2024
@mawtee mawtee changed the title Pie chart onPoint option not working as expected on hcmap Pie chart onPoint option not working as expected on hcmap/Feature request: update highcharts Apr 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant