Develop Reference

Stuck on the final bits of a multi series line chart

I built a multi series Highcharts https://www.highcharts.com/ line chart with irregular time data. It's almost there, but I'm doing something wrong with the data and/or data formatting. Anyone have a hint or two to throw my way?
The date from the database was converted from '02/03/2009' to javascript time in php using
$date = strtotime($data['As of Date'])*1000;
The other value is a dollar amount.
I haven't yet added the filtered data for 3MO, 6MO, 1YR, 5YR, 10YR
Here is the jsfiddle https://jsfiddle.net/madmichael/th41g4yt/
$( document ).ready(function() {
createChart();
});
function createChart(chartingOptions) {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
events: {
load: function(event) {
var total = 0; // get total of data
for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: $' + Highcharts.numberFormat(total, 0, '.', ','),
this.plotLeft,
this.plotTop + 20
).attr({
zIndex: 5
}).add() // write it to the upper left hand corner
}
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
inputEnabled: false,
allButtonsEnabled: true,
/* buttons: [[]], */
buttons: [
{
type: 'all',
text: 'All'
}, {
type: 'month',
count: 3,
text: '3MO'
}, {
type: 'month',
count: 6,
text: '6MO'
}, {
type: 'year',
text: '1YR',
count: 1
}, {
type: 'year',
text: '5YR',
count: 5
}, {
type: 'year',
text: '10YR',
count: 10
}],
buttonTheme: {
width: 60
},
selected: 0
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
pointFormat: '$' + '{point.y:,.0f}'
/* formatter: function() {
return Highcharts.dateFormat('%b %d, %Y', point.x) + ': $
{point.y:,.1f}';
} */
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%b-%Y', this.value);
}
}
},
yAxis: {
type: 'linear',
labels: {
formatter: function () {
if(this.value >= 0 ){
return '$' + this.value / 1000+'k';
}else{
return '-$' + this.value / 1000*-1+'k';
}
}
}
},
series: [{name: 'Investment Fund (A)',fundtype: 'Load',data: [[1483164000000,37149],[1451541600000,37247],[1420005600000,37071],[1388469600000,33407],[1356933600000,19881],[1325311200000,14132],[1293775200000,21541],[1262239200000,18343],[1480485600000,36659],[1448863200000,39677],[1417327200000,38070],[1385791200000,32212],[1354255200000,18197],[1322632800000,14132],[1291096800000,20173],[1259560800000,17399],[1477890000000,34171],[1446267600000,39069],[1414731600000,36522],[1383195600000,30429],[1351659600000,18468],[1320037200000,14848],[1288501200000,20250],[1256965200000,15703],[1475211600000,36503],[1443589200000,36071],[1412053200000,34602],[1380517200000,29214],[1348981200000,17752],[1317358800000,13048],[1285822800000,19287],[1254286800000,17861],[1472619600000,35249],[1440997200000,38775],[1409461200000,36542],[1377925200000,27548],[1346389200000,16784],[1314766800000,15642],[1283230800000,16994],[1251694800000,16821],[1469941200000,32741],[1438318800000,42537],[1406782800000,34230],[1375246800000,28273],[1343710800000,16203],[1312088400000,17674],[1280552400000,18478],[1249016400000,14335],[1467262800000,29782],[1435640400000,40245],[1404104400000,36150],[1372568400000,26157],[1341032400000,16861],[1309410000000,19707],[1277874000000,17013],[1246338000000,13083],[1496206800000,41636],[1464670800000,33015],[1433048400000,40656],[1401512400000,34720],[1369976400000,26850],[1338440400000,16010],[1306818000000,20963],[1275282000000,19441],[1243746000000,12563],[1493528400000,40010],[1461992400000,32603],[1430370000000,39814],[1398834000000,33779],[1367298000000,25205],[1335762000000,17229],[1304139600000,21233],[1272603600000,21426],[1241067600000,10732],[1490936400000,39794],[1459400400000,33054],[1427778000000,39304],[1396242000000,34798],[1364706000000,24063],[1333170000000,17771],[1301547600000,21021],[1270011600000,20983],[1238475600000,8940],[1456725600000,30977],[1330495200000,17307],[1488261600000,40696],[1425103200000,39285],[1393567200000,34955],[1362031200000,22011],[1298872800000,21233],[1267336800000,19268],[1235800800000,7534],[1233640800000,9422],[1485842400000,37149],[1454220000000,30233],[1422684000000,35856],[1391148000000,33603],[1359612000000,22108],[1327989600000,15990],[1296453600000,21021],[1264917600000,18459]]},{name: 'Investment Fund (A)',fundtype: 'No Load',data: [[1483164000000,39428],[1451541600000,39532],[1420005600000,39345],[1388469600000,35456],[1356933600000,21101],[1325311200000,14999],[1293775200000,22863],[1262239200000,19468],[1480485600000,38908],[1448863200000,42111],[1417327200000,40406],[1385791200000,34188],[1354255200000,19314],[1322632800000,14999],[1291096800000,21411],[1259560800000,18466],[1477890000000,36267],[1446267600000,41466],[1414731600000,38763],[1383195600000,32295],[1351659600000,19601],[1320037200000,15759],[1288501200000,21493],[1256965200000,16667],[1475211600000,38742],[1443589200000,38284],[1412053200000,36725],[1380517200000,31006],[1348981200000,18841],[1317358800000,13848],[1285822800000,20470],[1254286800000,18957],[1472619600000,37411],[1440997200000,41154],[1409461200000,38784],[1377925200000,29238],[1346389200000,17814],[1314766800000,16601],[1283230800000,18037],[1251694800000,17853],[1469941200000,34749],[1438318800000,45147],[1406782800000,36330],[1375246800000,30008],[1343710800000,17197],[1312088400000,18759],[1280552400000,19611],[1249016400000,15215],[1467262800000,31609],[1435640400000,42714],[1404104400000,38368],[1372568400000,27762],[1341032400000,17896],[1309410000000,20916],[1277874000000,18057],[1246338000000,13885],[1496206800000,44190],[1464670800000,35040],[1433048400000,43151],[1401512400000,36850],[1369976400000,28498],[1338440400000,16992],[1306818000000,22249],[1275282000000,20634],[1243746000000,13333],[1493528400000,42464],[1461992400000,34604],[1430370000000,42256],[1398834000000,35851],[1367298000000,26751],[1335762000000,18286],[1304139600000,22536],[1272603600000,22740],[1241067600000,11391],[1490936400000,42236],[1459400400000,35082],[1427778000000,41716],[1396242000000,36933],[1364706000000,25539],[1333170000000,18862],[1301547600000,22311],[1270011600000,22270],[1238475600000,9489],[1456725600000,32878],[1330495200000,18368],[1488261600000,43192],[1425103200000,41695],[1393567200000,37099],[1362031200000,23361],[1298872800000,22536],[1267336800000,20450],[1235800800000,7996],[1233640800000,10000],[1485842400000,39428],[1454220000000,32087],[1422684000000,38056],[1391148000000,35664],[1359612000000,23464],
[1327989600000,16971],[1296453600000,22311],[1264917600000,19591]]},],
plotOptions: {
series: {
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series[i];
if (otherSeries != this && otherSeries.visible)
{
otherSeries.hide();
}
}
},
legendItemClick: function() {
if(this.visible){
return false;
}
}
}
},
line: {
marker: {
enabled: false
},
/* color: '".$attributes["line_color"]."',
*/ }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme &&
Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
credits: {
enabled: false
},
};
/* options.series[5] = {
name: '5 Yrs',
data: processed_five_years,
visible: false
};
*/
var chart = new Highcharts.stockChart(options);
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
};

Data label position

Whenever i resize my chart my code will not work.
I want to show all my data labels at the same height but I'm unable to adjust it. All data labels should be above max height which i calculated in the code. Max height is the two times of max data value.Plz help me in it.
Below is my jsfiddle link
Jsfiddle link
var i = 0, max = 0, min = 0;
var val = [-6, 5, 10, 4];
var cat = ['Sep-2016', 'Oct-2016', 'Nov-2016', 'Dec-2016'];
var color = ['#f442d4', '#41f4f1', '#4149f4', '#f49a41'];
var fixed = [];
var variable = [];
var val2= new Array();
for( i=0; i<val.length; i++ )
{
var str = {y:0, color: ""};
str.y = val[i];
str.color = color[i];
val2.push(str);
}
for(i=0;val[i];)
{
if(min>val[i])
min=val[i];
if(max<val[i])
max=val[i];
i++;
}
max=2*max;
if(min<0)
min=2*min;
else
min=0;
for( i=0; i<val.length; i++ )
{
if(val[i]<0)
fixed.push(-2);
else
fixed.push(2);
}
for( i=0; i<val.length; i++ )
{
if(val[i]<0)
{
variable.push(min-fixed[i]-val[i]);
}
else
{
variable.push(max-fixed[i]-val[i]-2);
}
}
var seriesData= [{
type: 'areaspline',
color: '#e1e4e8',
data: val,
dataLabels:{
enabled:false
}
}, {
type: 'column',
color: '#bbc1c9',
data: fixed,
dataLabels:{
enabled:false
}
}, {
type: 'column',
color: '#dce0e5',
data: variable,
dataLabels:{
enabled:false
}
}, {
type: 'column',
data: val2,
dataLabels:{
enabled:true,
formatter: function () {
return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";transform:translate(0px,-150px)'>" + this.point.y +"</div></html>";
},
useHTML:true,
}
}]
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
backgroundColor: '#f4f7f7'
},
legend: {
enabled: false
},
xAxis: {
categories: cat,
tickmarkPlacement: 'on',
title: {
enabled: false
},
tickLength: 0
},
yAxis: {
max: max,
min: min,
tickInterval: 2,
labels: {
enabled: false
},
title: {
text: '',
},
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#FFFFFF',
},
series: {
pointWidth: 5,
borderWidth: 0,
stacking: 'normal',
}
},
series: seriesData,
});
Note: max positive value : 160, max negative value : -60
for further reference you can check the below image

add at the end this line
jQuery('.highcharts-label').css('top','0px');
and update your formater
formatter: function () {
return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";position:absolute;left:-15px'>" + this.point.y +"</div></html>";
https://jsfiddle.net/f3gscp3d/1/

HighCharts - Hide/Show Label on mouse Events

I'm trying to hide the label and change the border width on mouse over, and return the graph to its original state on mouse out.
The "Uncaught TypeError: Cannot read property 'states' of undefined" keeps showing and I don't know what to do.
var showLabel = function () {
var options = myChart.options;
options.xAxis[0].labels.enabled = true;
options.plotOptions.series.borderWidth = 0;
myChart = new Highcharts.Chart(options);
};
var hideLabel = function () {
var options = myChart.options;
options.xAxis[0].labels.enabled = false;
options.plotOptions.series.borderWidth = 3;
myChart = new Highcharts.Chart(options);
};
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.bar.colors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'graph_capt',
type: 'bar',
backgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits:false,
exporting:false,
title: {
text: ''
},
xAxis: {
categories:['Captação'],
labels: {
//AQUI
enabled:true,
x: 80,
y: 5,
style:{
color: '#ffffff',
fontSize: '12pt',
},
},
tickWidth: 0,
tickColor: '#000000',
gridColor: '#000000',
gridLineWidth: 0,
lineWidth: 0,
visible: true,
},
yAxis: {
labels: {
enabled:false
},
min: 0,
gridLineWidth: 0,
title: {
text: ''
}
},
tooltip: {
pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false,
},
legend: {
enabled:false,
},
plotOptions: {
bar: {
stacking: 'percent',
allowPointSelect: true,
colorByPoint: true,
cursor: 'pointer'
},
series: {
stickyTracking: false,
borderColor: '#000000',
//AQUI
borderWidth: 0,
events: {
mouseOver: function (event) {
console.log('Mouse over');
return hideLabel();
},
mouseOut: function () {
console.log('Moused out');
return showLabel();
}
}
},
},
series: [{
name: 'Poupança',
data: [1000000]
}, {
name: 'Letras',
data: [75000.75]
}, {
name: 'Fundos',
data: [50545.49]
}]
});
JS Fiddle

Instead of recreating charts on each mouse event you should update the chart dynamically using axis.update and series.update.
It will be also better to get event of charts container instead of series, since you want to change the chart and the series.
Example: https://jsfiddle.net/aythcvop/
$(function() {
var showLabel = function(chart) {
chart.xAxis[0].update({
labels: {
enabled: true
}
}, false);
Highcharts.each(chart.series, function(series) {
series.update({
borderWidth: 0
}, false);
});
chart.redraw();
//options.xAxis[0].labels.enabled = true;
//options.plotOptions.series.borderWidth = 0;
//myChart = new Highcharts.Chart(options);
};
var hideLabel = function(chart) {
chart.xAxis[0].update({
labels: {
enabled: false
}
}, false);
Highcharts.each(chart.series, function(series) {
series.update({
borderWidth: 3
}, false);
});
chart.redraw();
//options.xAxis[0].labels.enabled = false;
//options.plotOptions.series.borderWidth = 3;
//myChart = new Highcharts.Chart(options);
};
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.bar.colors = (function() {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'graph_capt',
type: 'bar',
backgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits: false,
exporting: false,
title: {
text: ''
},
xAxis: {
categories: ['Captação'],
labels: {
//AQUI
enabled: true,
x: 80,
y: 5,
style: {
color: '#ffffff',
fontSize: '12pt',
},
},
tickWidth: 0,
tickColor: '#000000',
gridColor: '#000000',
gridLineWidth: 0,
lineWidth: 0,
visible: true,
},
yAxis: {
labels: {
enabled: false
},
min: 0,
gridLineWidth: 0,
title: {
text: ''
}
},
tooltip: {
pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false,
},
legend: {
enabled: false,
},
plotOptions: {
bar: {
stacking: 'percent',
allowPointSelect: true,
colorByPoint: true,
cursor: 'pointer'
},
series: {
borderColor: '#000000',
//AQUI
borderWidth: 0
},
},
series: [{
name: 'Poupança',
data: [1000000]
}, {
name: 'Letras',
data: [75000.75]
}, {
name: 'Fundos',
data: [50545.49]
}]
});
$('#graph_capt').on('mouseenter', function() {
console.log('hide');
hideLabel(myChart);
});
$('#graph_capt').on('mouseleave', function() {
console.log('show');
showLabel(myChart);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="graph_capt" style="height:100px"></div>

HighChart irrgular Mapping

I have created One HighChart ..But its 2 data coordinates are overlapping on y axis after every 2nd Coordinates.
My JSFiddle
My Code:
$(function () {
var highOptions = {
chart: {
type: 'line',
renderTo: 'container2',
zoomType: 'x',
marginTop: 100
},
title: {
text: 'Score'
},
subtitle: {
text: ' '
},
xAxis: {
title: {
text: 'XXX'
},
categories: [],
labels: {
rotation: 45,
step: 1,
y: 30
}
},
yAxis: [{ // left y axis
title: {
text: 'XXX'
},
min: 0,
max: 9,
plotLines: [{
value: 7.5,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'XXX'
}
}]
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 1);
}
}
}
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
series: []
};
highOptions.xAxis.categories = [0.1003, 0.1006, 0.1008, 1.1010, 1.1011, 1.1012, 1.1013, 2.4];
highOptions.subtitle.text = "XXX:";
chart = new Highcharts.Chart(highOptions);
for (var x = 0; x <= 1; x++) {
var newLP = [];
switch (x) {
case 0:
aName = "One";
newLP.push([0.1004, 4.5]);
newLP.push([0.1008, 1.4]);
newLP.push([1.1012, 5.5]);
newLP.push([1.1014, 2, 6]);
newLP.push([2.4, 8.22]);
break;
case 1:
aName = "Two";
newLP.push([0.1004, 5.52]);
newLP.push([0.1008, 6.16]);
newLP.push([1.1012, 6.34]);
newLP.push([1.1014, 6.69]);
newLP.push([1.1016, 6.36]);
newLP.push([2.4, 7.44]);
break;
}
chart.addSeries({
name: aName,
data: newLP
}, false);
}
chart.redraw();
});
I have test it with several data ..still it overlaps .. what could be the issue ..
Please Suggest

The problem is that you're x-axis points are so close to each other it seems as they are overlapping. For example 0.1003 is pretty close to 0.1006 and 0.1008 is pretty close to 1.1010. However, If you zoom in you can tell they are not overlapping. See http://jsfiddle.net/u9xES/555/.

Set different width for each column in highcharts

I need to set different widths for each column in my graph... The width is depends on yaxis value... For example if yaxis value is 23 the width of column with this value will be 50px and value need to be in the middle of the column. And if yaxis value is 234 : the width must be 70px and value in the middle of the column... How i can do this?
My graph is:
options = {
chart: {
renderTo: 'chart',
type: 'column',
width: 450
},
title: {
text: 'A glance overview at your contest’s status'
},
xAxis: {
categories: ['Approved Photos', 'Pending Approval Photos', 'Votes', 'Entrants'],
labels: {
//rotation: -45,
style: {
font: 'normal 9px Verdana, sans-serif, arial'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Amount'
}
},
legend: {
enabled: false
},
series: []
};
series = {
name: "Amount",
data: [],
dataLabels: {
enabled: true,
color: '#000000',
align: 'right',
x: -10,
y: 20,
formatter: function () {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
};
And i set values on this way:
var colors = Highcharts.getOptions().colors;
var index = 0;
options.series = [];
series.data = [];
for (var i in Data) {
if (parseInt(Data[i]) != 0) {
series.data.push({ y: parseInt(Data[i]), color: colors[index] });
index++;
}
else {
series.data.push(null);
}
}
options.series.push(series);
chart = new Highcharts.Chart(options);

Is this what you are looking for http://jsfiddle.net/YCf9z
you can get this by using
pointPadding: 0.1
hope this is useful for you

In Highcharts, one series could have only one width, so if you want to have each bar another width, split your data into series and use pointWidth to set width.