Disabling label without bar Highstock - javascript
I have a column chart Highstock:
http://jsfiddle.net/txfnsubb/
When we change range to smaller values, sometimes it shows us a label of value w/o the bar. For example I see 30 bars and at the end label with 31. Is there a possibility to turn it off? To set chart to showing label only with bar.
$('#container').highcharts('StockChart', {
chart: {
marginTop: 140
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataGrouping: {
approximation: "average"
}
}
},
scrollbar: {
enabled: false
},
navigator: {
top: 40,
xAxis: {
labels: {
formatter: function () {
return x[this.value];
}
}
}
},
xAxis: {
labels: {
y: 50,
max: 150,
formatter: function () {
return x[this.value];
}
}
},
tooltip: {
formatter: function () {
var s = [];
var next = this.x + this.points[0].series.pointRange;
if ((this.x + 1) == next) {
s.push("<b>Position: " + (this.x + 1));
} else {
s.push("<b>Position: " + (this.x + 1) + "-" + next);
}
$.each(this.points, function (i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : <span>' + point.y.toFixed(2));
});
return s.join('<br/>');
},
shared: true
},
series: [{
type: 'column',
name: 'reactivity',
data: data,
showInLegend: false,
tooltip: {
valueDecimals: 2,
shared: true
}
}, {
type: 'spline',
name: 'experiment 1',
data: data2,
color: 'green',
visible: false,
tooltip: {
valueDecimals: 2
}
}, {
type: 'spline',
name: 'experiment 2',
data: data3,
color: 'red',
visible: false,
tooltip: {
valueDecimals: 2
}
}],
legend: {
enabled: true,
margin: 0
},
rangeSelector: {
buttons: [{
type: 'millisecond',
count: seqLength / 5,
text: '0.25'
}, {
type: 'millisecond',
count: seqLength / 3,
text: '0.3'
}, {
type: 'millisecond',
count: seqLength / 2,
text: '0.5'
}, {
type: 'all',
text: '1.0'
}],
inputEnabled: false, // it supports only days
selected: 4 // all
}
});
Related
Highchart add a text under single bar in bar chart
I want to add a percentage value under the single bar. Here is the Fiddle which displays the percentage under all bars. Below is the code as well. I want to compare the last two values and then add their percentage under the last bar Code var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312']; var dataSum = data.reduce((a,x)=>a+x.y,0); Highcharts.chart('highchart', { chart: { type: 'bar', backgroundColor: null, height: 270, events: { load: function() { this.addSeries({ data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}], enableMouseTracking: false, dataLabels: { useHTML: true, formatter:function() { var pcnt = (data[this.x].y / dataSum) * 100; return '<span class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span class="">' + data[this.x].name + ' this i want put under the bar' + '</span>'; }} }, true); } } }, title: { text: '' }, xAxis: { type: 'category', labels: { style: { width: '75px', 'min-width': '75px', height: '42px', 'min-height': '42px', align: 'high' }, useHTML : true, formatter: function () { return '<div class="myToolTip" title="Hello">'+this.value+'</div>'; }, } }, colors: colors, yAxis: { min: 0, gridLineWidth: 0, title: { text: '' }, gridLineWidth: 0, labels: { enabled: false } }, credits: { enabled: false }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, pointPadding: 0.25, groupPadding: 0, dataLabels: { enabled: true, crop: false, overflow: 'none' }, colorByPoint: true } }, tooltip: { headerFormat: '<span style="font-size:11px"> lorem</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>' }, series: [{ data: data } ] }); Output Expected Output How can I add a percentage under only a single bar? Any help would be highly appreciated
You can use data labels configuration for a single point. events: { load: function() { this.addSeries(..., { x: 3, y: 1, dataLabels: { useHTML: true, formatter: function() { var pcnt = (data[this.x].y / dataSum) * 100; return '...'; } } }] }, true); } } Live demo: https://jsfiddle.net/BlackLabel/9dmtawg3/ API Reference: https://api.highcharts.com/highcharts/series.column.data.dataLabels
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: ',' } }); };
Highcharts: dateTime in milliseconds is not recognized
I have a highcharts graph consisting of 3 different plot lines. Y axis is a number format, X axis is a dateTime. The plots are being displayed properly but the labels on X show '00:00:00' and the tooltip shows the 1-st of January 1970. Here's my code for initialising the chart: Co2Chart = new Highcharts.Chart({ chart: { renderTo: 'co2-graph', type: 'spline', animation: Highcharts.svg, marginRight: 10, events: { load: function () { updateData(); setInterval(updateData, 5000); } } }, title: { text: '' }, xAxis: { type: 'datetime', tickPixelInterval: 150, labels: { formatter: function () { return Highcharts.dateFormat('%H:%M:%S', this.value); } } }, yAxis: { title: { text: 'CO2, ppm' }, plotLines: [{ value: 0, width: 1 },{ value: 1, width: 1 },{ value: 2, width: 1 }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: true }, plotOptions: { spline: { marker: { enabled: false } } }, exporting: { enabled: false }, series: [{ name: 'Master', data: [] }, { name: 'Slave 1', data: [] }, { name: 'Slave 2', data: [] }] }); This one pushes data: for(var i = 0; i < array.length; i++){ var time = Date.parse(array[i]["dateTime"]); Co2Chart.series[0].addPoint(array[i]["masterCo2"], time); Co2Chart.series[1].addPoint(array[i]["slave1Co2"], time); Co2Chart.series[2].addPoint(array[i]["slave2Co2"], time); } DateTime string that is passed to the Date.parse looks like this 2016-03-28 22:47:49. And in milliseconds – 1459198069000 Any ideas why it's not showing?
The problem is how you use addPoint method: Co2Chart.series[0].addPoint(array[i]["masterCo2"], time); Should be: Co2Chart.series[0].addPoint([time, array[i]["masterCo2"]]); Or: Co2Chart.series[0].addPoint({ y: array[i]["masterCo2"], x: time });
highcharts linechart color for dynamic data
I would to show my line chart into my html page but the filter date is always disabled and i haven't the data in xAxis, i don't know the cause of this kind of the problem ? Any help please ? my code is : function buildNumberElem(tabIn) { var tabOut = []; var data = []; console.log(tabIn); for (i in tabIn) { var daTmp = tabIn[i].split("/"); var da = Date.UTC(parseInt(daTmp[2]), parseInt(daTmp[1]), parseInt(daTmp[0])); if (tabOut[da]) { tabOut[da] = tabOut[da] + 1; } else { tabOut[da] = +1; } } for(i in tabOut){ var dataX = [i,tabOut[i]]; data.push(dataX); } return data; } // lineData var lineData = [{ name: 'RC', data: buildNumberElem(rc) },{ name: 'DAB', data: buildNumberElem(dab) }]; renderSinistersLineChart('line', lineData); $('#lineChart').highcharts('StockChart', { chart: { renderTo: 'container', type: 'line' }, scrollbar: { enabled: false }, navigator: { enabled: true }, rangeSelector : { allButtonsEnabled: true, buttons: [{ type: 'month', count: 3, text: 'Jours', dataGrouping: { forced: true, units: [['day', [1]]] } },{ type: 'all', text: 'Mois', dataGrouping: { forced: true, units: [['month', [1]]] } }], buttonTheme: { width: 60 }, selected: 2 }, title: { text: 'Déclarations de Sinistres', x: -20 //center }, subtitle: { text: 'du 01/01/'+ year +' au '+ today, x: -20 }, tooltip: { valueSuffix: ' sinistres', }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'bottom', borderWidth: 0 }, // Dynamic DATA series: linedata , credits: { enabled: false }, exporting: { buttons: { contextButton: { text: 'Imprimer' } }, printButton: { enabled: true } } });
Plot always starts at 0, highstock spline chart
I have data like this var data = []; for(var i=1;i<201;i++){ data.push([i,(Math.random() * (80 - 40 + 1)) + 40]) } And I'm creating chart like this: $('.reactivityCont').highcharts('StockChart', { chart: { marginTop: 140 }, credits: { enabled: false }, rangeSelector : { selected : 1 }, scrollbar: { enabled: false }, navigator: { top : 40, xAxis: { labels: { formatter: function() { return this.value; } } } }, xAxis: { labels: { y: 50, formatter: function() { return this.value; } }, events: { setExtremes: function (e) { start = parseInt(e.min); koniec = parseInt(e.max); $('.nt').hide(); for(var i = start-1;i<koniec;i++){ $('.nt').eq(i).show(); } main(); } } }, series : [{ type: 'column', name : 'reactivity', data : data, showInLegend: false, tooltip: { valueDecimals: 2 } }, {type: 'spline', name: 'experiment 1', data: data2, color: 'green', visible: false, tooltip: { valueDecimals: 2 } }, {type: 'spline', name: 'experiment 2', data: data3, color: 'red', visible: false, tooltip: { valueDecimals: 2 } } ], legend :{ enabled: true, margin: 0 }, rangeSelector : { buttons: [ { type: 'millisecond', count: seqLength/5, text: '0.25' }, { type: 'millisecond', count: seqLength/3, text: '0.3' }, { type: 'millisecond', count: seqLength/2, text: '0.5' }, { type: 'all', text: '1.0' } ], inputEnabled: false, // it supports only days selected : 4 // all } }); But unfortunately, my plot starts with 0, but it should not, because there is no such a value. I tried fix it, e. g. by setting plotOptions:pointStart but that didn't work.
This is caused by using column type series, where columns always starts from 0. To prevent this set threshold: null, like this: series : [{ type: 'column', threshold: null, ... }]
You can use theXAxis's min param. For Example. xAxis: { labels: { formatter: function() { return this.value; } }, min: myInitValue, max: myEndValue } Hope It Helps.