score:2
please see brief mention of similar problem as highcharter github issue here.
i am using the covid19
package to have some readily available data to use as illustration. i hypothetically set a few countries to different cfr_level
values as examples (this is just to demonstrate, they do not reflect actual case fatality rates).
with hchart
use coloredline
and multicolor_series
module, which allows for individual segmentcolor
values to be used (more info and examples here on plugins and modules). then, you can use a column for group
and a different column for segmentcolor
.
in addition, i included hc_add_series
with empty data to add a custom legend.
edit (12/24/20): if you set color
in hcaes
in hchart
you can get the tooltip hover color to match based on cfr_level
. for this example, i put the colors in hex equivalents (cfr_level
in this case is a color and not a character value).
library(tidyverse)
library(highcharter)
library(covid19)
df <- covid19()
df$cfr_level <- "#008000"
df$cfr_level[df$id == "ind"] <- "#ffff00"
df$cfr_level[df$id == "usa"] <- "#ff0000"
df %>%
filter(id %in% c("usa", "bra", "rus", "ind")) %>%
hchart(type = "coloredline",
hcaes(x = date, y = confirmed, group = id, color = cfr_level, segmentcolor = cfr_level),
showinlegend = f) %>%
hc_add_series(name = "low", color = "#008000", marker = list(symbol = "line")) %>%
hc_add_series(name = "med", color = "#ffff00", marker = list(symbol = "line")) %>%
hc_add_series(name = "high", color = "#ff0000", marker = list(symbol = "line")) %>%
hc_add_dependency("plugins/multicolor_series.js")
plot
Source: stackoverflow.com
Related Query
- how to change color of line chart in highchart based on a categorical column in r?
- Highcharts - Column Chart Drilldown, how to change the drilldown bar color based on some value
- highcharts: column chart color change based on value
- How to Change Highchart Column Color Dynamicly
- how to dynamically change column chart to mirror chart using highchart
- How to change tooltip of a column chart programmatically in highchart
- How to change color of bar in column chart with different level of percentage in highcharts
- How to change rCharts Highchart Color based on Factor Variable
- Column based Highchart drilldown series assign color code to each column
- How to change color on the Highchart Sparkline line only?
- how to change the color of column in chart ?
- How to change the series color and mark after I draw the line chart in highcharts?Does it has databound event?
- How to dynamically change line color based on value being lower than previous in highcharts
- How to change default line color in highchart stock GUI tools?
- How to make drill down in stacked Column Line chart in Highchart
- How to change series legend text color in HighChart chart?
- Highcharts, How can I change the datalable distance in a pie chart based on the value
- How to set series-label to false by default and change the color of series label text in highchart
- Highcharts: Change Highlight Color of Column Chart
- How to add a horizontal line in Column bar chart in Highcharts plugin?
- In highcharts how do I change the color of the line above the categories?
- How to change color of donut chart in highchart?
- How to set border in column chart - Highchart
- How to change space value between grid and yAxis in Highcharts line chart
- How to change the background color of measure tool in stock chart in highstock?
- Change line color in area-spline chart in Highcharts
- How to Change the color of the text in donut chart
- Highcharts: how to change line color when hovering a scatterplot series
- Set series color based on X axis on a column Highchart
- How to change the color of single point in spiderweb chart
More Query from same tag
- Highcharts plotlines above area using DOM
- Highstock chart not loading with sample data
- draw linear-gradient line chart in highchart.js based on another series
- HighChart on Android dynamically update
- Can highcharts crosshairs show on top of area chart fill?
- HighChart- Plot Stacked Bar Chart on Status for Every Minute
- Remove step line points
- Setting gauge limits in highcharts using variable
- Add and remove cross datas with highcharts
- Highcharts redundant time data with multiple axes
- How to remove tick lines from secondary y axis in highcharts heatmap graph
- Highchart - Is it possible to add data to series in stockchart.
- react-highcharts: canvas size changes when changing tabs
- Highcharts pie slice linear gradient
- Highcharts stacked column charts ( Parse json string for series)
- Highcharts - Is it possible to display the my own text on the data-labels of line chart?
- Load JSON to Highchart Series
- Highcharts inverted line where dates go upwards, not downwards (reversed series)?
- High charts: Can we reduce the distance between two bars in grouped column chart
- _colorIndex and _symbolIndex when creating object
- Highcharts: minRange=1 creates -1 and 1 on a chart with one data point
- Trellis chart x categories values are not displaying correctly in Highcharts
- javascript: json data parsing
- Highcharts.js variable pie chart not rendering data correctly along percentage dataLabels
- HighCharts Funnel with Centered Labels instead of on the right
- How to set xAxis minimum and maximum values on Highstock?
- Highcharts: multiple yAxes labels overlap
- Highcharts: some x-axis labels are disappearing after using setExtremes()
- Server-side rendering with Highcharts in C#
- HighChart pointPlacement on y-axis