Whats the best way to achieving the below chart using Highcharts library?
You can create additional pie charts as data labels:
chart: {
events: {
load: function() {
var points = this.series[0].points,
container;
points.forEach(function(p) {
container = p.dataLabel.div.querySelector('.dataLabelChart');
Highcharts.chart(container, {
chart: {
margin: 0,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
innerSize: 30,
dataLabels: {
enabled: false
},
type: 'pie',
data: [1, 2, 3]
}],
legend: {
enabled: false
}
});
});
}
}
},
series: [{
dataLabels: {
verticalAlign: 'middle',
enabled: true,
useHTML: true,
formatter: function() {
return '<div class="dataLabelChart" id="' + this.point.index + '"></div>'
}
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/y46ubx1L/
API Reference: https://api.highcharts.com/highcharts/series.scatter.dataLabels.formatter
Related
I am trying to create a single drag navigator over multiple highchart to highlight chart between ranges. like below attachment.
Can someone please let me know how can I do this? I explored highchart but could not find appropriate options to create this. Are there any other options?
Here is what I have tried:
(function(H) {
H.wrap(H.Chart.prototype, 'zoom', function(proceed, event) {
var navMin = event.xAxis[0].min,
navMax = event.xAxis[0].max;
H.each(Highcharts.charts, function(chart) {
if (chart.userOptions.chart.customNavigator) {
chart.xAxis[0].setExtremes(navMin, navMax);
}
});
});
}(Highcharts));
$.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
var newMin = data[0][0],
newMax = data[data.length - 1][0];
Highcharts.stockChart('container-main', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-main1', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-main2', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-navigator', {
chart: {
height: 600,
zoomType: 'x',
backgroundColor: 'transparent'
},
credits: {
enabled: false
},
navigator: {
enabled: true,
height:540,
opposite:true,
maskInside:false
},
rangeSelector: {
enabled: true
},
scrollbar: {
enabled: false
},
xAxis: {
min: newMin,
max: newMax,
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
yAxis: {
visible: false
},
series: []
});
});
#container {
height: 200px;
min-width: 200px;
}
#container-navigator{ position:absolute; top:0; width:100%}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<div id="container-main" style="height: 200px; min-width:200px"></div>
<div id="container-main1" style="height: 200px; min-width:200px"></div>
<div id="container-main2" style="height: 200px; min-width:200px"></div>
<div id="container-navigator"></div>
also attached jsFiddle what I have tried: jsFiddle
I am also open to any other library achieving this type of result.
In the current solution you can create a timeline using SVGRenderer as below I show how I rendered the button. For visibility, I added them to the container navigator.
chart: {
events: {
load: function() {
const chart = this;
chart.renderer.button('Change visible time range', 100, 50)
.attr({
zIndex: 40,
})
.on('click', function() {
chart.xAxis[0].setExtremes(navMin, navMax))
})
.add()
}
}
}
In your solution with the navigator stretched to full height, the navigator covers all the charts and the tooltip cannot be shown that way, it's under the navigator container.
Demo: https://jsfiddle.net/BlackLabel/u6gjdzsn/2/
i made a bar stacked chart using highcharts and i want the legend to be on top, i used the attribute verticalAlign with the value top but it didn't work !
here is my jsfiddle http://jsfiddle.net/rchod/sbtt6/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
legend: {
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
},
categories: ['']
},
yAxis: {
labels: {
enabled: true
},
min: 0,
title: {
text: ''
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
minPointLength: 3,
dataLabels: {
color: 'white',
align: 'center',
enabled: true,
format: '{y} %'
},
stacking: 'percent'
},
bar: {
events: {
legendItemClick: function () {
vote(1,this.userOptions.id);
return false;
}
}
,
showInLegend: true
}
},
series: [
{
name: 'yes',
data: [{ y : 73.91, id : '1' }],
id: '1'
},
{
name: 'no',
data: [{ y : 26.09, id : '2' }],
id: '2'
},
]
});
});
You have the legend property twice in your options. The 2nd one is overriding the first. Put them together:
legend: {
backgroundColor: '#FFFFFF',
reversed: true,
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
Updated fiddle.
I have an array options like this:
var options = {
chart: {
type: 'bar',
events: {
click: function(event) {
}
}
},
xAxis: {
categories: '',
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Aantal keer gekozen',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
//valueSuffix: ' aantal keer gekozen'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: 'black',
formatter: function() {
if (this.y === 0) {
return null;
} else {
return this.y;
}
}
},
stacking: 'normal'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: []
}
As you can see I don't do anything on the click function.
I create the highcharts in jQuery in a foreach (so I create multiple charts).
options.chart.renderTo = 'container' + index;
chart = new Highcharts.Chart(options);
Now how can I add an event click like I did with renderTo?
You probably need to read about closures in javascript - otherwise you add the same event for each chart.
Another solution is to create array of id's for charts and then use: options.chart.events.click = function() { window.location.href = '/path/' + ids[index]; };
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},
I want to build a lightweight dashboard with Highcharts. First, look at this graphic http://jsfiddle.net/jerryvermanen/Zr7zE/.
I want to make a dashboard with this visualization. When clicking on a point, I want to display additional information below the visualisation. For instance, I want to show a picture (.jpg), some more information about this point and a URL to the specific source.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'DAYS BETWEEN RELEASE AND CEREMONY',
style: {
fontSize: '22px'
}
},
subtitle: {
text: ''
},
xAxis: {
min: 0,
reversed: true,
title: {
enabled: true,
text: 'Days difference'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'longdashdot',
width: 1,
value: 365,
label: {
text: 'ONE YEAR',
y: 580,
rotation: 0,
textAlign: 'left',
}
}]
},
yAxis: {
min: 1929,
max: 2012,
title: {
text: 'Year'
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Nominees',
marker: {
symbol: 'circle'
},
Can anyone help me out with this project?
You can bind a click event to the point using the following code.
plotOptions: {
scatter: {
point: {
events: {
click: function() {
// do what you want
// you can get the point reference using `this`
}
}
}
}
}
demo