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.
Related
I want to use my series names as xAxis. I have tried it like the code below. This code is creating multiple series but only one x axis value. Let's say in my code I want to create series for every fund and plot fund values in xAxis as well.
function draw(fund, zreturn) {
zreturn = [12.75, 11.77, 13.76];
fund = ['abc', 'xyz', 'pqr'];
var options = {};
options = {
chart: {
renderTo: 'graphDiv',
type: 'line',
Height: '400px'
},
credits: {
enabled: false
},
title: {
text: 'Fund Performance Graph',
x: -20
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: fund
}
},
yAxis: {
labels: {
enabled: true,
format: function () {
return (this.value + '%')
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
},
series: zreturn.filter(function (zreturn, i) {
return fund[i]
}).map(function (zreturn, i) {
/* Then return as series */
return {
//type: 'line',
name: fund[i],
data: zreturn,
dataLabels: {
align: 'center',
enabled: true,
format: "{y:.2f}" + '%',
style: {
fontSize: "8px",
fontFamily: 'Arial',
},
}
}
})
}
var chart = new Highcharts.Chart(options);
};
I think that right now you have small mistakes in your code.
First of all you are using yAxis.labels.format as a function. It should be formatter if you want to use it as a function:
yAxis: {
labels: {
enabled: true,
formatter: function() {
return (this.value + '%')
}
}
},
Next, you have mistake in your data, it should be an array:
data: [
[i, zreturn]
],
I am here adding x value of your point as well as y value. If I will not add x value, points will always start from 0 and because you have added only one point to every series, all of them will be on the first category.
Here you can find an example how your chart may work with these small corrections:
http://jsfiddle.net/worg6jLz/29/
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!
});
});
chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'column'
},
title: {
text: 'Cumplimiento de los Programas del PMA-Contratistas'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Nº Charlas ambientales',
'Nº personal capacitado'
]
},
yAxis: {
min: 0,
title: {
text: '%'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{name: 'Semana',data: [12 , 321] }, {name: 'Acum',data: [85, 65]}]
});
this is my Highchart code
when I am using javascript variable
like this
g311 = $("#g311").val();
g312 = $("#g312").val();
g321 = $("#g321").val();
g322 = $("#g322").val();
and pass this in series
series: [{name: 'Semana',data: [g311, g312] }, {name: 'Acum',data: [g321, g322]}]
it is not showing me graph please give me some way how to pass jquery variable in series (not static or PHP variable)
Seems to me you need to convert them to numbers first because input elems have values as strings:
g311 = +$("#g311").val();
g312 = +$("#g312").val();
g321 = +$("#g321").val();
g322 = +$("#g322").val();
and you need to declare these above the chart.
prefixing + converts a string to number.
I'm working with Highcharts and I'm not being able to accomplish something. Here is what I want:
As you can see, the text for each bar is on top of the bar.
Here is the version that I've been working on:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'APPROVED SPEND TO DATE FOR FISCAL YEAR 2013: $17,360,612'
},
xAxis: {
categories: ['Intellectual Property', 'Antitrust/Competition'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Approved spend',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' dollars'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 2013',
data: [6000123, 3743653]
}]
});
});
JSFiddle: http://jsfiddle.net/WcKvz/1/
As you can see, I'm only having the text in the left side of the bar and I can't get it right.
Any ideas? Thank you
The only way I've seen this work is with stackedLabels. You can use them even if you aren't using stacked bars since you only have one series.
...
plotOptions: {
bar: {
stacking: 'normal'
}
},
yAxis: {
stackLabels: {
formatter: function() {
return this.axis.chart.xAxis[0].categories[this.x] + ': $' + this.total;
},
enabled: true,
verticalAlign: 'top',
align: 'left',
y: -5
},
...
http://jsfiddle.net/NVypa/
I'm getting started with the Highcharts JS library and I'm having some trouble with starting my chart at a specific date and time. The chart is a stream gage chart so my X values are a date/time (in EPOCH format) and the y values are a gage height.
I want my chart to cover 3 days starting at midnight, 2 days prior to today's date. I'm trying to use 'pointStart' to establish the beginning of my chart's x values but it's not quite working. I'm getting my three day timespan but the starting point isn't the desired midnight.
What am I doing wrong? Here's my full highcharts code:
$(function () {
$('#gChart').highcharts({
chart: {
type: 'spline',
margin: [20,40,50,60]
},
legend: {
enabled: false
},
title: {
text: null
},
xAxis: {
title: {
text: 'Date',
style: {
color: 'black',
fontWeight: 'bold'
}
},
type: 'datetime',
gridLineWidth: 1,
lineWidth: 1,
lineColor: 'black',
labels: {
formatter: function () {
var curVal = this.value;
var dt = new Date();
theDate = new Date(eval(eval(curVal + 28800) * 1000));
if (theDate.toString('h tt') == "0 AM") {
var t = theDate.toString('M/d/yyyy');
} else {
var t = theDate.toString('htt');
}
return t;
},
style: {
color: 'black'
}
},
startOnTick: true,
endOnTick: true,
gridLineColor: '#222',
tickInterval: 86400,
minRange: 259200,
minorGridLineColor: 'red',
startOnTick: true,
plotlines: [{
color: 'black',
label: {
text: 'Last Update',
align: 'Right',
style: {
color: 'black',
fontWeight: 'bold',
}
},
value: theData[theData.length-1].x,
width: 1
}]
},
yAxis: {
title: {
text: 'Stage (Ft)',
style: {
color: 'black',
fontWeight: 'bold'
}
},
lineWidth: 1,
lineColor: 'black',
min: chartProps["lowGraph"],
max: chartProps["highGraph"],
minorGridLineWidth: 0,
gridLineWidth: 1,
alternateGridColor: null,
startOnTick: true,
plotLines: [{ // Flood Stage 2
value: chartProps["floodPhase2"],
dashStyle: 'Dash',
color: '#FFDC14', //Yellow
width: '4',
label: {
text: 'FLOOD STAGE 2',
align: 'center',
style: {
color: '#FFDC14', //Yelow
fontWeight: 'bold',
fontSize: '10pt'
}
}
}, { // Flood Stage 3
value: chartProps["floodPhase3"],
dashStyle: 'Dash',
color: '#FFA500',
width: '4',
label: {
text: 'FLOOD STAGE 3',
align: 'center',
style: {
color: '#FFA500',
fontWeight: 'bold',
fontSize: '10pt'
}
}
}, { // Flood Stage 4
value: chartProps["floodPhase4"],
dashStyle: 'Dash',
color: 'red',
width: '4',
label: {
text: 'FLOOD STAGE 4',
align: 'center',
style: {
color: 'red',
fontWeight: 'bold',
fontSize: '10pt'
}
}
}]
},
tooltip: {
valueSuffix: ' ft',
formatter: function() {
var curVal = this.x;
var dt = new Date();
theDate = new Date(eval(eval(curVal + 28800) * 1000));
var d = theDate.toString('M/d/yyyy');
if (theDate.toString('h') == "0") {
var t = "12:" + theDate.toString('mm tt');
} else {
var t = theDate.toString('h:mm tt');
}
theString = d + ' # ' + t + '<br><b>Gage Height: ' + this.y + ' Ft</b>';
return theString;
}
},
plotOptions: {
spline: {
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
},
marker: {
enabled: false
},
pointInterval: 900, // 5 minutes
pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()-2,0,0,0,0)
}
},
series: [{
name: 'Gage Height',
data: theData
}]
,
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
As it turns out, I had multiple things going on which prevented the chart from appearing the way I wanted. First, when you specify a dateTime type for an axis of your chart, Highcharts assumes that the date information is in millisecond Epoch format. The data I have was in second format so that was one thing I needed to correct.
The second issue was that my data's source ignores daylight savings (hence the hour shift). Once I accounted for these two issues, my chart's axis finally appeared as they should.