We Keep Coding

How to position heatmap legend title in different position?

I have a heatmap that has a legend scale on the right side with label on top. I would like to know if it's possible to move the label "number of MMF share classes" below the legend scale in the same vertical position as the y-axis label on left?
https://jsfiddle.net/samwhite/5d6kL32o/2/
xAxis: {
// categories: this.value,
title: {
text: 'Date'
},
labels: {
autoRotation: [-10],
formatter: function () {
var dt = xcats[this.value];
var date = new Date(dt);
var month = date.getUTCMonth() + 1;
var year = date.getUTCFullYear()
return `${year}`
}
},
tickInterval: 45
},
yAxis: {
title: {
text: 'Price ($)'
},
labels: {
formatter: function () {
return `$${(this.value / 10000).toFixed(4)}`;
}
},
min: ymin*10000,
max: ymax*10000,
plotLines: [{
value: 10000,
color: 'darkred',
dashStyle: 'shortdash',
width: 0.2,
zIndex: 5
}]
},
tooltip: {
pointFormatter: function () {
return `NAV per share: <strong>${(this.y / 10000)}</strong>
<br/>Date: <strong>${xcats[this.x]}</strong>
<br/>Number of Share Classes: <strong>${this.value}</strong>`
}
},
legend: {
title: {
text: 'number of<br/>MMF share classes',
style: {
fontWeight: 'normal'
}
},
align: 'right',
y: 80,
padding: 20,
verticalAlign: 'middle',
symbolHeight: 300
},
colorAxis: [{
type: 'linear',
reversed: false,
layout: 'vertical',
stops: [
[0, '#c8daf9'],[1.0, '#537dca']
]
}],

An option could be use the code posted on this thread:
Quote:
Highcharts is not providing this option for legend title. You can
achieve your goal by translating your title in callback function:
function (chart) {
var title = chart.legend.title;
title.translate(x, y);
}
I've modified your code as follows:
Example:
legend: {
title: {
text: 'number of<br/>MMF share classes',
style: {
fontWeight: 'normal'
}
},
align: 'right',
//y: 80, // <- comment this line.
padding: 20,
verticalAlign: 'middle',
symbolHeight: 300
},
Then:
// After the "highcharts" settings, add:
, function(chart) {
var title = chart.legend.title;
title.translate(0, 370);
}
Here is the modified jsfiddle.

Access another series row's data on Highchart dataLabels

I want to access another series row data in series dataLabels. Here is my code.
categoriesarr = [1,2,3,4,5];
noofloandisbursed = [10, 20, 30, 40, 50];
pdo = [9, 18, 27, 40, 49];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'disbursement'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: categoriesarr
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#fff'),
shadow: true
},
series: [{
name: 'No. Of Loan Disbursed',
type: 'column',
data: noofloandisbursed
},
{
name: 'Pre-Disbursement Orientation',
type: 'column',
data: pdo,
dataLabels: {
enabled: true,
formatter: function(e) {
//return ((this.point.y/series[0].point.y)*100) + '%';
}
}
}]
});
I want to show the result of (series 2 value / series 1 value) * 100 in the dataLabels concatenation with % only in second series. Unfortunately i can't access the series 1's y point values. When i tried series[0].yData, it returns the whole array, not the specific row matched with second row. I also tried to pass array, but it wasn't working. Need solution of this problem.

You can find the point from the first series by index:
series: [{
...
},
{
...,
dataLabels: {
enabled: true,
formatter: function(e) {
return (
(this.point.y /
this.series.chart.series[0].points[this.point.index].y) *
100) + '%';
}
}
}
]
Live demo: http://jsfiddle.net/BlackLabel/rdwxc382/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels.formatter

Cannot get Highcharts to show in 3D with data from mysql database

What do I need to do to make this chart work with 3D options? I have everything connected properly and it shows the charts in 2D just fine.
When I add the options3d like in the example below it throws an error that the identifier is depreciated.
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
Here is what I have tried with no luck, I commented out the 3D portion because that was the only way it worked with my data query:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 75,
marginBottom: 25
//options3d: {
// enabled: true,
//alpha: 15,
//beta: 15,
// depth: 50,
// viewDistance: 25
// }
},
title: {
text: 'Contributions to Filers by Year',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Money Contributed to Filers'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
}
$.getJSON("/charts/data/filers-test.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>

Since no one was able to help me with this, I figured it out on my own with trial and error. Here is the script I used to get the final working result from the server. This produces a nice 3D highchart that can show the data properly. I may need to edit it a few more times before it is actually used...
$(document).ready(function() {
var options = {
// basic chart options
chart: {
height: 350,
renderTo: 'container',
type: 'column',
marginRight: 130,
lang: {
thousandsSep: ','
},
marginBottom: 25,
// 3D initialization, comment out for non-3D columns
options3d: {
enabled: true,
alpha: 0,
beta: 2,
depth: 50,
viewDistance: 25
}
},
// main chart title (TOP)
title: {
text: 'Contributions to Filers',
x: -20 //center
},
// main chart sub-title (TOP)
subtitle: {
text: '',
x: -20
},
// xAxis title
xAxis: {
reversed: true,
title: {
text: 'Election Year'
},
categories: [],
reversed: true
},
// yAxis title
yAxis: {
title: {
text: 'Dollar Amount'
},
// chart options for each plotted point
plotLines: [{
value: 1,
width: 1,
color: '#66837B'
}]
},
// tooltip on hover options
tooltip: {
lang: {
thousandsSep: ','
},
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: 0,
y: 0,
borderWidth: 0,
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#F2C45A'
}
},
series: {
text: 'Total Dollar Amount',
color: '#66837B',
cursor: 'pointer'
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#F2C45A'
}
}
},
series: []
}
Highcharts.setOptions({
// sets comma for thousands separator
lang: {
thousandsSep: ','
}
});
$.getJSON("/charts/data/filers-test.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
chart.legend.allItems[0].update({name:'Total by Election Year'}); ///// LEGEND LABEL CHANGES HERE!
});
});

hightChart print 'noData' message

I use the library hightChart for build some graph and i want to put a message when their is no data in my chart so i have this javascript code :
statChart = new Highcharts.Chart
({
lang:
{
noData : "no data",
},
chart:
{
renderTo: 'chart_container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title:
{
text: 'Graphique',
x: -20
},
subtitle:
{
x: -20
},
xAxis:
{
categories:['Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre', 'Janvier', 'Février', 'Mars', 'Avril', 'Mai']
},
yAxis:
{
title:
{
text: ''
},
plotLines:
[{
value: 0,
width: 1,
color: '#808080'
}]
},
legend:
{
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0,
},
credits :
{
enabled : false
}
});
And after i add some data with javascript like that :
newSerie = statChart.addSeries(
{
name : nameGraph,
data : []
});
But i never arrive to print the message who say no data and i really don't understand why because on all the exemple i find their is nothing special to do for print this message.

you need also include the no-data-to-display.js:http://code.highcharts.com/modules/no-data-to-display.js

How to update a Javascript object with a function

Basically I have a object which defines some properties for a Highchart chart:
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: aCosts
}]
};
And I want to update this object from a file (ajax call) like so:
$.getJSON(
"handler.php",
function (oJSON) {
var sName,
sCost,
aRow;
for (sName in oJSON) {
aRow = [];
//categories = [];
if (oJSON.hasOwnProperty(sName)) {
aRow.push(sName);
categories.push(sName);
}
// Create the chart
var chart = new Highcharts.Chart(options);
}
}
);
The problem is, I can't pass the new value to options as it states that categories is not defined. I've tried using:
options.categories.push(sName)
options[categories].push(sName)
And none work.
How can I update the value of categories inside my options object?

Assuming that options is visible from the $.JSON call, this should work:
options.xAxis.categories.push( sName );
If you look at the structure of your options object, you see, that categories is below the property xAxis. Thus you should address is like that.

You just need to define categories first like so:
options.categories = [];
then you can push things into this array.
Edit: You could place categories: [] in your json to begin with also.