jbkunst / highcharter

R wrapper for highcharts
http://jkunst.com/highcharter/
Other
719 stars 148 forks source link

scatter plot with colorAxis #396

Open slowkow opened 6 years ago

slowkow commented 6 years ago

Can I use a color scale with scatter plots?

Your comment on this Stackoverflow question suggests it is not possible:

This is a highchartsjs restriction, by now, you can't use or put a colorAxis in a scatter plot on highcharts – jbkunst May 19 '17 at 14:55

The related issue #317 has a hack that suggests this might be possible.

Here's my plot:

library(highcharter)

hchart(mtcars, "scatter", hcaes(x = wt, y = mpg, color = qsec)) %>%
  hc_colorAxis()

image

There are two problems:

  1. The colors in the scale do not match the colors of the points.
  2. The color scale does not have tick marks.

By the way, thank you for your fantastic work! Your package is a valuable contribution for the R community. 👍

slowkow commented 6 years ago

Paweł Fus posted this fiddle in a related Stackoverflow post. He modified the pie chart to include a color scale.

This might be a good starting point to learn how to make a proper color scale for scatter plots.

http://jsfiddle.net/w9nuha8n/4/

w9nuha8n
slowkow commented 6 years ago

I hacked the Stackoverflow code to make a colorbar for a scatter plot.

https://gist.github.com/slowkow/2734989182ea46e3a0a8a7299c2e25f9

scatter-with-colorbar_html

It looks like this file might be a good place to start hacking:

https://github.com/jbkunst/highcharter/blob/master/R/helpers.R#L302-L310

I'll post an update if I make any progress on this...

jbkunst commented 6 years ago

Hey @slowkow ,

Thanks so much to come up with this. This is a really nice missing feature. I'm checking the jsfiddle and your gist and it's seems easy to implement if we include as a custm script.

Thanks again!

slowkow commented 6 years ago

Great! Once you have some code, I'll be happy to test it.

Ideally, I would expect highcharter to automatically mimic ggplot2, so something like this would happen:

if (is.numeric(color) || is.integer(color)) {
    # make colorbar
} else if (is.factor(color) || is.character(color)) {
    # make legend with colors for each level
}

Excited to see what you come up with! 😄