CODEWITHSUNDEEP
highchartshover
patL
patL

Reputation: 2299

change bar colors dynamically - highcharts

I'm a R programmer trying to parse some JS code though highcharter package.

I'm trying to change each bar color on hover with this example based on this question.

I've tried this:

plotOptions: {
  column: {
    events: {
      mouseOver: function () {

        this.chart.series[this.index].update({
          color: 'blue'
        });
      },
      mouseOut: function () {

        this.chart.series[this.index].update({
          color: '#b0b0b0'
        });                           
      }
    };
    states: {
      hover: {

        color: colors[x]                                                           
      }
    }

  }
}

However I can only highlight with the 'blue' color. How can I use a different color for a different column?

Thank you.

Upvotes: 0

Views: 711

Answers (1)

daniel_s
daniel_s

Reputation: 3732

You see only the blue color on all columns, because you set those events on series. In order to achieve it, you can create arrays with colors and assign it to general chart object on chart.events.load. Then in series.point.events.mouseOver and mouseOut should be able to change the color by point index. Here is the example code:

highchart() %>% 
  hc_chart(events = list(
    load = JS("function() {this.customColors = ['red', 'green', 'blue']}")
  )) %>% 
  hc_series(
    list(
      data =  abs(rnorm(3)) + 1,
      type = "column",
      color = '#ddd',
      point = list(
        events = list(
          mouseOver = JS("function() {this.update({color: this.series.chart.customColors[this.index]})}"),
          mouseOut = JS("function() {this.update({color: '#ddd'})}")
        )
      )
    )
  )

API Reference:

https://api.highcharts.com/highcharts/series.column.point.events

https://api.highcharts.com/highcharts/chart.events.load

Upvotes: 2

Related Questions