We Keep Coding

Null Values in Zones in Highcharts

I have graphs that have zones. Currently if there is a null value, that null value is displayed in the tooltip with the zone color of the point before it. I want the null value to always be the color black.
For example,
The tooltip in graph 1 has all the correct information... but "Strength: null" has a green dot. I want to make this dot black because it is a null value.
Is it possible to make this happen? Thanks so much.
https://codepen.io/austeng/pen/gOppRWY
zones: [
{
value: 0.3,
color: "green"
},
{
value: 0.5,
color: "black",
},
{
color: "red"
}
]

look at this code. change AFTER point = chart.series[0].points[pointIndex]; BEFORE });
if (thisChart === Highcharts.charts[Highcharts.hoverChartIndex]) {
Highcharts.charts.forEach(function(chart) {
point = chart.series[0].points[pointIndex];
// CHANGE START
if (point.y == null) {
// set here your color for null values
result +=
'<span style="color:black' +
'">●</span> ' +
point.series.name +
": <b>" +
point.y +
"</b><br/>";
} else {
result +=
'<span style="color:' +
point.color +
'">●</span> ' +
point.series.name +
": <b>" +
point.y +
"</b><br/>";
}
// CHANGE END
});
} else {
result =
'<span style="color:' +
this.color +
'">●</span> ' +
this.series.name +
": <b>" +
this.y +
"</b><br/>";
}

I have added this functionality by defining the color point like this:
let color = point.y === null ? 'black' : point.color
and use this color variable in the result:
result +=
'<span style="color:' +
color +
'">●</span> ' +
point.series.name +
": <b>" +
point.y +
"</b><br/>";
Demo: https://jsfiddle.net/BlackLabel/7x1oc2pw/
Is that what you had in mind?

Formatting tooltip in Highcharts

How to make sure that in the tooltip, "(name)" is displayed only after the value along the axis? With the current codes "(name)" is also displayed after string "Series 1:.. (name)".
Highcharts.chart('container', {
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '(name)' + '<br/>' + point.series.name + ': ' +
point.y + 'm';
}, '<b>' + this.x + '</b>');
},
shared: true
}
});
Example: https://jsfiddle.net/nsdtf7ah/
Printscreen: http://joxi.ru/Dr8501zTowVWGm

If you need (name) only after Month name then replace tooltip with :
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' + point.y + 'm';
}, '<b>' + this.x + '(name)'+ '</b>');
},
shared: true
},
https://jsfiddle.net/m4q2sh7t/
If you need 2 (name)'s each after String N then:
tooltip: {
formatter: function () {
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' + point.y + 'm' + '(name)';
}, '<b>' + this.x+ '</b>');
},
shared: true
},
https://jsfiddle.net/m4q2sh7t/1/

OHLC tooltip getting duplicated to volume chart also in stock chart (highstock)?

I am trying a custom tooltip to my stock chart.
Like: ( my custom tooltip formatter)
formatter: function() {
var extremes = $(element[0]).highcharts().xAxis[0].getExtremes(),
start = extremes.min,
end = extremes.max;
var toolTipObj = computeDynamicToolTip(start, end);
return ['<b>' + convertMillisToDateFormat(this.x) + '</b>'].concat(
this.points.map(function(point) {
return 'Rainfall ' + '<b>' + point.y.toFixed(2) + '<b>' +' (mm)' + '<br>'
+ 'High ' + '<b>' + toolTipObj.max.toFixed(2) + '<b>' + ' (mm)' + '<br>'
+ 'Low ' + '<b>' + toolTipObj.min.toFixed(2) + '<b>' + ' (mm)' + '<br>'
+ 'Average ' + '<b>' + toolTipObj.avg.toFixed(2) + '<b>' + ' (mm)';
})
);
},
But the formatter adds tooltip to both ohlc and volume, i want to create a separate tooltip for my volume chart, so I am not able to understand how to do that.
Any help would be appreciated.
Thanks

You can define a tooltip for a specific series and use pointFormatter to customize it:
series: [{
...
}, {
type: 'column',
...,
tooltip: {
pointFormatter: function() {
return 'some custom value'
}
}
}]
Live demo: https://jsfiddle.net/BlackLabel/za8126vr/
API Reference: https://api.highcharts.com/highstock/series.column.tooltip.pointFormatter

get clicked event of tool-tip button google charts

I want a button to call a function onclick but it does not. I tried ng-click which does not work. But when I try onclick it says my function is undefined. How can I accomplish that?
Thank you.
Function to customize the tooltip:
function createCustomHTMLContent(img, evtTime, cmname, evt, cust, serv, descr, duration) {
var html ='<script type="text/javascript" src="validate.js"></script><div class="myclass" style="padding:5px 5px 5px 5px;width: 300px;height: 350px;">' +
'<img src="'+img+'" style="width:285px;height:230px">' +
'<table>'+'<tr>'+
'<td><strong>Date :</strong></td>' +
'<td><b>'+evtTime+'</b></td>' + '</tr>' + '<tr>' +
'<td><strong>Event Type :</strong></td>' +
'<td><b>'+evt+'</b></td>' + '</tr>' + '<tr>' +
'<td><strong>Customer :</strong></td>' +
'<td><b>'+cust+'</b></td>' + '</tr>' + '<tr>' +
'<td><strong>Severity :</strong></td>' +
'<td><b>'+serv+'</b></td>' + '</tr>' + '<tr>' +
'<td><strong>Description :</strong></td>' +
'<td><b>'+descr+'</b></td>' + '</tr>' + '<tr>' +
'<td><form ng-form-commit name="myForm" action="" onsubmit="testfunt()" target="dummyframe" method="post" novalidate><div class="row"><div class="text-center"><button ng-click="timeline.heyfun();">View Video</button></div></form></div></td></tr></table>';
return html;
}
function addData() {
rows.push([""+cmname, ""+id,createCustomHTMLContent(thumbpath, evtTime, cmname, evt, cust, serv, descr, 0),new Date(datetime), new Date(datetime1),'color:'+colors[serv]]);
tc.dataTable.addRows(rows);
var options = {
width : $scope.width,
height: $scope.height,
title: 'Timeline',
hAxis: {
title: 'Date',
format:'yy-MM-dd\n\nHH:mm:ss'
},
timeline: { //colorByRowLabel: true,
showBarLabels: false},
// backgroundColor: '#ffd',
colors: grapghcols,
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true,}
};
tc.chart.draw(tc.dataTable, options);
$compile(tc.dataTable)($scope);
}
There is alot of code. SO i tried to include the relevant snippets needed. Please let me know if you need more details.

Make hover text smaller using Tipsy in D3

Tipsy is used to display a lot of text when hovering over my nodes and I'd like to make that text smaller. How do I do that?
$('.node').tipsy({
gravity: 'w',
html: true,
title: function() {
var d = this.__data__, id = d.id, inc_calls = d.inc_calls, out_calls = d.out_calls, inc_texts = d.inc_texts, out_texts = d.out_texts;
return 'Incoming Calls: ' + inc_calls + '<br/>' + 'Outgoing Calls: ' + out_calls + '<br/>' + 'Incoming Texts: ' + inc_texts + '<br/>' + 'Outgoing Texts: ' + out_texts ;
}
});

wrap the text that you are returning for title with a span which has style with font-size that you wish.. for example i have set the font size to 10 px you can reset it to a size which fits for your situation.
<span style="font-size:10px">+ your_title_text +</span>
$('.node').tipsy({
gravity: 'w',
html: true,
title: function() {
var d = this.__data__, id = d.id, inc_calls = d.inc_calls, out_calls = d.out_calls, inc_texts = d.inc_texts, out_texts = d.out_texts;
return '<span style="font-size:10px">Incoming Calls: ' + inc_calls + '<br/>' + 'Outgoing Calls: ' + out_calls + '<br/>' + 'Incoming Texts: ' + inc_texts + '<br/>' + 'Outgoing Texts: ' + out_texts + '</span>' ;
}
});