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.

Create four chart with same data different rendering(HIGHCHARTS)

Please I need help , I need to create four chart with the SAME data but with different rendering , how can I do this please ?
Here My highcharts code,
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'tv_chart_container',
type: 'area',
backgroundColor: '#1E2229',
//#1E2A38
marginRight: 10,
panning:true,
mapNavigation: {
buttons: {
zoomIn: {
// the lower the value, the greater the zoom in
onclick: function () { this.mapZoom(0.1); }
},
zoomOut: {
// the higher the value, the greater the zoom out
onclick: function () { this.mapZoom(10); }
}
}
//enableButtons: false
},
credits: {
enabled: false
},
title: {
text: '',
},
xAxis: {
type: 'datetime',
crosshair: {
color: '#335A81',
label: {
enabled: true,
padding: 8,
format: '{value: %H:%M:%S}'
}
},
minTickInterval: 1000 * 60, //one minute
gridLineWidth: 0.1,
plotLines: [{
value: pur_time, // Value of where the line will appear
width: 2 ,
color: '#656568',
dashStyle: 'dash',
id: 'plotline',
label: {
text: 'Purchase deadline',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#656568',
fontWeight: 'bold'
}
}
},{
value: exp_time, // Value of where the line will appear
width: 2 ,
color: '#A28F29',
id: 'plotline1',
label: {
text: 'Expiration time',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#686A3B',
fontWeight: 'bold'
}
}
}]
},
yAxis: {
title: {
text: '',
},
opposite: true,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.2f}'
}
},
gridLineWidth: 0.1,
labels: {
align: 'right',
x: 10
},
opposite: true,
minorGridLineWidth: 0,
},
tooltip: { enabled: false },
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: true
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null,
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
type: 'area',
color: '#0AB9F1',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 6000,
Math.random()*100,
Math.random()*100,
Math.random()*100,
Math.random()*100
]);
}
return data;
})()},{data:[{ x:14654694989093 , y: 50,y: 52,y: 56,y: 57}], color: 'rgba(0,0,0,0)',enableMouseTracking:true}]
});
i have four different id to rendering chart with same data

Highcharts multi y-axis min-max issue

I have a highcharts graph with three data ranges on the y-axis. Two monetary amounts and one 'survival probability' which is a percentage.
I need to restrict the range of the percentage axis to 0-100% but nothing I do seems to make any difference.
Any ideas ?
Here's the fiddle : http://jsfiddle.net/moonspace/2jnrp/
And here's (some of) the code:
jQuery('#chartContainer').highcharts({
chart: { width: 600, height: 500 },
title: { text: '' },
credits: { enabled: false },
xAxis: {
categories: client_age_array,
title: {
text: 'Client age',
style:{ color: '#000000', fontWeight: 'bold', fontSize: '12px' }
},
labels: {
step: 5,
staggerLines: 1
}
},
yAxis: [{ // First yAxis - Income
labels: {
style: {
color: gradTop,
fontSize: '12px'
}
},
title: {
text: 'Income',
style: {
color: gradTop,
fontSize: '12px'
}
},
opposite: true,
min: null,
max: null
},
{ // Second yAxis - Fund value
gridLineWidth: 0,
labels: {
style: {
color: '#003466',
fontSize: '12px'
}
},
title: {
text: 'Fund value',
style: {
color: '#003466',
fontSize: '12px'
}
},
min: null,
max: null
},
{ // Third yAxis - Survival probability
gridLineWidth: 0,
labels: {
format: '{value}%',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
title: {
text: 'Survival probability',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
opposite: true,
min: 0,
max: 100
}],
tooltip: {
formatter: function() {
var toolTip = '<b>Age : '+ this.x +'</b><br />';
jQuery.each(this.points, function(i, point) {
if( point.series.name == 'Survival probability' ){
if( isNaN(point.y) ){
// -- do nothing
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
});
return toolTip;
},
shared: true
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -5
}
},
series: [
{
name: 'Income',
type: 'column',
yAxis: 0,
data: income_array
},
{
name: 'Fund value',
type: 'spline',
yAxis: 1,
data: fund_value_array,
marker: {
enabled: false
}
},
{
name: 'Survival probability',
type: 'line',
lineWidth: 0,
yAxis: 2,
data: survival_array_2
}
],
colors: [{
linearGradient: perShapeGradient,
stops: [ [0, gradTop], [1, gradBottom] ]
},
'#003466',
'#fe6f01'
]
});

Simply set alignTicks to false for the Survival Probability axis. That's it.

Highcharts: Tooltip on Y-Axis Labels

Trying to show description about y-axis labels as tooltip.
Is it possible to show corresponding tooltips on y-axis labels?
Here is the Fiddle where I am trying to add tooltip to y-axis lables
Code:
$(function(){
var chart1;
$(document).ready(function(){
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
For each category, I have a tooltip like:
cat1: descrption1
cat2: descrption2
cat3: descrption3
cat4: descrption4
When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:

Use formatter with HTML enabled for labels: http://jsfiddle.net/W5wag/2/
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
return '<span title="My custom title">' + this.value + '</span>';
},
useHTML: true,
style: {
color: 'white'
}
}
},
Of course you need store somewhere reference cat1 <-> description1 to feed span title with description.

Extending Paweł Fus' solution I define the label and title text by delimiting the values for categories using ' - '. The value can then be split into an array by the formatter to display the first array value as the label and the second array value as the title text: http://jsfiddle.net/wqpckxL7/
xAxis: {
categories: ['cat1 - the first and best category',
'cat2 - this category is less popular',
'cat3',
'cat4',
'cat5'],
tickInterval: 1,
labels: {
enabled: true,
formatter: function() {
// split using -
var values = this.value.split(" - ");
// check we have more than 1 value
if (values.length > 1) {
// use first item in the array as the displayed label and the second for the title text
return '<span title="' + values[1] + '">' + values[0] + '</span>';
} else {
// if only one value then format as normal
return this.value;
}
},
useHTML: true,
style: {
color: 'white'
}
},
}

Add pointFormat property to your tooltip object as:
tooltip: {
.....,
.....,
pointFormat: '<b>{point.y}</b>',
}
DEMO Link:

Series Data for column high chart

I am working on highchart column chart. But I got stuck in series adding part. This is my code
function renderChart(series_data){
$("#container").height(400);
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
marginBottom: 105
},
title: {
text: 'Issue Sales',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
},
minTickInterval: 24 * 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title: {
text: 'Number of Units',
margin: 80
}
},
tooltip: {
shared: true,
valueSuffix: ''
},
legend: {
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
series: {}
});
$.each(series_data, function(key, val) {
toSeries = [];
cat_name = key;
date_data = [];
xdate = '';
$.each(val,function(k,v){
chartdate = v.date;
chartcount = v.count;
dateval = chartdate.split("-");
x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
toSeries.push([x,chartcount]);
});
chart.addSeries({
name : cat_name,
data : parseFloat(toSeries)
});
});
}
If I am adding constant series data like
chart.addSeries({ name: 'Rainfall11', type: 'column', color: '#08F',
data:[100, 200, 300, 400, 100, 200]
});
some graph is displaying. But while coming to dynamic data it doesn't show up. Also I am using Date.UTC function to display the
I sending the json data through the variable, series_data to the function renderChart that is the result of another ajax function . The sample json result is this.
{"Ferrari April
2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"1.00"},{"date":"2013-06-15","month":"June-2013","count":"1.00"},{"date":"2013-06-16","month":"June-2013","count":"1.00"}],"Ferrari
May
2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"2.00"},{"date":"2013-06-09","month":"June-2013","count":"3.00"}],"Ferrari
March
2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari
June
2013":[{"date":"2013-06-10","month":"June-2013","count":"1.00"},{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-12","month":"June-2013","count":"1.00"},{"date":"2013-06-13","month":"June-2013","count":"3.00"},{"date":"2013-06-14","month":"June-2013","count":"2.00"},{"date":"2013-06-16","month":"June-2013","count":"4.00"},{"date":"2013-06-17","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"2.00"}],"Ferrari
February
2013":[{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"1.00"}]}
The problem comes in the Date.UTC part i guess . Because when I do a console.log() it is showing NaN .
Please help to fix this issue.
I am excepting a result like this.
Demo Jsfiddle

var series_data = {"Ferrari April 2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"}],"Ferrari January 2013":[{"date":"2013-06-02","month":"June-2013","count":"1.00"}],"Ferrari March 2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari May 2013":[{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-02","month":"June-2013","count":"2.00"},{"date":"2013-06-03","month":"June-2013","count":"2.00"},{"date":"2013-06-04","month":"June-2013","count":"1.00"},{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"}]};
renderChart(series_data)
function renderChart(series_data){
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
marginBottom: 105
},
title: {
text: 'Issue Sales',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
minTickInterval: 24 * 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title: {
text: 'Number of Units',
margin: 40
}
},
tooltip: {
shared: true,
valueSuffix: ''
},
legend: {
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
plotOptions: {
column: {
}
},
series: {}
});
$.each(series_data, function(key, val) {
toSeries = [];
cat_name = key;
date_data = [];
xdate = '';
$.each(val,function(k,v){
chartdate = v.date;
chartcount = v.count;
dateval = chartdate.split("-");
x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
toSeries.push([x,parseInt(chartcount)]); // Parse your data here!
});
chart.addSeries({
name : cat_name,
data : toSeries
});
});
}
Hope it works!

You are setting the chart before putting data inside it. First data series and then call Highcharts.Chart. Then your program will run for dynamic data also.

chart.addSeries({
data: [32, 43, 42],
index: 0,
zIndex:1
});
Live Demo