Related
I am trying to create a lollipop chart where some values are negative, and some are positive, either side of zero, like this:
image
However the chart seemingly only allows the marker to be on the "high" end of the chart. Is there a way to control which end has the marker ?
I'm using these chart options:
chartOptions: {
chart: {
type: 'dumbbell',
inverted: true
},
title: {
text: 'lollipop chart'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'value'
}
},
series: [{
name: 'value',
data: [{
name: 'a',
low:0,
high:13,
}, {
name: 'b',
low:0,
high:26,
},{
name: 'c',
low:-43,
high:0
},{
name: 'd',
low:-83,
high:0
},{
name: 'e',
low:0,
high:113
}]
}]
}
The series which should be used in this case is a lollipop, but it seems that the array of objects configuration doesn't work. I reported it on the Highcharts Github issue channel, where you can follow this thread: https://github.com/highcharts/highcharts/issues/13202
As a solution in the dumbell series I suggest to find those graphics in the render callback and hide them.
Demo: https://jsfiddle.net/BlackLabel/3o7acsbt/
events: {
render() {
let chart = this;
chart.series[0].points.forEach(p => {
if (p.low >= 0){
p.lowerGraphic.hide()
} else {
p.upperGraphic.hide()
}
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.render
EDIT
Under the GitHub link, the workaround showed up. Please check it, maybe will be fit better to your requirement.
I need to translate my highcharts when the user selects a different language. I have a chartservice that listens to the translationService and assign the value received from translationService to downloadCSV attribute of chart. here is the code"
private downloadCsvText= '';
this._translateService.get('TL_DOWNLOAD_CSV').subscribe((res: string) => this.downloadCsvText=res);
Highcharts.setOptions({
global: { useUTC: false },
lang: {
noData: this.chartNoData,
downloadCSV: this.downloadCsvText
}
});
and in my methods that create the chart I have:
exporting: {
filename: 'MyChart',
buttons: {
contextButton: {
menuItems: ['downloadCSV']
}
},
csv: {
itemDelimiter: ';'
},
fallbackToExportServer: false
}
However, at the moment that user changes the language, the menuItems is the only thing that is not translated. Any guidance is appreciated.
I am using
Angular 8
"highcharts": "6.1.1"
"highcharts-export-csv": "=1.4.8",
"highcharts-pattern-fill": "3.0.3",
Currently, your code does something like is shown in this demo:https://jsfiddle.net/BlackLabel/kL5xahve/ - which is wrong because the options are defined after the chart has been initialized.
The easiest solution is to destroy the chart and initializing it once again after the change language.
Demo: https://jsfiddle.net/BlackLabel/wLhxc0qb/
var chartOptions = {
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
exporting: {
buttons: {
contextButton: {
menuItems: ["downloadCSV"]
}
},
}
};
var chart = Highcharts.chart('container', chartOptions);
Highcharts.setOptions({
lang: {
downloadCSV: 'test'
}
});
chart.destroy();
Highcharts.chart('container', chartOptions);
I am trying to use something like that :
If you can give me working example with react and packedbubble it will be very helpful.
the issue that I am using react and trying to do something like:
constructor(props) {
super(props);
this.state = {
options: {
title: {
text: 'My chart'
},
series: [{
data: [1, 2, 3]
}]
}
}
}
render() {
return (
<HighchartsReact highcharts = {Highcharts} options={this.state.options}/>
);
}
To create packedbubble you have to load highcharts-more module:
require("highcharts/highcharts-more")(Highcharts);
Demo:
https://codesandbox.io/s/highcharts-react-demo-8pkxr
The highcharts chart is not showing.
hc.xAxis[0].categories are loaded ok, but hc.series are not
r.forEach(x => {
var hc = Highcharts.chart('chart_div', {
xAxis: { categories: x.categories },
series: x.series,
});
console.log(hc.series); // 1st
console.log(x.series); // 2nd
});
The 1stconsole.log shows no data and the 2nd one shows this:
[{name: 'DE Shaw Comp (75;Q)', data: [100,100.5,101.91,103.03,104.37,103.85,103.22,104.77,105.71,105.5,107.08,107.51,106.33,107.18,107.18,108.68,109.44,110.87,110.53,111.75,115.21,116.83,117.41,116.82,116.24,118.21,119.99,121.79,121.54,122.88,122.27,123.86,124.6,126.22,128.36,124.77,129.14,], color: '#33a', label:{enabled:false}},{name: 'SPX', data: [100,94.93,94.53,100.77,101.05,102.59,102.69,106.34,106.21,106.08,104.02,107.58,109.54,111.49,115.64,115.6,116.65,118,118.57,120.86,120.93,123.26,125.99,129.53,130.81,138.16,132.77,129.2,129.56,132.36,133,137.79,141.96,142.57,132.67,135.04,122.65,119.76], color: '#a33', label:{enabled:false}},{name: 'HFRI RV: MULTI-STRATEGY', data: [100,98.37,97.83,99.53,101.19,102,102.66,103.99,104.87,105.72,106.02,106.54,107.66,109.08,109.73,110.07,110.37,110.38,110.58,111.34,111.51,111.95,112.37,112.46,113.29,114.53,114.13,113.48,114.48,115.17,114.97,116.2,116.26,116.68,115.32,114.95,,], color: '#aa3', label:{enabled:false}}]
which looks like a proper input.
series: eval(x.series) is the solution
without eval x.series was interpreted as a string, not as an array of Object as I thought
I am in the process of moving from a built in graph library to HighStock.
I have to comply to crasy implementations. So at the end I got this configuration :
$(function() {
chart = new Highcharts.StockChart({
chart : {
renderTo : 'div_#divid#'
},
rangeSelector : {
selected : 0,
buttons: [{
type: 'day',
count: 7,
text: '7j'
}, {
type: 'day',
count: 15,
text: '15j'
}, {
type: 'day',
count: 30,
text: '30j'
}, {
type: 'all',
text: 'Tous'
}]
},
series : [{
type : 'column',
name : 'valeur',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
Here is the fiddled version.
I don't get whats wrong with my data. (but I think I did correctly the conversion for the dates.)
[[1362355200000,672],[1362441600000,9764],[1362528000000,9839],[1362614400000,9906], [1362700800000,9973],[1362787200000,9906],[1362873600000,10592],[1362960000000,11236], [1363046400000,13233],[1363132800000,0],[1363219200000,0],[1363305600000,0],[1363392000000,0],[1363478400000,0],[1363564800000,0],[1363651200000,0],[1363737600000,0],[1363824000000,0],[1363910400000,0],[1363996800000,0],[1364083200000,0],[1364169600000,0],[1364256000000,0],[1364342400000,0],[1364428800000,0],[1364515200000,0],[1364601600000,0],[1364688000000,0],[1364770800000,0],[1364857200000,0],[1364943600000,0],[1365030000000,0],[1365116400000,0],[1365202800000,0],[1365289200000,0],[1365375600000,0],[1365462000000,0],[1365548400000,0],[1365634800000,0],[1365721200000,0],[1365807600000,0],[1365894000000,0],[1365980400000,0],[1366066800000,0],[1366153200000,0],[1366239600000,0],[1366326000000,0],[1366412400000,0],[1366498800000,0],[1366585200000,0],[1366671600000,0],[1366758000000,0],[1366844400000,0],[1366930800000,0],[1367017200000,0],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]]
Thanks for your help.
I'm not sure, the problem is that you can't see the chart? That's cause your data contains '
Check the jsFiddle: http://jsfiddle.net/SqZY2/1/
You have this:
data = '[[1362355200000,672],[1362441600000,9764],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]]';
Must be this:
data = [[1362355200000,672],[1362441600000,9764],[1362528000000,9839],[1362614400000,9906],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]];