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
I'm using highchart for statistics with xaxis type categories and i wanna the xaxis separate in range
I want to add this small separator like in the phots
What i have
Here's the code that i'm using , for the first photo i use the accessiblity with rangeDescription
accessibility: {
rangeDescription: 'Range: 2010 to 2017'
}
But here i want to use xaxis : {type : 'category'}
chart: {
renderTo: 'container'
},
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
xAxis: {
categories :[2010,2011,2012,2013,2014,2015,2016,2017]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});```
You need to define the tickWidth property and set tickmarkPlacement to on:
xAxis: {
categories: [...],
tickWidth: 1,
tickmarkPlacement: 'on'
}
Live demo: http://jsfiddle.net/BlackLabel/580upzk7/
API Reference: https://api.highcharts.com/highcharts/xAxis
I want to fill the bullets of highcharts just like the bar of the highchart.
Please help me if anyone has knowledge of highcharts.
This is highchart function which I am using.
I want to make the first colour as the first bar as the second color as the second bar.
If you know any solution then please let me know. Thank you
var chart = new Highcharts.Chart({
chart: {
renderTo:'DimensionsChartfirst',
type:'column'
},
colors: ['#0070C0', '#C00000'],
title: {
text: 'Office data'
},
subtitle: {
text: ''
},
credits:{enabled:false},
legend:{
},
plotOptions: {
series: {
shadow:false,
borderWidth:0
}
},
xAxis:{
categories: [
'Weight',
'Height'
],
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'Part Counts'
}
},
yAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Office data',
// rotation:90,
margin:10
}
},
series: [{
name: 'MAX',
data: MaxVal,
colors: ['#0070C0'],
type: 'column',
colorByPoint: true
},{
name: 'MIN',
data: MinVal,
colors: ['#C00000'],
type: 'column',
colorByPoint: true
}]
});
You just need to remove colorByPoint: true properties in your series.
jsFiddle: https://jsfiddle.net/4zu28aqk/
API Reference: https://api.highcharts.com/highcharts/series.column.colorByPoint
series: [{
name: 'MAX',
data: MaxVal,
color: '#0070C0'
},{
name: 'MIN',
data: MinVal,
color: '#C00000'
}]
Hi I am using the Highcharts library to create a bar chart with a cumulative plot line as demonstrated in the jsFiddle below.
CHART DEMO
I am looking to have the cumulative series represented like the red line in the following image (with cumulative values plotted on the right-most axis):
SAMPLE OF DESIRED OUTPUT
As you can see the secondary Y Axis is flipped and is displaying the series index value rather than the actual cumuative values.
Here is the current code:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null,
}
},
{
opposite:true,
title: {
text: "Cumulative"
}
}],
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
name: 'Cumulative',
xAxis:1,
type:"spline",
data: [34, 732, 914, 1973, 4054]
}
]
});
How can I correct this in order to plot the series as intended?
Thanks!
What you can do is after loading add a new series based on the sum of the 2 series added at creation:
events: {
load: function () {
var s1900 = this.series[0].data;
var s2008 = this.series[1].data;
var newData = [];
if (s1900.length == s2008.length) {
for (var i = 0; i < s1900.length; i++) {
newData.push(s1900[i].y + s2008[i].y);
}
}
this.addSeries({
name: 'Cumulative',
xAxis: 0,
type: "spline",
data: newData
});
}
}
I am not sure why you want this on the opposite xAxis or why your curve in the linked image you supplied is not really the cumulative unless that is not what you really want. See live demo.
Note you are going to have to handle cases where not all points have a value or if one category is not in both series, etc etc etc.
Revised answer.
Assuming you want to have the same categories on the alternate xAxis and do not want to share the same yAxis you can do:
...
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
}, {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
opposite: true,
title: {
text: null
}
}],
yAxis: [{
min: 0,
endOnTick: false,
title: {
text: 'Population (millions)',
align: 'high'
}
}, {
min: 0,
opposite: true,
reversed: true,
endOnTick: true,
title: {
text: 'Cumulative Population (millions)',
align: 'high'
}
}],
...
This sets it up so that you have identical xAxis categories (other ways to do this). See new demo.
I'm creating a bar chart using high charts. Here is a sample: http://jsfiddle.net/anishantha87/kfg5c/3/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Europe', 'Oceania','France'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [ 203, 200,200]
}, {
name: 'Year 1900',
data: [ 408, 60,null]
}, {
name: 'Year 2008',
data: [ 732, 34,null]
}]
});
});
In that I have null value for France. It displays the bar down below the France.(not vertically aligned with the Y axis name)
Any suggestions pls?
I am trying to create a Column chart using Highcharts that show multiple series for one point in time only and I would like to show show the name of the series on the x-axis as well as being able to hide and show each series using the legend.
The closest I have been able to get to what I'm trying to achieve is by adding the categories and having multiple series.
xAxis: {
categories: [
'Tokyo',
'New York',
'London',
'Berlin'
]
}
and then adding multiple series with only one data point in each series
series: [{
name: 'Tokyo',
data: [49.9, null,null,null]
}, {
name: 'New York',
data: [null, 83.6,null,null]
}, {
name: 'London',
data: [null, null, 48.9,null]
}, {
name: 'Berlin',
data:[null, null, null, 42.4]
}]
The problem is that while this only shows one series for each point on the x-axis, Highcharts allocates space for each of the other series and when hiding a series only the series will be hidden not the label on the x-axis.
link to jsfiddle is here: http://jsfiddle.net/md2zk/
Set grouping: false in plotOptions, see: http://jsfiddle.net/Fusher/md2zk/5/
it's possible to hide Category along with the column.please go through the link given below . hope this will help.
http://jsfiddle.net/md2zk/633/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
type: 'category',
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
},
},
plotOptions: {
series: {
grouping: false,
events: {
legendItemClick: function () {
debugger;
if (this.visible) {
this.setData([], false)
}
else {
this.setData([this.chart.series[this.index].userOptions], true);
}
}
},
borderWidth: 0,
dataLabels: {
enabled: true,
//style: {
// color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
//},
},
},
},
series: [{
name: 'Tokyo',
data: [{name : 'Tokyo',y:49.9}],
y: 49.9
}, {
name: 'New York',
data: [{name : 'New York',y:83.6}],
y: 83.6
}, {
name: 'London',
data: [{name : 'London',y:48.9}],
y: 48.9
}, {
name: 'Berlin',
data:[{name : 'Berlin',y: 42.4}],
y: 42.4
}],
navigation: {
buttonOptions: {
enabled: true
}
}
});
});