since I need to add a description text to some of my y-axis titles I need to set the height of the ticks in a highcharts bar chart. Does anyone know how to get this working? Is there perhaps an automatic height calculation possible?
new Highcharts.Chart({
credits: { enabled: false },
chart: {
renderTo: 'parameterAnalysisChart{0}'.format(chartCount),
type: 'bar',
height: parameters.length * categories.length * 20 + (parameters.length + 1) * 40,
spacingRight: 20
},
title: { text: i18n.t('misc.valueCategory_plural') },
xAxis: {
categories: xAxis
},
yAxis: {
min: 0,
title: { text: null },
labels: { overflow: 'justify' },
allowDecimals: false
},
tooltip: { enabled: false },
legend: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<strong>'+ this.series.name +':</strong> ' + this.y;
}
}
},
series: {
minPointLength: 5,
stickyTracking: false
}
},
series: series
});
Related
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
I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/
I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle
I have the attached chart output.
How can I put the name of the axis exactly on the axis instead of positioning it between the axis (ie: N, E, S, W).
The JS code is given below:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
polar: true,
type: 'column'
},
title: {
text: '24-Hours Wind Speed and Direction Chart'
},
pane: {
startAngle: 0,
endAngle: 360,
size: '85%'
},
legend: {
reversed: true,
enabled: false,
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
type: "",
categories: sorted_names,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0,
endOnTick: true,
showLastLabel: false
},
plotOptions: {
series: {
// pointStart: 0,
// pointInterval: 90
// pointPlacement: 'between'
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: series
});
Is there anyone who can help me to fix this. Thanks in advance.
I believe you are looking for a combination of the tickMarkPlacement option and the pointPlacement option.
xAxis: {
tickmarkPlacement: 'on', // add this!
type: "",
categories: sorted_names,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
And in the plot options:
plotOptions: {
series: {
pointPlacement: 'on' // add this !
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
Here's a fiddle demonstration.
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