I have a bar chart where I want to add an url to the xAxis legend
the data looks like :
{
name: 'Title,
y: 123,
thumbnailURL: 'blabla.com',
}
xAxis: {
gridLineWidth: 1,
type: 'category',
labels: {
x: -130,
useHTML: true,
align: 'left',
formatter() {//get the url here}
The formater function must use this 3 values to draw what i want
DEMO :
https://jsfiddle.net/6a97ckzr/2/
But I can't find a way for the this inside the formatter function to have the custom property url (different for each data value.
I tried all, but none work
chart = {
series: [
{
keys: ['thumbnailURL', 'y'],
data: [{
name: v.name,
y: v.value,
thumbnailURL: v.thumbnailURL,
}]
}),
},
],
}
chart = {
series: [
{
keys: ['thumbnailURL', 'y'],
data: [[
v.name,
v.value,
v.thumbnailURL,
]]
}),
},
],
}
How do I get my custom value in the labels ?
In that case this.value is a data point name. If you want to get some other property from a point you can use:
this.chart.series[0].options.data[this.pos].customUrl
Live demo: https://jsfiddle.net/BlackLabel/h24sc1gn/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
Related
I have a game with 3 difficulties and I show their averages in a first graph. Now I want to use drilldown to show a spread of the scores for each difficulty in a histogram. I managed to get this working but I have two problems. First of all I use update to change the setting for the drilldown graphs, but then these settings also change for the first graph and thus I was wondering what the better way would be to do this.
My other problem is that in my histogram the first and last column are cut in half and only half is shown, but I cant seem to find a way to solve this. I tried min- and maxPadding but this did not work.
chart of the tree difficulties
Histogram of one difficulty
https://jsfiddle.net/vlovlo/sng4jwv8/36/
Here is my code
Highcharts.chart('skippedPatients', {
chart: {
events: {
drilldown: function (e) {
this.update({
title: {text: "Skipped patient: " + e.point.name},
xAxis:{
title:{text: "Nr of skipped patients"},
tickmarkPlacement: 'on',
},
yAxis:{title:{text: "Nr of players"}},
plotOptions:{series:{pointPlacement: 'on'}},
});
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Histogram: Easy': {
name: 'Easy',
type: 'histogram',
baseSeries: 'avgSkippedEasy'
},
'Easy': {
id: 'avgSkippedEasy',
visible: false,
type: 'column',
data: skippedPatientsList
}
},
series = [drilldowns['Histogram: ' + e.point.name], drilldowns[e.point.name]];
chart.addSingleSeriesAsDrilldown(e.point, series[0]);
chart.addSingleSeriesAsDrilldown(e.point, series[1]);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Skipped patients'
},
xAxis: {
type: 'category',
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Averages per difficulty',
colorByPoint: true,
type: 'column',
data: [{
name: 'Easy',
y: 5,
drilldown: true
}, {
name: 'Moderate',
y: 2,
drilldown: true
}, {
name: 'Hard',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
You should define your initial options as a variable and attach them again in the drillup callback due to you did a chart update with changed the initial options.
Demo: https://jsfiddle.net/BlackLabel/5d1atnh7/
I adapted the highcharts population pyramid (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-negative-stack/) as follows:
I omitted the option "categories", instead used the option "type: 'category'" and added the categories to the data series. I want to do this because the data comes as a tuple from a file. Unfortunately, the right-hand x-axis is not labeled correctly. I want the right hand x-axis labeled same as the left one. Is this possible without using the option "categories"?
Here is the jsfiddle: https://jsfiddle.net/nehqb9k4/
chart : {
renderTo: 'container',
type: 'bar',
height: 480,
},
xAxis : [{
type: 'category',
reversed: false,
}, { // mirror axis on right side
type: 'category',
opposite: true,
linkedTo: 0,
reversed: false,
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Male',
data: [
['0-4', -2.2],
['5-9', -2.1],
['10-14', -2.2],
['15-19', -2.4],
['20-24', -2.7],
['25-29', -3.0],
['30-34', -3.3],
['35-39', -3.2],
['40-44', -2.9],
['45-49', -3.5],
['50-54', -4.4],
['55-59', -4.1],
['60-64', -3.4],
['65-69', -2.7],
['70-74', -2.3],
['75-79', -2.2],
['80-84', -1.6],
['85-89', -0.6],
['90-94', -0.3],
['95-99', -0.0],
['100 +', -0.0]
]
}, {
name: 'Female',
data: [
['0-4', 2.1],
['5-9', 2.0],
['10-14', 2.1],
['15-19', 2.3],
['20-24', 2.6],
['25-29', 2.9],
['30-34', 3.2],
['35-39', 3.1],
['40-44', 2.9],
['45-49', 3.4],
['50-54', 4.3],
['55-59', 4.0],
['60-64', 3.5],
['65-69', 2.9],
['70-74', 2.5],
['75-79', 2.7],
['80-84', 2.2],
['85-89', 1.1],
['90-94', 0.6],
['95-99', 0.2],
['100 +', 0.0]
]
}]
You need to set the right xAxis for the second series:
series: [{
// xAxis: 0 by default
name: 'Male',
data: [
...
]
}, {
name: 'Female',
xAxis: 1,
data: [
...
]
}]
Live demo: https://jsfiddle.net/BlackLabel/70yv1Lae/
API: https://api.highcharts.com/highcharts/series.bar.xAxis
I need to use a "name" attribute for the X axis, so I can put the name of the month.
I can not therefore use an array of values within the data attribute. So I can not use something of this kind data:[12,13,45];
Using something like this:
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line'
},
series: [{
colorByPoint: true,
data: [{
name: 'Septiembre',
y: 1687
}, {
name: 'Octubre',
y: 2085
}]
}],
});
Reproduction online
I'm creating a bar chart where it should be possible to hide each bar via legend.
However, only first and last series are getting fully hidden. The ones in the middle disappear from the plot area, but their labels remain visible at the X axis.
Here's a sample jsfiddle. Click through the legend starting from the first/last item and from the middle ones and you'll see what I'm talking about.
And here are the chart options I'm passing through:
{
chart: {
type: 'bar'
},
title: {
text: 'Compare scores per department'
},
xAxis: {
type: 'category'
},
plotOptions: {
bar: {
grouping: false,
dataLabels: {
enabled: true,
},
},
series: [
{ name: 'department 1', data: [{ name: 'department 1', y: 45 }] },
{ name: 'department 2', data: [{ name: 'department 2', y: 68 }] },
{ name: 'department 3', data: [{ name: 'department 3', y: 82 }] },
{ name: 'department 4', data: [{ name: 'department 4', y: 37 }] }
]
}
Any ideas of how to fix it or alternative ways to implement it?
Thanks!
If you don't need also categories on xAxis (which in bars is vertical on the left) but it's enough the legend, you can change options this way:
xAxis: {
labels: {
enabled: false
}
},
plotOptions: {
// any
}
Check the fiddle updated: https://jsfiddle.net/beaver71/zbktpf0g/
UPDATE:
in addition, as suggested by Deep 3015 you can enable dataLabels:
plotOptions : {
series : {
dataLabels : {
enabled : true,
align : 'left',
color : '#FFFFFF',
inside : true,
formatter : function () {
return this.key
}
},
}
},
It appeared to be a known issue with category axes (hidden points are only hiding first/last categories).
I got the following workaround from Highcahrts team:
using series.events.legendItemClick event for setting empty data to the item on hide and then putting data back when it's shown again:
plotOptions: {
series: {
events: {
legendItemClick: function () {
if (this.visible) {
this.setData([], false)
} else {
this.setData([seriesArray[this.index]], false);
}
}
}
},
}
jsfiddle
I hope it will help someone who is facing the same problem.
I looked around a bit but can't seem to find the exact answer for this.
I'm currently adding some data to highcharts. Essentially, I am using the HighStock column and candlestick chart, and it should suffice for my testing.
The issue is this. I've set up ONE of the two series' to have IDs. I would now like to retrieve an individual point object by calling [something].get("point_0"), which seems like it should be possible but doesn't seem to work. Here is the fiddle for it:
http://jsfiddle.net/mr3ezgh9/
and here is the code:
var chart = null;
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push(
{
name: data[i][0],
x: data[i][0], // the date
y: data[i][5], // the volume
color: "red",
id: "point_" + i
}
);
}
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
turboThreshold: Number.MAX_VALUE,
dataGrouping: {
units: groupingUnits
}
}]
});
alert(Highcharts.charts[0].get("point_0"));
});
});
I have tried a few variations on .get("point_0") like getting a series first (but the series doesn't have a get function), setting the chart to a variable and then getting it, and other similar changes, but nothing quite seems to work. Any insight on this?
The general problem is that in the highstock you have enabled datagrouping, so points are groupped and ids are skipped. Disable it and option will work.
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
}
Example: http://jsfiddle.net/mr3ezgh9/1/