jquery - How to style diffrent Collor Coulmn in Highcharts -
can please take @ this demo , let me know how can set diffrent color foe each of columns in chart?
$(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'world\'s largest cities per 2014' }, subtitle: { text: 'source: <a href="http://en.wikipedia.org/wiki/list_of_cities_proper_by_population">wikipedia</a>' }, xaxis: { type: 'category', labels: { align: 'center', style: { fontsize: '13px', fontfamily: 'verdana, sans-serif' } } }, yaxis: { min: 0, title: { text: 'population (millions)' } }, legend: { enabled: false }, tooltip: { pointformat: 'population in 2008: <b>{point.y:.1f} millions</b>', }, series: [{ name: 'population', data: [ ['shanghai', 23.7], ['lagos', 16,1], ['instanbul', 14.2], ], datalabels: { enabled: true, rotation: 0, color: '#ffffff', align: 'center', x: 5, y: 25, style: { fontsize: '14px', fontfamily: 'verdana, sans-serif', textshadow: '0 0 3px black' } } }] }); });
thanks
you can 2 different ways. first can explicitly give each point own color involves explicitly keying each other value in data
element (name
, y
, etc):
data: [ {name: 'shanghai', color: 'red', y: 23.7}, {name: 'lagos', color: 'blue', y: 16.1}, {name: 'instanbul', color: 'green', y:14.2} ]
secondly can specify parameter depends on highcharts color array. use colorbypoint
series attribute available bar
, column
types (at least):
... name: 'p2', colorbypoint: true, data: ...
live demo.
Comments
Post a Comment