Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add an item to Highcharts legend?

I have a graph with two series: column and spline. Programatically I changed the color of some columns that met some criteria, let's say the 10 lowest scores are rendered in green, while the rest is blue.

Now, in the legend, I have the series names, but it shows, obviously, the spline series name and the column series name in the default blue color. I want to know how to add a name to the legend for the columns that are rendered in green that says "lowest scores" for example.

EDIT:

The code for the series:

series: [{
  type: 'column',
  color: '#215868',
  name: 'Score per round ',
  data: [
    {y:65,name:'Caracas Country Club', color: '#7EB035'},
    {y:72,name:'Biltmore Golf Course', color: '#7EB035'},
    {y:72,name:'Nashua Country Club', color: '#7EB035'},
    {y:90,name:'Hilaman Park Golf Course'},
    {y:105,name:'Biltmore Golf Course'},
    {y:90,name:'Binks Forest Golf Club', color: '#7EB035'},
    {y:90,name:'Binks Forest Golf Club', color: '#7EB035'},
    {y:90,name:'Blackhawk Country Club | The Falls', color: '#7EB035'},
    {y:90,name:'Blackhawk Country Club | The Falls', color: '#7EB035'},
    {y:72,name:'Pembroke Country Club', color: '#7EB035'},
    {y:90,name:'The Greens At North Hills Country Club'},
    {y:90,name:'Havana Country Club | Kilamanjaro/Kenya'},
    {y:90,name:'Biltmore Golf Course'},
    {y:90,name:'Biltmore Golf Course'},
    {y:90,name:'Challenge At Santa Rita'},
    {y:100,name:'Lake Chabot Golf Course | Lake Chabot'},
    {y:90,name:'Hillcrest Golf & Country Club | Championship', color: '#7EB035'},
    {y:100,name:'Hillcrest Golf & Country Club | Championship'},
    {y:100,name:'Hillcrest Golf & Country Club | Championship'},
    {y:90,name:'Hillcrest Golf & Country Club | Championship', color: '#7EB035'},]
  },
  {
    type: 'spline',
    name: 'Avg Score',
    color: '#009900',
    data: [
      {y:89.9,name:'Caracas Country Club'},
      {y:89.4,name:'Biltmore Golf Course'},
      {y:88.9,name:'Nashua Country Club'},
      {y:88.9,name:'Hilaman Park Golf Course'},
      {y:89.4,name:'Biltmore Golf Course'},
      {y:89.4,name:'Binks Forest Golf Club'},
      {y:89.4,name:'Binks Forest Golf Club'},
      {y:89.4,name:'Blackhawk Country Club | The Falls'},
      {y:89.4,name:'Blackhawk Country Club | The Falls'},
      {y:89.0,name:'Pembroke Country Club'},{y:89.0,name:'The Greens At North Hills Country Club'},
      {y:89.0,name:'Havana Country Club | Kilamanjaro/Kenya'},
      {y:89.1,name:'Biltmore Golf Course'},
      {y:89.1,name:'Biltmore Golf Course'},
      {y:89.1,name:'Challenge At Santa Rita'},
      {y:89.3,name:'Lake Chabot Golf Course | Lake Chabot'},
      {y:89.4,name:'Hillcrest Golf & Country Club | Championship'},
      {y:89.6,name:'Hillcrest Golf & Country Club | Championship'},{y:89.8,name:'Hillcrest Golf & Country Club | Championship'},
      {y:89.8,name:'Hillcrest Golf & Country Club | Championship'},
    ]
  }
]
like image 686
iwannabaa Avatar asked Dec 11 '22 23:12

iwannabaa


1 Answers

I just added an empty series with the properties needed (name and color) and it worked. Just in case you find yourself in this scenario.

like image 133
iwannabaa Avatar answered Dec 27 '22 00:12

iwannabaa