Hello I am working with highchart with Javascript and currently struggling with some requirements. I have an existing highchart which generates pie and bar charts.it takes some default colors. But now I need to assign color depending on the column of a table for which the pie or bar chart is generated. For example suppose a table has 2 columns Fruits and Vegetables. In fruits there is Apple orange and vegetables has potato and cucumber. The chart for fruits column should be colored red for apple field and orange for orange. Likewise chart for vegetables should be colored brown for potato and green for cucumber. Since the data is dynamic and its in an array I am just not able to do the right mapping. I tried to pass it as a json in ‘colors’ attribute of highchart, tried to explicitly give name and color in the data field od ‘series’ attribute of highchart. But nothing worked. Can anyone advise. Thanks in advance.
Also one more point I also need to resize the pie which is loaded inside an iframe. As the size of iframe is increasing the pie size also should increase. I tried this too with some code search in Google but in vain.
var chartData = {
colors: [
"#32456C",
"#009A8F",
"#FABE00",
....
],
chart: { renderTo: "displayarea", backgroundColor: "transparent" },
title: { text: key },
xAxis: {},
plotOptions: {
line: { dataLabels: { enabled: false }, enableMouseTracking: true },
series: { animation: false , data: [{ name:"Apple", color: "#FFFF00"}, {name: "Orange",color: "#FF0000"}]},
<i> </i> };
colors
` Highcharts.chart('container', {
colors: [
"#32456C",
"#009A8F",
"#FABE00",
'grey',
'magenta'
],
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
color: 'blue',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84,
color: 'green'
}, {
name: 'Firefox',
y: 10.85,
color: 'yellow'
}, {
name: 'Edge',
y: 4.67,
color: 'lightblue'
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
series
`var colors = {
'Medium': '#FFFF00',
'Urgent': '#FF0000'
};
var chartData = { <br/>
chart: { renderTo: "container", backgroundColor: "transparent" },
title: { text: key },
xAxis: {},
plotOptions: {
line: { dataLabels: { enabled: false }, enableMouseTracking: true },
series: { animation: false },
credits: { enabled: false },
exporting: { enabled: false }
};
case "pie":
var hiddenfilter = JSON.parse(widget.getValue("hiddenfilter"));
var colnumber = widget.getValue("columnnumber");
<i> </i> var set = { name: key, data: [] };
<i> </i> for (var data in column.content) {
<i> </i> if (column.content.hasOwnProperty(data)) {
<i> </i> var setSelected =
<i> </i> hiddenfilter[colnumber].indexOf(
<i> </i> column.content[data].toString()
<i> </i> ) != -1
<i> </i> ? true
<i> </i> : false;
<i> </i> set.data.push({
<i> </i> name: column.content[data].toString(),
<i> </i> y: column.count[data],
<i> </i> sliced: setSelected,
<i> </i> selected: setSelected
<i> </i> });
<i> </i> }
<i> </i> }
<i> </i> dataset.push(set);
<i> </i> chartData.plotOptions = {
<i> </i> pie: {
<i> </i> allowPointSelect: true,
<i> </i> cursor: "pointer",
<i> </i> point: {
<i> </i> events: {
<i> </i> /* searchTable */
<i> </i> click: function(evt) {
<i> </i> var selected = this.name.toString();
<i> </i> if (!evt.point.options.selected) {
<i> </i> var data = {
<i> </i> type: "search",
<i> </i> column: colnumber,
<i> </i> message: selected
<i> </i> };
<i> </i> PlatformAPI.publish(topicName, data);
<i> </i> helper.handleFilter(data);
<i> </i> }
<i> </i> },
<i> </i> unselect: function() {
<i> </i> var selected = this.name.toString();
<i> </i> var data = {
<i> </i> type: "remove",
<i> </i> column: colnumber,
<i> </i> message: selected
<i> </i> };
<i> </i> PlatformAPI.publish(topicName, data);
<i> </i> helper.handleFilter(data);
<i> </i> }
<i> </i>
<i> </i> }
<i> </i> },
<i> </i> dataLabels: {
<i> </i> enabled: true,
<i> </i> format: "<b>{point.name}</b>: {point.percentage:.1f} %",
<i> </i> style: {
<i> </i> color:
<i> </i> (Highcharts.theme &&
<i> </i> Highcharts.theme.contrastTextColor) ||
<i> </i> "black"
<i> </i> }
<i> </i> },
<i> </i> distance:-20
<i> </i> }
<i> </i> };
<i> </i> chartData.series = dataset;
<i> </i> chartData.xAxis.categories = [key];
<i> </i> chartData.chart.type = "pie";
<i> </i> break;
series.data
`series
`set.data.push({
name: column.content[data].toString(),
y: column.count[data],
sliced: setSelected,
selected: setSelected,
color: column.content[data]
});
I guess that column.content[data]
`set.data.push({
name: column.content[data].toString(),
y: column.count[data],
sliced: setSelected,
selected: setSelected,
color: colors[column.content[data]]
});
colors
`var colors = {
'Medium': '#FFFF00',
'Urgent': '#FF0000'
};
var chartData = {
<i> </i> chart: { renderTo: "container", backgroundColor: "transparent" },
<i> </i> title: { text: key },
<i> </i> xAxis: {},
<i> </i> plotOptions: {
<i> </i> line: { dataLabels: { enabled: false }, enableMouseTracking: true },
<i> </i> series: { animation: false },
<i> </i> credits: { enabled: false },
<i> </i> exporting: { enabled: false }
<i> </i> };
Can i possibly have another array for the colors for other values not defined in the series.[/quote]
Highcharts.chart({
colors: [
"#32456C",
"#009A8F",
"#FABE00",
'grey',
'magenta'
],
var colors = {
'Medium': '#FFFF00',
'Urgent': '#FF0000'
};
var defaultColors = [
"#32456C",
"#009A8F",
"#FABE00",
'grey',
'magenta'
];
var chartData = { <br/>
colors: defaultColors,
chart: { renderTo: "container", backgroundColor: "transparent" },
title: { text: key },
xAxis: {},
plotOptions: {
line: { dataLabels: { enabled: false }, enableMouseTracking: true },
series: { animation: false },
credits: { enabled: false },
exporting: { enabled: false }
};
series
`case "barcol":
var colnumber = widget.getValue("columnnumber");
var countedcoldata =helper.countKeys(column.content).content;
for (var data in column.content) {
if (column.content.hasOwnProperty(data)) {
var setSelected =
hiddenfilter[colnumber].indexOf(
column.content[data].toString()
) != -1
? true
: false;
dataset.push({
name: column.content[data].toString(),
data: [column.count[data]],
selected: setSelected,
color:colors[column.content[data]]
});
}
}
chartData.plotOptions = {
allowPointSelect: true,
cursor: "pointer",
point: {
/* searchTable */
events: {
click: function(evt) {
var selected = evt.point.series.name.toString();
<i> </i> if (!evt.point.options.selected) {
<i> </i> var data = {
<i> </i> type: "search",
<i> </i> column: colnumber,
<i> </i> message: selected
<i> </i> };
<i> </i> }
<i> </i> },
<i> </i> }
<i> </i> }
<i> </i> }
<i> </i> };
<i> </i> chartData.series = dataset;
<i> </i> chartData.xAxis.categories = countedcoldata ;
<i> </i> chartData.chart.type = "bar";
<i> </i> break;
countedcoldata
` <script src="https://code.highcharts.com/highcharts.js"></script>
0.1.9 — BETA 4.26