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'},
]
}
]
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'},
]
}
]
- Relevent code please ! – Jashwant Commented Aug 29, 2012 at 20:24
- Sorry, coded added. First question I've ever asked. – iwannabaa Commented Aug 29, 2012 at 20:31
- Probably not what you want. But you could create a 3rd series by splitting the one in half where the green is one series and the other set are another series. The legend is really only for series and it is working as designed. You may also try and put annotations on the chart itself for the green items. – wergeld Commented Aug 29, 2012 at 20:58
- Please share the solution. – K Pradeep Kumar Reddy Commented Aug 25, 2021 at 14:44
1 Answer
Reset to default 14I just added an empty series with the properties needed (name and color) and it worked. Just in case you find yourself in this scenario.