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
Related
I want to use highcharts series point events, e.g. to alert point values to the user. Somehow, none of the events of the API seem to work for me.
My chart plotOptions looks like
plotOptions: {
series: {
point: {
events: {
click: function () {
console.log('click event works');
}
}
}
}
}
But when I click any point in the chart, nothing in the console happens. I tried this also with other highcharts point events, none seemed to work. Am I missing something here?
Here an official demo, where I can just add the event (my code above), and here it somehow works: demo
Your scope is wrong, plotOptions.point.events does not exist.
You need to define plotOptions.series.point.events. I just tested this with your JSFiddle example and it worked.
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
},
series: { // <-- ▼▼▼ Here ▼▼▼
point: {
events: {
click: function() {
console.log('click event works');
}
}
}
} // <-- ▲▲▲ Here ▲▲▲
}
The API has a search bar that will validate this for you:
https://api.highcharts.com/highcharts/
Example
/**
* Based on: https://www.highcharts.com/demo/line-basic
*/
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010,
point: { // <-- ▼▼▼ Here ▼▼▼
events: {
click: function() {
console.log('click event works');
}
}
} // <-- ▲▲▲ Here ▲▲▲
}
},
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'
}
}
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
I have a simple highcharts,I need to add 'download word' and when I click that chart should be downloaded/exported as word format.Can anyone one please help,I have search in google but I didn't find that much options.
Here is my code:
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
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'
}
}
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
Can anyone suggest a way to do it manually or with the help of any third party plugin ?.Here is the code below.
I have super weird bug in my program that i cant crack for a while now. Basically i am using Highcharts.js and when i try to make a simple line chart with custom labels parsed in formatter it shows only the first custom label that is ithe array. The first chart library that i used was Google charts and there i was encountering the exactly same problem. The data that i am getting from the server is completely correct and tested with Postman for errors. Here is the code responsible for creating the chart.
$("#table tbody").on('click', 'tr', function () {
var data = table.row(this).data();
$(".diagrams-row").html('<div class="loader"></div><span class="loading-label">Generating diagrams for a pair of stocks: ' + data[0] + '</span>');
$.ajax({
url: "/api/generateDiagrams?name=" + data[0] + "&periods=" + getParameterByName("periods"),
method: "GET",
success: function (result) {
$(".diagrams-row").html('');
$(".diagrams-row").append(
$("<div/>")
.attr("id", "chart_div")
);
var myLabels = [result.average - result.standartDeviation * 3,
result.average - result.standartDeviation * 2,
result.average - result.standartDeviation,
result.average,
result.average + result.standartDeviation,
result.average + result.standartDeviation * 2,
result.average + result.standartDeviation * 3];
$(function () {
var myChart = Highcharts.chart('chart_div', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
},
labels: {
formatter: function () {
return myLabels[this.value];
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
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'
}
}
}]
}
});
});
}
});
});
Here is an image of what happens (you can see how it displays only the first label of the yAxis):
That is the code if you need any more information feel free to ask. There aren't any errors displayed in the console. Thank you in advance.
I would approach it something like this (as mentioned in my comment above):
calculate your standard deviations
set an array of those values to use as your tickPositions value
build a keyed object of those values and the corresponding label value that you want
The setup looks something like this:
tickPositions = [-67982,-33176,1629,36435,71241,106046,140852,175658],
myLabels = {};
myLabels[-67982]='-3';
myLabels[-33176]='-2';
myLabels[1629]='-1';
myLabels[36435]='Mean';
myLabels[71241]='+1';
myLabels[106046]='+2';
myLabels[140852]='+3';
myLabels[175658]='+4';
And the result looks something like this:
Fiddle: http://jsfiddle.net/jlbriggs/u4293Lv0/
I put the axis with the updated labels as a secondary axis in my example, but obviously you can set it up however you want.
One of the comment of #daniel_s was the correct one. It turns out that i just ahd to use yAxis.tickPositioner function:
$(function () {
var myChart = Highcharts.chart('chart_div', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
},
labels: {
format: '{value:.2f}'
},
tickPositioner: function () {
var positions = [result.average - result.standartDeviation * 3,
result.average - result.standartDeviation * 2,
result.average - result.standartDeviation,
result.average,
result.average + result.standartDeviation,
result.average + result.standartDeviation * 2,
result.average + result.standartDeviation * 3];
return positions;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [0, -1, 1, 4, 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'
}
}
}]
}
});
});
Here is the correct display of the chart.
How to get the yAxis labels as the 10% of the categories defined in the xAxis of the chart. For example, if I have categories like [2010,2011,2012,2013,....] then the yAxis labels should come like 201.0, 201.1, 201.2, ...
Here I have basic chart with predefined categories
chart: {
type: 'spline'
},
xAxis: {
categories: [1340,1590,1379,1451,1671]
},
yAxis: {
title: {
text: '10% of Range'
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4]
}]
}
How to get the yAxis plot values as the 10% of the categories of xAxis, is there any method?
Further I will receive the series and the categories from the server so categories will be numeric.
I can't say I understand why you would want to do this, regardless, it is possible. You can use the load event to dynamically add 10 % of the xAxis as the yAxis. Like this:
chart: {
events: {
load: function() {
this.yAxis[0].update({type: 'categories', categories: this.xAxis[0].categories.map(function(x) { return x/10; }), tickPositions: this.xAxis[0].categories.map(function(x) { return x/10; })}, true)
}
}
},
Highcharts.chart('container', {
chart: {
events: {
load: function() {
this.yAxis[0].update({type: 'categories', categories: this.xAxis[0].categories.map(function(x) { return x/10; }), tickPositions: this.xAxis[0].categories.map(function(x) { return x/10; })}, true)
}
}
},
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
xAxis: {
type: 'categories',
categories: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
series: [{
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]
}],
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
Working fiddle example: https://jsfiddle.net/2jca44dj/
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