It seems like Highcharts is adding some spacing between the 1. series line start/series line end and the 2. vertical axis.
Please see the jsfiddle link and below screenshot for more details.
http://jsfiddle.net/8kbf2e1x/
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
xAxis: {
categories: ['D1', 'D2', 'D3', 'D4']
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom'
},
plotOptions: {
series: {
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
How do I get rid of this spaces? I want my series lines to expand from ened to end within the plot area with no gaps. Is it achievable with smaller number of data points? (e.g. in my case every series has only 4 data points)
check pointPlacement
when pointPlacement is "on", the point will not create any padding of the X axis.
plotOptions: {
series: {
pointPlacement: 'on'
}
},
Fiddle demo
Related
Hi guys I want to achieve something like this using HighCharts Stacked Column
This is my current code
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Cukai Semasa', 'Tunggakan Cukai']
},
series: [{
name: 'Baki Cukai Semasa',
data: [69000000, 60000000]
}, {
name: 'Kutipan Semasa',
data: [69000000, 60000000]
}]
Which resulting this chart
As you can see, my generated chart dont have the label for Tunggakan Cukai category (Baki Kutipan Tunggakan and Kutipan Tunggakan).
How to achieve this using Stacked Column?
Thanks
Another way is to use series.legendType: 'point'.
Code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
legendType: 'point',
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Cukai Semasa', 'Tunggakan Cukai']
},
series: [{
data: [{
name: 'Baki Cukai Semasa',
y: 69000000,
color: '#72AD4D'
}, {
name: 'Baki Kutipan Tunggakan',
y: 60000000,
color: '#FC3D45'
}]
}, {
data: [{
name: 'Kutipan Semasa',
y: 69000000,
color: '#AAD092'
}, {
name: 'Kutipan Tunggakan',
y: 60000000,
color: '#FD7C82'
}]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/9xmnrqp2/
One way of achieving this and showing all points in legend is by making them individual series:
series: [{
name: 'Baki Cukai Semasa',
data: [69000000, null]
}, {
name: 'Kutipan Semasa',
data: [60000000, null]
}, {
name: 'Baki Kutipan Tunggakan',
data: [null, 69000000]
}, {
name: 'Kutipan Tunggakan',
data: [null, 60000000]
}]
See this JSFiddle demonstration of it in use.
I use highcharts for a chart. I made series with "linkedTo" because I need to group the columns by region and generate a legend displaying these regions. Until then, the result is the desired one. But I can not display the name of my categories on the X axis. Under each column there should be "A", "B", ... As in the picture. See the jsfiddle for the code. Thank you for your help.
http://jsfiddle.net/yucca/hpkLy6t0/24/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'TEST'
},
subtitle: {
text: 'TEST'
},
xAxis: {
type: 'category',
categories: ['A', 'B', 'C', 'D']
},
legend: {
enabled: true,
labelFormatter: function() {
return this.userOptions.id
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
id:'China',
color: '#004f9e',
data: [1100]
},
{
id:'International',
color: '#e73357',
data: [10]
},
{
linkedTo: 'International',
color: '#e73357',
data: [1000]
},
{
linkedTo: 'China',
color: '#004f9e',
data: [686]
}
]
});
graph
You need to make a slight alteration to your series in order for this to work.
series: [{
data: [{
id:'China',
color: '#004f9e',
y: 1100
},{
id:'International',
color: '#e73357',
y: 10
},{
linkedTo: 'International',
color: '#e73357',
y: 1000
},{
linkedTo: 'China',
color: '#004f9e',
y: 686
}],
}]
What I did is the following:
I changed the data[] so it holds an array of your values.
I changed the values stored as data: [686] to y: 686
Here you can find a working JSFiddle
I don't understand why there are all these strange vertical lines in this form:
Here is the JS Fiddle
https://jsfiddle.net/oz73d3gg/
Code:
Highcharts.chart('js-chart-rating-month', {
credits: {
enabled: false
},
title: {
text: 'Ratings'
},
xAxis: {
allowDecimals: false,
},
yAxis: {
title: {
text: 'Ratings'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
series: [{
name: 'Ratings',
data: [[2006,9], [2007,6], [2007,8], [2008,9], [2009,9], [2009,7], [2009,9], [2009,10], [2010,9], [2010,9], [2010,10], [2010,8], [2011,8], [2011,8], [2011,10], [2011,5], [2011,9], [2011,9], [2012,10], [2012,9], [2012,9], [2012,10], [2012,10], [2013,9], [2013,9], [2013,9], [2013,9], [2014,8], [2014,10], [2014,10], [2015,9], [2015,9], [2015,8], [2015,10], [2015,8], [2016,10], [2016,10], [2016,9], [2016,9], [2016,10], [2016,10], [2016,8], [2017,10], [2017,9], [2017,10], [2017,9], [2017,10], [2017,8] ]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Also, the points seem to be missing like in this graph:
Any ideas? I am drawing a blank here.
You have multiple value for the same year so you must clean you data :
series: [{
name: 'Ratings',
data: [... [2017,10], [2017,9], [2017,10], [2017,9], [2017,10], [2017,8] ] // Only 1 value for each year
}],
Fiddle
Here is my following chart config. I have been doing some research but couldn't find any help to enabling vertical scrollbar.
I know that I can set overflow-y property for chart container div, but to achieve frozen X-axis I need vertical scroll on series that is not container.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
minorTickLength: 0,
tickLength: 0,
lineWidth: 0,
tickwidth: 0,
},
yAxis: {
max: 100,
tickInterval: 25,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
},{
name: 'Q2',
data: [20, 0,50,0]
},{
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
});
Can anybody suggest me how to enable the vertical scrollbar in Highcharts?
#Swetha: That fiddle is using Highstock library. Highcharts does not support scrollbars. Scrollbars are Highstock only
http://www.highcharts.com/docs/chart-concepts/scrollbar
You could set a fixed height or width to the chart and wrap into a div width overflow-x:auto, it's not the same but it is something at least.
Try this fiddle: http://jsfiddle.net/fj6d2/3076/
This may help you.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type:'bar',
},
xAxis: {
categories: ['CITY1', 'CITY2','CITY3','CITY4'],
min:2,
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal'
}
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Q1',
data: [50, 70,0,35]
}, {
name: 'Q2',
data: [20, 0,50,0]
}, {
name: 'Q3',
data: [0, 0,40,20]
},{
name: 'Q4',
data: [0, 30,0,20]
}]
});
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'
}
}]
},