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
Related
I received data from an api in this format:
[{"t":"2010-05-06T00:00:00Z","v":294},
{"t":"2010-05-07T00:00:00Z","v":103},
{"t":"2010-05-08T00:00:00Z","v":293},
{"t":"2010-05-09T00:00:00Z","v":113}]
how can I draw a chart with highchart in my website with them. "t" have to convert to "time" and "v" to "volume"
this is my JS file. I need to remain in the chart property as much as I can.
Highcharts.chart('container', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
data: {
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
className: 'popup-on-click',
marker: {
lineWidth: 1
}
}
},
});
You need to map your data to the format required by Highcharts.
const data = [{
"t": "2010-05-06T00:00:00Z",
"v": 294
},
...
];
const seriesData = data.map(dataEl => [new Date(dataEl.t).getTime(), dataEl.v]);
Highcharts.chart('container', {
...,
series: [{
data: seriesData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/z74pyfbj/
API Reference: https://api.highcharts.com/highcharts/series.column.data
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.
Why the first and last category shows only 3 pieces of data?
Normally there must be five.
The others seem normal.You can see the result from the picture.when I don't use height property it gives the same result
jsfiddle
ımage
chart: {
type: 'bar',
height: ((data.categories.length ) * 200) + 'px',
},
title: {
text: ''
},
xAxis: {
categories: data.categories,
title: {
text: null
}
},
yAxis: {
title: {
text: 'Puan',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: data.drivers
Change the pointPlacement to 0 in your data in jsfiddle for all the series and it is working fine again. Setting it to on creates a padding which hides part of the chart. Read up on it here.
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/
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.