We are migrating from a flash based charting library (FusionCharts) to a JavaScript based one (HighCharts).
This is what our current flash charts look like
And this is what I've got so far with HighCharts.
How can I remove the space (marked with big dumb red arrows) between the plot border and the actual chart data?
Here's my code: http://jsfiddle.net/ChrisMBarr/7JAcN/1/
var chart = new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'areaspline',
plotBorderWidth: 1,
spacingTop:2,
spacingRight:5,
spacingBottom:5,
spacingLeft:2,
borderWidth:1,
borderRadius:0,
borderColor:'#999'
},
credits: {
enabled: false
},
title: {
text: 'Total spam in the last 7 days'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
allowDecimals:false,
categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},
yAxis: {
allowDecimals:false,
alternateGridColor: '#F7F7F7',
title: {
text: 'Number of Emails',
margin:5
}
},
tooltip: {
formatter: function() {
var isSpam = this.series.name === _chartOptions.series[1].name
return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
}
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
"name": "Total Mail",
"color":"#339999",
"data": [2,3,4,7,8,8,8]
},{
"name": "Spam",
"color":"#003399",
"data": [2,2,4,4,4,6,8]
}]
});
This might help:
xAxis: {
min: 0.5, max: 5.5
...
where max = number of data point minus 1.5
You should use minPadding/maxPadding parameters but it doens't work with categories. So I suggest to remove categoreis, use min value and tickInterval
http://jsfiddle.net/7JAcN/3/
http://api.highcharts.com/highcharts#xAxis.minPadding
xAxis: {
allowDecimals:false,
minPadding:0,
maxPadding:0,
/*categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],*/
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},
The best way to remove paddings is to add pointPlacement: 'on'
plotOptions: {
areaspline: {
pointPlacement: 'on'
}
}
With option "tickmarkplacement" set to "on", the xAxis "startontick" option might help you:
xAxis: {
startOnTick: false,
tickmarkplacement:"on",
...
see
this jsfiddle, forked from the Highcharts API documentation
Related
I am looking for settings to change some of the frame-lines in the radar chart.
There are 3 types of lines I'd like to be customized:
The red triangle line outside.
The 3 blue lines from center to each corner.
The small green triangle.
I've searched a lot but totally had no clue. I have tried to change the lineWidth of the yAxis and it only changes the width of the upper vertical line.
Here below is the code. It uses the latest highcharts to render the chart, as of Sep 12 2021 when I'm writing this question, it's 9.2.2:
window.chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
polar: true,
type: 'area'
},
title: {
text: "radar chart title",
margin:33,
useHTML:true
},
tooltip: {
pointFormat: '<span style="color:{series.color}"><b>{point.y:,.0f}</b>'
},
plotOptions: {
animation:true
},
xAxis: {
categories: ["a","b","c"],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 4,
min: 0,
max:100
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: "Haha",
animation:true,
data: [52,119, 12],
lineWidth:4
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
Use plot lines for y-axis:
yAxis: {
...
plotLines: [{
color: 'red',
value: 100,
zIndex: 2
}]
}
Use gridLineColor for x-axis:
xAxis: {
...,
gridLineColor: 'blue'
}
Use gridLineColor for y-axis:
yAxis: {
gridLineColor: 'green',
...
}
Live demo: http://jsfiddle.net/BlackLabel/fm45ab3k/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
Is there a way to have a column chart with two different scales. I have played with the example from highcharts but the result is still not perfect: https://jsfiddle.net/dfq4b6xz/
The problem is that the columns are not in the center of there each section
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'cat1',
'cat2',
'cat3'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [null,null, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [null,null, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
});
It's caused by setting different pointPlacement for series. I suggest to use default setting for that option: http://jsfiddle.net/dfq4b6xz/1/
You are specifically telling the chart to place the points in that manner, using the pointPlacement property:
pointPlacement: 0.2
and
pointPlacement: -0.2
Remove those lines altogether, and it works as it should:
http://jsfiddle.net/jlbriggs/dfq4b6xz/2/
[[EDIT - Pawel answered while I was typing my answer... same solution...]]
With HighCharts 3.0, it is now possible to indicate to colors above and below one threshold. Like this example :
http://jsfiddle.net/highcharts/YWVHx/
Following code :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: data,
color: '#FF0000',
negativeColor: '#0088FF'
}]
});
});
});
Is it possible to have another threshold with a third color, like this for example :
Thanks in advance for your help.
It actually is possible if you don't mind plotting the data twice.
$('#container').highcharts({
chart: {
type: 'arearange'
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
threshold : 0,
data: data,
color: 'orange',
negativeColor: 'blue'
},
{
name: 'Temperatures',
threshold : 10,
data: data,
color: 'red',
negativeColor: 'transparent'
}]
});
});
http://jsfiddle.net/YWVHx/97/
A feature to solve this without "hacks" was added in Highcharts 4.1.0 (February 2015), called zones (API). The given problem can be solved like this, using zones:
plotOptions: {
series: {
zones: [{
value: 0, // Values up to 0 (not including) ...
color: 'blue' // ... have the color blue
},{
value: 10, // Values up to 10 (not including) ...
color: 'orange' // ... have the color orange
},{
color: 'red' // Values from 10 (including) and up have the color red
}]
}
}
See this JSFiddle demonstration of how it looks.
Unfortunately this option is not possible, but you can request your suggestion in http://highcharts.uservoice.com and vote for it.
By the way, I can try use a plotLine, like this:
yAxis: {
title: {
text: 'My Chart'
},
plotLines: [{
id: 'limit-min',
dashStyle: 'ShortDash',
width: 2,
value: 80,
zIndex: 0,
label : {
text : '80% limit'
}
}, {
id: 'limit-max',
color: '#008000',
dashStyle: 'ShortDash',
width: 2,
value: 90,
zIndex: 0,
label : {
text : '90% limit'
}
}]
},
http://jsfiddle.net/gabrielesandoval/efHq7/
Is there a way to fill in the gap between the y-axis and the first point. The first point on my chart should be "25 years" and i would like the area between 0 and 25 to be filled in as well. Even if the tooltip doesn't work for that point, I would just like to visually show that the values between 0 and the first point.
I tried adding a point with a x value of zero but that didnt work. The only area charts I have seen where there is no gap between the two axis and the area are examples where the chart is inverted. Is there a proper way to do this?
Current Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Monthly Comparison'
},
subtitle: {
text: '1 vs 2'
},
xAxis: {
min: 0,
categories: [0, '25 years', '30 years', '35 years', '40 years', '45 years']
},
yAxis: {
labels: {
formatter: function() {
return '$' + this.value;
}
},
min: 0,
title: {
text: 'Cost'
}
},
tooltip: {
shared: true,
valuePrefix: '$'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'series1',
data: [['',60],['25 years',60], ['30 years',60], ['35 years',60], ['40 years',60], ['45 years',60]]
}, {
type: 'area',
name: 'series2',
data: [['',90], ['25 years',100], ['30 years',175], ['35 years',300], ['40 years',400], ['45 years',400]]
}]
});
});
You should set minPadding/maxPadding as 0, but these parameters doesn't work with categories. So you need to use numeric xAxis, instead of categories.
The yAxis in my chart is reversed and has a fill area, this put the fill area above the spline. Is there a way to keep the fill area below the spline when the axis is reversed?
A working jsfiddle here
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: 'Fruit units'
},
reversed:true,
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' units';
}
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]
});
});
});
if you change the threshold to be like this jsfiddle
highcharts threshold ref here
plotOptions: {
areaspline: {
fillOpacity: 0.5,
threshold: 12
}
What worked for me was setting the threshold explicitly to null:
{
... (other series properties)
threshold: null,
...
}