<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="coloredColumn.js"></script>
<script src="coloredPie.js"></script>
<script src="columnExample.js"></script>
<script src="pieExample.js"></script>
</head>
<body>
<div id="pie" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="bar" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
/* Styles go here */
(function (H) {
H.wrap(H.Axis.prototype, 'render', function (proceed) {
if (this.chart.userOptions.chart.type !== 'coloredPie') {
proceed.call(this);
}
});
H.wrap(H.seriesTypes.pie.prototype, 'translate', function (translate) {
translate.apply(this, Array.prototype.slice.call(arguments, 1));
if (this.chart.userOptions.chart.type === 'coloredPie') {
this.translateColors.call(this);
}
});
var seriesTypes = H.seriesTypes,
merge = H.merge,
extendClass = H.extendClass,
defaultOptions = H.getOptions(),
plotOptions = defaultOptions.plotOptions;
var colorSeriesMixin = {
optionalAxis: 'colorAxis',
colorKey: 'colorValue',
translateColors: seriesTypes.heatmap && seriesTypes.heatmap.prototype.translateColors
};
plotOptions.coloredPie = merge(plotOptions.pie, {});
seriesTypes.coloredPie = extendClass(seriesTypes.pie, merge(colorSeriesMixin, {
type: 'coloredPie',
axisTypes: ['colorAxis']
}));
}(Highcharts));
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'translate', function (translate) {
translate.apply(this, Array.prototype.slice.call(arguments, 1));
if (this.chart.userOptions.chart.type === 'coloredColumn') {
this.translateColors.call(this);
}
});
var seriesTypes = H.seriesTypes,
merge = H.merge,
extendClass = H.extendClass,
defaultOptions = H.getOptions(),
plotOptions = defaultOptions.plotOptions;
var colorSeriesMixin = {
optionalAxis: 'colorAxis',
colorKey: 'colorValue',
translateColors: seriesTypes.heatmap && seriesTypes.heatmap.prototype.translateColors
};
plotOptions.coloredColumn = merge(plotOptions.column, { });
seriesTypes.coloredColumn = extendClass(seriesTypes.column, merge(colorSeriesMixin, {
type: 'coloredColumn',
axisTypes: ['xAxis', 'yAxis', 'colorAxis']
}));
}(Highcharts));
$(function () {
$('#pie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
showAxes: true,
type: 'coloredPie'
},
title: {
text: 'Pie Chart With Custom Color Axis'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
coloredPie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [
{
name: 'Browser share',
data: [
{
name: 'Firefox',
value: 65.0,
y: 65.0,
colorValue: 65.0
},
{
name: 'IE',
value: 6.8,
y: 6.8,
colorValue: 6.8
},
{
name: 'Chrome',
value: 12.8,
y: 12.8,
colorValue: 12.8
},
{
name: 'Safari',
value: 8.5,
y: 8.5,
colorValue: 8.5
},
{
name: 'Opera',
value: 6.2,
y: 6.2,
colorValue: 6.2
},
{
name: 'Others',
value: 0.7,
y: 0.7,
colorValue: 0.7
}
]
}
],
colorAxis: {
stops: [
[0.2, '#E50000'],
[0.45, '#EDC60C'],
[0.5, '#E2EB0F'],
[1, '#0BB401']
],
min: 0,
max: 100,
startOnTick: false,
endOnTick: false,
labels: {
enabled: true,
format: '{value} %'
}
}
});
});
$(function () {
$('#bar').highcharts({
chart: {
type: 'coloredColumn'
},
title: {
text: 'Column Chart With Color Axis'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [
{
name: 'Geoffroy',
data: [
{
y: 5,
value: 5,
colorValue: 5
}
, {
y: 3,
value: 3,
colorValue: 3
}
,
{
y: 4,
value: 4,
colorValue: 4
},
{
y: 7,
value: 7,
colorValue: 7
},
{
y: 2,
value: 2,
colorValue: 2
}
]
},
{
name: 'Michael',
data: [
{
y: 10,
value: 10,
colorValue: 10
}
, {
y: 4,
value: 4,
colorValue: 4
}
,
{
y: 8,
value: 8,
colorValue: 8
},
{
y: 7,
value: 7,
colorValue: 7
},
{
y: 1,
value: 1,
colorValue: 1
}
]
},
{
name: 'JB',
data: [
{
y: 1,
value: 1,
colorValue: 1
}
, {
y: 5,
value: 5,
colorValue: 5
}
,
{
y: 6,
value: 6,
colorValue: 6
},
{
y: 10,
value: 10,
colorValue: 10
},
{
y: 0,
value: 0,
colorValue: 0
}
]
}
],
colorAxis: {
stops: [
[0.2, '#E50000'],
[0.45, '#EDC60C'],
[0.5, '#E2EB0F'],
[1, '#0BB401']
],
min: 0,
max: 10,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}'
}
}
});
});