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
Related
I'm newbie to highchart and I've got a demo for polar chart using highcharts
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area'
},
accessibility: {
description: 'ASDFR'
},
title: {
text: '',
x: -120
},
pane: {
size: '100%',
startAngle:-42
},
xAxis: {
categories: ['ATT', 'TEC', 'TAC', 'DEF', 'CRE'],
tickmarkPlacement: 'on',
lineWidth: 0,
labels:{
formatter: function(){
return this.value + '???'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name} <b>{point.y:,.0f}</b></span>'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
series: [{
name: '',
data: [73, 80, 80, 54, 92],
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
pane: {
size: '70%'
}
}
}]
}
});
How can I show the value of the series right in the xAxis label e.g ATT 73, TEC 80, TAC 80...
You can get the associated value through series data. Example:
xAxis: {
...,
labels: {
formatter: function() {
return this.value + ' ' + this.chart.series[0].yData[this.pos];
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/pyohzk8c/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
Highcharts Basic Line chart, Y-axis label how need to show ?
Here is my code
var seriesData = [["O", 42], ["N", 35], ["D", 20], ["J", 47], ["F", 45], ["M", 65]];
var seriesDataY = [['O', 50], ['14', 22], ["D", 30], ["J", 42], ["F", 44], ["M", 65]];
Highcharts.chart('linechart', {
title: {
text: ' '
},
yAxis: {
title: {
text: '(6 mth period)'
},
labels: {
enabled: true,
formatter: function () { return seriesDataY[0][this.value]; },
}
},
xAxis: {
tickInterval: 1,
labels: {
enabled: true,
formatter: function () { return seriesData[this.value][0]; },
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0
}
},
series: [{
name: 'Voluntary',
data: seriesData
}, {
name: 'Involuntary',
data: seriesDataY
//data: [null, null, 7988, 12169, 15112, 22452]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Images attached:
Y-axis label is missing:
0, 14 , 28,42, 56,70
As per the above value, i need to show the Y-axis. What is the option to show the Y-axis label name?
Notice that yAxis takes values (this.value) from the data y numbers. That's why it is different than for xAxis. Also, notice that the amount of the labels for yAxis is calculated differently, so it has to be set.
I think that something like this should fit your requirements:
let i = 0;
Highcharts.chart('container', {
title: {
text: ' '
},
...
labels: {
enabled: true,
formatter: function() {
i++;
return seriesDataY[i - 1][0];
},
}
...
Demo: https://jsfiddle.net/BlackLabel/zsou1Lye/
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
I have a highchart, as showed on the appended image.
I am attempting to format the legend of only my last data stacked. In this case, index 1 always.
Any help on how to achieve this?
My main goal, being, on there always showing a value i have in a variable, which will be the max value possible.
createChart: function (id, chartData, maxYValues, chartTitle, chartNames, dataToMax) {
var me = this;
debugger;
me.highChart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: id
},
title: {
text: chartTitle,
fontSize: '8px'
},
xAxis: {
labels: {
overflow: 'justify'
},
categories: chartNames
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
stackLabels: {
enabled: true,
format: maxYValues
},
title: {
enabled: false
}
},
colors: ['#afafaf', '#f89c1c', '#3aaa80'],
credits: {
enabled: false
},
tooltip: {
pointFormat: '<span>{point.name}</span>'
},
plotOptions: {
series: {
colors: ['#3aab80', '#3aab80'],
colorByPoint: true,
borderWidth: 0,
dataLabels: {
enabled: true,
headerFormat: '{point.y + point.name}',
format: '{y} mb',
verticalAlign: 'top',
y: -20
}
},
column: {
stacking: "percent"
},
area: {
dataLabels: {
enabled: false
}
}
},
legend: {
labelFormat: '<b>{point.y} MB</b><br/>',
labelFormatter: function () {
if (me.series.data.index === 1) {
return maxYValues;
}
}
},
series: [{
showInLegend: false,
data: chartData,
color: '#3aab80'
}, {
showInLegend: false,
data: dataToMax,
legend: {
labelFormat: maxYValues + 'MB</b><br/>'
}
}],
navigation: {
menuItemStyle: {
fontSize: '8px'
}
}
});
},
Thank you
UPDATE: Added code snipped, and updated the image to what my current code is showing
Is it possible to add an x-axis range selector to a Highcharts chart or is that functionality only built into Highstock?
Here's my code:
$('#graph').highcharts({
title: {
text: 'GRAPH TITLE',
margin: 25
},
xAxis: [{
categories: ['03/28','03/29','03/30','03/31','04/01','04/02','04/03','04/04','04/05','04/06','04/07','04/08','04/09']
}],
yAxis: {
title: {
enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
min: 0
},
legend: {
layout: 'vertical',
borderWidth: 0,
enabled: false
},
series: [{
data: [27893,89070,90592,112166,68395,62448,39237,28439,21973,24064,56032,52854,38736]
}],
tooltip: {
enabled: false
},
plotOptions: {
area: {
dataLabels: {
enabled: true,
y: -5,
align: 'center'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'area'
}
});
Yes, it's possible, but rangeSelector works only with datetime axis.
Anyway, you will need valid Highstock license to enable rangeSelector, see FAQ.