I took the code from highcharts demo. The columns are in the color. I would like to modify colors, smt. like to assign blue to some of them and the rest in orange. I post here the code and the link in jsfiddle below. Here is the code:
html:
<script src="https://code.highcharts.com/highcharts.js"></script
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing ...
</p>
</figure>
js:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'World\'s largest cities per 2017'
},
subtitle: {
text: 'Source: Wikipedia'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['Shanghai', 24.2],
['Beijing', 20.8],
['Karachi', 14.9],
['Shenzhen', 13.7],
['Guangzhou', 13.1],
['Istanbul', 19.7],
['Mumbai', 12.4],
['Moscow', 14.2],
['São Paulo', 12.0],
['Delhi', 18.7],
['Kinshasa', 15.5]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
https://jsfiddle.net/dcmpg1z2/1/
I would like to see "Delhi" and "Kinshasa" in orange color. And the rest in different color. How can I do it?
if you want each category to take different color, you should set colorByPoint to true
and explicitly specify the colors for the ones you want to set by passing an object with the name, y and the color property.
here is the fiddle
Related
I'm building a pie chart in Highcharts:
http://jsfiddle.net/y3j8ybrg/
I want to be able to set the background color of each wedge based on the value of the data that wedge represents.
The API documentation doesn't seem to make this available. It shows how one can use a closure or function to generate the colors array but not how one can give that function access to the point value.
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button">Add point</button>
JavaScript:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: '#323f48',
plotBorderColor: '#323f48',
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: '#323f48',
borderColor: '#323f48'
},
title: {
text: 'CHART<br/><span class="white">sub-header</span>',
align: 'center',
verticalAlign: 'middle',
y: -3,
style: {
fontWeight: 'bold',
color: 'white',
fontSize: '10px'
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -510,
style: {
fontWeight: 'bold',
color: '#323f48'
}
},
startAngle: -180,
endAngle: 180,
center: ['50%', '50%'],
animation: false,
borderColor: '#323f48',
borderWidth: '0px'
}
},
series: [{
type: 'pie',
name: 'days',
innerSize: '90%',
data: [
['empty', 56.00],
['days', 44.00],
],
// I want this to be a function that returns a color depending upon the data series point value.
colors: (function(){return [
'#59636b',
'#8edd65'
]})(),
}],
});
});
Probably best to either pre-calculate the colors and create the data array as {x: 'empty', y: 56.00, color: '#somecolorhex',.. or to update the colors on load in a chart.events.load call. You could add the getColor() function in the data element as well but you would have to repeat the data value.
getColor = function(val) {
if (val >= 50) {
return 'red'
} else {
return 'blue'
}
}
series: [{
type: 'pie',
name: 'days',
innerSize: '90%',
data: [{
x: 'empty',
y: 56.00,
color: getColor(56.00)
}, {
x: 'days',
y: 44.00,
color: getColor(44.00)
}]
}]
Sample jsfiddle
I want to create barchart having custom horizontal lines added to show average benchmarks. Also there is labels added on these lines to show benchmark heading. I get line labels cut off as shown in following image.
Barchart
Also if plot line value is beyond the range plotted, plot line get hidden. How to handle this case in highchart? Following is the code that I am using.
$(function () {
$('#chartContainer').highcharts({
credits: {
enabled: false
},
colors: ['#3C791D','#BEBEBE','#7F7F7F'],
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Great', 'Neutral', 'Bad']
},
yAxis: {
title: {
text: ''
},
plotLines:[{
value:80,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'XYZ Average: 80%',
align: 'right'
}
},{
value:60,
color: '#000000',
width:2,
zIndex:4,
label:{
text:'PQR Average: 60%',
align: 'right'
}
}]
},
legend: {
enabled : false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter:function() {
return this.y + '%';
}
},
colorByPoint: true,
enableMouseTracking: false
}
},
series: [{
type: 'column',
name: "s",
data: [70, 10, 40]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<html>
<body>
<div id="chartContainer"></div>
</body>
</html>
Set height for the chart and also the max value for Y-axis
chart: {
height: 600
},
yAxis: {
min: 0,
max: 100
}
I need to display the labels on X axis from the JSON data that I am pulling from my API.
but I think we can only give static labels for the axis ?
Can anyone please let me know how to give dymanic labels?
Here is my code:
var obj = data[$("#host").val()].iscsi_lif.result.sectoutput.sect;
var my_data_list = [];
var readsize = [];
for(var key in obj) {
var avg_latency = parseInt(obj[key].avg_latency);
var rsize = parseInt(obj['read_size_hist.<=128KB']);
my_data_list.push('Average Latency', parseInt(avg_latency));
readsize.push('Read Size',parseInt(rsize));
}
$('#graphcontainer2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Reads Sizing'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Read Size'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Read Size: <b>{point.y:.1f}%</b>'
},
series: [{
name: 'Read Size',
data: my_data_list,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
To use category xAxis type, point formats should include x-value as string, or name property. For example, expected input data format is:
series: [{
data: [ ['Me', 10], ['Myself', 20], ['I', 100] ]
}]
Will create three categories on xAxis: Me | Myself | I
So in your code should be something like this:
my_data_list.push([myLabel, parseInt(avg_latency)]);
Where myLabel is category string.
Instead type:category , use categories in xAxis (if you are not using highstock ,using highcharts)
chart.xAxis[0].setCategories(categories);
See working fiddle here
I have this highchart graph displayed on my website. How can I set an interval for my x-axis? e.g. I want the fist value to be displayed and then skip the second and display the third.
Can this be done? Or do you always just HAVE to display all the data you're passing to the axis in an array?
My code: (timestamp is a JS array that contains my time. I can get that time in epoch format. act and temps are arrays for data to be plotted along y-axis)
$(function () {
$('#tempactgraph').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature & Activity Monitoring '
},
subtitle: {
text: 'Source: Cowlar Sensors'
},
xAxis: [{
categories: timestamp,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Activity',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} xx',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Activities',
type: 'spline',
connectNulls: 1,
yAxis: 1,
data: act,
tooltip: {
valueSuffix: ' xx'
}
}, {
name: 'Temperature',
type: 'spline',
connectNulls: 1,
data: temps,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
You need to Add a tickInterval:2 to your x-axis decleration like so
xAxis: [{
categories: timestamp,
crosshair: true,
tickInterval: 2
}],
Highcharts API Reference
My code is as follows :
var options = {
chart: {
type: 'column',
events: {
click: $scope.goToPath(link)
}
},
title: {
text: ""
},
xAxis: {
categories: ['You', 'Average', 'Top Quartile'],
labels: {
style: {
fontSize: '14px',
color: 'grey'
}
}
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
column: {
colorByPoint: true,
dataLabels: {
enabled: true,
color: '#000000',
style: {
fontWeight: 'bold'
},
formatter: $scope.getBarValues()
}
}
},
series: [{
showInLegend: true,
name: 'Planning Sites',
data: metric1["chart_numbers"],
colors: ['#3399CC', '#CCCC33', '#686868']
}, {
showInLegend: true,
name: 'Build Out And Implementation',
data: metric2["chart_numbers"],
colors: ['#99CBE5', '#E4E599', '#BFBFBF']
}
]
}
Here, I want to customize the legend shown so that it does not use the colors specified in the colors array of each of the series element. How can I do that?
I want the legend as follows :
Black color - Planning
Grey color - Build Out
Here is the jsFiddle : http://jsfiddle.net/Kc55H/
For each series you can set also color, see: http://jsfiddle.net/Kc55H/1/