We Keep Coding

Highcharts Tooltip - Getting rid of the marker dot?

I would like to get rid of the small dot in my tooltip display. I am using High-charts. I Can you please help in modifying this feature, here is my code:
Highcharts.getJSON(
'https://code.highcharts.com/mapdata/custom/world.topo.json',
topology => {
const chart = Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: ''
},
legend: {
enabled: false,
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
fontWeight: 'bold',
fontSize: '20px'
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true,
buttonOptions: {
align: 'right',
verticalAlign: 'bottom'
}
},
mapView: {
maxZoom: 30,
projection: {
name: 'Orthographic',
rotation: [60, -30]
}
},
colorAxis: {
min: 0,
max: 100,
text: '',
stops: [[0, 'darkgrey', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
title: {
text: '',
},
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
backgroundColor: 'black',
style: {
color: 'white'
},
},
plotOptions: {
series: {
animation: {
duration: 750
},
clip: false
}
},
mapline: {
color: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Graticule',
id: 'graticule',
type: 'mapline',
data: getGraticule(),
nullColor: 'lightgrey',
color: 'lightgrey',
accessibility: {
enabled: false
},
enableMouseTracking: false
},
{
data,
joinBy: 'name',
name: '',
states: {
hover: {
color: '',
borderColor: '#000000'
}
},
accessibility: {
exposeAsGroupOnly: true
}
}]
});
Here is an image of what is displayed: enter image description here
I want to get rid of the little dot in the top left of the tooltip box. I have been trying everything and it always seems to appear there. I have tried adding in "Marker: false", but maybe I am not inputting it in the correct spot (not sure if this is the correct code).

You can use formatter option for the tooltip, something like this, but add your values:
tooltip: {
formatter: function(tooltip) {
return `${question1}: <b>${percentage1}</b><br/>`
}
},
Here is documentation about it: https://api.highcharts.com/highcharts/tooltip.formatter

How to make triangular progress bar using highchart?

I have done the progress bar in circle ( circular )but I want to do with triangle also. Is it possible to make in triangle?
My Code(for circle):
Highcharts.chart('myDivid'+i, {
chart: {
type: 'pie'
},
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: {
pie: {
innerSize: 40,
depth: 45,
size:60,
dataLabels: {
enabled: false,
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: { enabled: false },
labels: {
items: [{
html: '<b>'+data.av+'%</b>',
style: {
left: left,
top: '12px',
fontSize: '15px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
name: 'Availability',
states: { hover: { enabled: false } },
data: [
{
y:data.availability,
color : data.availabilityColor
},
{
y:100-data.availability,
color : 'white'
}
]
}]
});
I have tried but i dint get how to do it for triangle.
I have made changes for this but not getting what I really want.
Thanks in Advance

How can I place chart directly above the legend? (highcharts)

Here is what I achieved so far
http://jsfiddle.net/9r6Lr5gr/3/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
lineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function(){
return 'Total: ' + this.total;
}
},
labels: {
enabled: false
}
},
legend: {
reversed: true,
align: 'left'
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 30,
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'none',
fontSize: 15
}
}
}
},
series: [{
name: 'Outstanding (due > 7 days)',
data: [41]
}, {
name: 'Outstanding (due < 7 days)',
data: [32]
}, {
name: 'Overdue',
data: [15]
}]
});
I want to place the bar chart directly above the legend. Also, is it possible the little horizontal line just before the bar chart. Thanks.

Go through comment in code
Fiddle Demo
Highcharts.chart('container', {
chart: {
type: 'bar',
marginBottom: -180, //make charts display at bottom
events: {
load: function () {
// Draw the horizontal line
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
line = ['M', 550, 0, 'L', 0, 0, 'L', 0, 0, 'M', 0, 0, 'L', 5, 0];
ren.path(line)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(10, 335)
.add();
}
}
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
lineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
yAxis: {
gridLineWidth: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function(){
return 'Total: ' + this.total;
}
},
labels: {
enabled: false
}
},
legend: {
reversed: true,
align: 'left'
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 30,
dataLabels: {
enabled: true,
color: 'white',
style: {
fontWeight: 'none',
fontSize: 15
}
}
}
},
series: [{
name: 'Outstanding (due > 7 days)',
data: [41]
}, {
name: 'Outstanding (due < 7 days)',
data: [32]
}, {
name: 'Overdue',
data: [15]
}]
});

HIGHCHARTS - Value of Columns Based on previous Column Value

I got some issue using Highcharts.
I need to draw the height of third column "C" based on values of the column "B"
(As default the draw of height at column "C" is based on Column "A")
I created a simple example here
$('#container').each(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'A',
'B',
'C'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.val}</b> ',
shared: true
},
legend: {
enabled: true
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '%';
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:100, val: 2111, color: '#199ED8' },
{ y: Math.round(748 / 2111 * 100), val: 748, color: '#6CF' },
{ y: Math.round(433 / 748 * 100), val: 433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});

I'm working with Julio in this case, and we Solve it.
Resolution: http://jsfiddle.net/JVNjs/1203/
$('#container').each(function () {
var publico = 2111;
var abordados = 748;
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'Público',
'Abordados',
'Conversão'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.y}</b> ',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
if(this.x == 'Conversão'){
return Math.round(this.y / abordados * 100, 0) + '%';
}else{
return Math.round(this.y / publico * 100, 0) + '%';
}
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:publico, color: '#199ED8' },
{ y:abordados, color: '#6CF' },
{ y:433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});

Combine Highcharts and Intro.JS (or similar)

I have a lot of charts in Highcharts. Now I want to point out some interesting developments in some of these charts. This can be done with Intro.JS, for example.
How can I implement this library or something similar inside my Highcharts? An example of a Highcharts chart here.
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 20
},
title: {
text: 'Kortetermijnraming CPB'
},
subtitle: {
text: 'Werkloosheid stijgt tot 6%'
},
xAxis: {
max: Date.UTC(2000,1,0),
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%Y',
year: '%Y'
}
},
yAxis: {
min: 0,
title: {
text: 'Werkloosheid (%)'
},
plotLines: [{
value: 0,
width: 2,
color: '#000000',
zIndex: 5
}, {
label: {
text: 'Werkloosheid',
x: 0,
align: 'right'
},
value: 6,
width: 0.5,
color: '#ffffff',
zIndex: 1
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'<br/>'+
Highcharts.dateFormat('%Y', this.x) +':</b> '+ this.y +'%';
}
},
plotOptions: {
series: {
animation: {
duration: 5000
}
},
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 4,
lineWidth: 1
}
}
}
}
},
legend: {
enabled: false
});
});