How to set custom credits in Highcharts?
Demo: https://jsfiddle.net/Bastss/rwmb6dpy/
Highcharts.chart('container', {
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
Any help could be useful.
Thank you for asking. You can do it this way: https://jsfiddle.net/BlackLabel/5h6t4r8u/
credits: {
text: 'kotlet.pl',
href: 'https://www.google.com/'
},
Oh gosh... I found it... I was able to achieve that by using this code:
credits: {
text: 'kotlet.pl',
href: 'https://www.google.com/'
},
API: https://api.highcharts.com/highcharts/credits.href
Related
Pls find the link for treemap http://jsfiddle.net/BlackLabel/m0587v4q/.
What I need is when I double click on legend it should show that respective data only on tree map and rest should hide.
$('#container').highcharts({
'chart': {
type: 'treemap'
},
series: [{
data: [{
'name': 'Americas',
'value': 52976,
'color': 'rgba(47,126,216,1)'
}, {
'name': 'Australia',
'value': 41219,
'color': 'rgba(13,35,58,1)'
}, {
'name': 'Europe',
'value': 62756,
'color': 'rgba(139,188,33,1)'
}, {
'name': 'Asia',
'value': 14577,
'color': 'rgba(145,0,0,1)'
}],
legendType: 'point',
showInLegend: true
}]
});
You can use Custom-Events plugin and add double click event in this way:
legend: {
itemEvents: {
dblclick: function() {
console.log('dblclick')
},
click: function() {
console.log('click')
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4952/
Docs: https://www.highcharts.com/plugin-registry/single/15/Custom-Events
In a Highcharts line chart, I need to put the series name on the right of the last point of each one.
Unfortunately, even if I set chart.spacingRight and chart.marginRight, the space on the right is not used.
Is there any solution/workaround?
Jsfiddle
Highcharts.chart('container', {
chart: {
spacingRight: 200
},
plotOptions: {
series: {
label: {
enabled:false
},
pointStart: 2010,
dataLabels: {
enabled:true,
align:'left',
verticalAlign:'middle',
x:10,
formatter: function() {
return this.series.data.indexOf( this.point ) == this.series.data.length - 1 ? this.series.name : '';
}
}
}
},
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]
}],
});
You can do that with dataLabels.crop:false and dataLabels.overflow: 'allow'
dataLabels: {
overflow: 'allow',
crop:false,
...
Api documentation currently broken, so impossible to put the real link
Fiddle
I'm working on a graph for runners, that chart must be scrollable like in Highstock. How can I show the laps with scroll function?
chart = Highcharts.stockChart({
chart: {
renderTo: 'container',
type: "line"
},
credits:{
enabled: false
},
series: data
});
Edit:
I have this
I wanne make a horizontal scroll like this
If I use Highcharts I can not make a scroll. If I use Highstock there are dates instead of laps. How can I fix it?
You can use Highstock code and chart constructor, which will allow you use Highstock features in standard chart:
Highcharts.chart('container', {
scrollbar: {
enabled: true
},
navigator: {
enabled: true,
xAxis: {
labels: {
formatter: function() {
return this.value
}
}
}
},
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/xf5ka8un/
API: https://api.highcharts.com/highstock/scrollbar
Main multispline chart
HI All, as shown in the image, I am plotting multispline chart using highcharts. What I want is to plot only 'a' while loading the chart and the rest will be invisible and I could add them later like this Higcharts Spline (only one).
Thank you in advance.
This previous answered question partly working in my case but I don't want to hide all the series. I want to have one visible series.
You can use Highcharts.Chart.addSeries() method to add additional series dynamically:
Html:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<button id="btn">Add series</button>
JS:
let data = [{
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]
}];
let btn = document.querySelector('#btn');
let i = 1;
btn.addEventListener('click', () => {
if (i < data.length) {
chart.addSeries(data[i]);
i++;
}
});
let chart = Highcharts.chart('container', {
chart: {
type: 'spline'
},
plotOptions: {
series: {
marker: {
enabled: false
},
pointStart: 2010
}
},
series: [
data[0]
]
});
Demo:
https://jsfiddle.net/BlackLabel/rtsznykp/3/
I wanted to know if it's possible to use an async drill down on treemap?
I have 7000 items that need to be drawn and it stuck while the treemap is creating.
So I think to create treemap by lazy loading. I didn't find any example of treemap with huge data (while the items are below 1000 it's not a problem like in the example of the large treemap).
I will appreciate any help.
Yes, it can be done exactly the same for any type of series.
Example for treemap:
Highcharts.chart('container', {
chart: {
events: {
drilldown: function(e) {
this.addSeriesAsDrilldown(e.point, {
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A1',
value: 11,
drilldown: true
}, {
name: 'A2',
value: 44
}]
});
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A',
value: 6,
drilldown: true
}, {
name: 'B',
value: 2
}]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/knj7bqs5/