Develop Reference

Hightchart issue, when more then one plot is used on page

I am working on page, where i need to have multiple plots, one being a solid gauge and the other being a line graph.
I am using the Ionic Framework 5 with angular and High Charts.
I am finding that when one plot is displayed, it works fine, but with more then one I am getting some type of conflict where the line chart does not get updated and the gauge gets data which is meant for the line graph.
This my code. Do i need to do anything in perticular?
particulate_plot() {
let particulte_chart = this.particulte_chart.stockChart('particulate_plot', {
chart: {
type: 'line',
animation: true,
backgroundColor: "#464340",
},
credits: {
enabled: false
},
legend: {
enabled: true,
layout: 'horizontal',
verticalAlign: 'bottom',
floating: false,
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
title: {
text: "Particulate Mass Concentration",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b',
},
title: {
text: 'Date',
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
labels: {
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
}
},
yAxis: {
min: 0,
opposite: false,
title: {
text: "Mass \xb5g/m\xb3",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
labels: {
formatter: function() {
return (this.value.toFixed(2) ? '' : '') + this.value.toFixed(2);
},
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
plotLines: [{
label: {
text: "EU Limit 40 \xb5g/m\xb3",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
},
align: 'center',
y: -10,
},
color: 'red', // Color value
value: 3, // Value of where the line will appear
width: 5 // Width of the line
}],
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
boostThreshold: 0,
color: '#FFF59D',
name: "PM1.0",
type: 'spline',
data: this.datasets[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#FFAB40',
name: "PM2.5",
type: 'spline',
data: this.datasets_b[0].data,
showInNavigator: true,
visible: true,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#90CAF9',
name: "PM4",
type: 'spline',
data: this.datasets_c[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#4DD0E1',
name: "PM10",
type: 'spline',
data: this.datasets_d[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
}
],
"tooltip": {
"pointFormat": "<b>{point.y:.2f}</b>",
"shared": true
},
});
}
}
air_main_gauge() {
let maingauge_chart = this.maingauge_chart.stockChart('MainGuageA', {
chart: {
type: 'solidgauge',
backgroundColor: 'white',
},
credits: {
enabled: false
},
pane: {
center: ['50%', '50%'],
size: '100%',
innerSize: '10%',
startAngle: -150,
endAngle: 150,
background: {
backgroundColor: HighCharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '85%',
outerRadius: '100%',
shape: 'arc'
}
},
lineWidth: 1,
tooltip: {
enabled: false
},
navigator: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
scrollbar: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
// title: {
// text: 'Speed'
// },
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.8, '#ed1f1f'] // red
],
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
gridLineWidth: 10,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
}
},
series: [{
// name: 'Speed',
data: [20],
dataLabels: {
format: '<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>',
position: 'right',
},
tooltip: {
// valueSuffix: ' km/h'
enabled: false
}
}],
plotOptions: {
solidgauge: {
innerRadius: '85%',
dataLabels: {
y: -45,
borderWidth: 0,
useHTML: true
}
},
},
});
}
</ion-row><ion-row class="ion-align-self-start"><!-- <script src="https://code.highcharts.com/highcharts.js"></script>--><script src="https://code.highcharts.com/stock/highstock.js"></script><script src="https://code.highcharts.com/highcharts-more.js"></script><script src="https://code.highcharts.com/modules/solid-gauge.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.highcharts.com/modules/export-data.js"></script><script src="https://code.highcharts.com/modules/accessibility.js"></script><div id="particulate_plot" style="width:100%; height:100%;"></div><div id="MainGuageA" style="width: 100%;" class="posi"></div><!-- <ion-item class="leafpostion" lines="none"></ion-item>--><!-- <ion-icon name="leaf" class="leaf"></ion-icon>--></ion-row>

How are textshadow false

How to remove shadows from numbers in charts?
Highcharts.chart('container', {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: null
},
title: {
text: 'STATUS',
align: 'center',
style:
{
fontSize:'14px',
color: '#000000',
fontWeight: 'bold'
}
},
credits: {
enabled: false
},
legend: {
align: 'center',
verticalAlign: 'middle',
layout: 'vertical',
floating: true,
itemStyle: {
color: '#000000',
fontSize: 12
},
symbolRadius: 0,
y: 115,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: '100%',
center: [ '50%', '25%' ],
dataLabels: {
enabled: true,
distance: -35,
color: '#ffffff',
style: {
fontSize: 13
},
formatter: function() {
if(this.point.color=='#01a698'){
return '<span>' + this.y +'</span>';
}
if(this.point.color=='#77c646'){
return '<span>' + this.y +'</span>';
}
if(this.point.color=='#fd4c01'){
return '<span>' + this.y +'</span>';
}
if(this.point.color=='#f7921d'){
return '<span>' + this.y +'</span>';
}
if(this.point.color=='#f7af33'){
return '<span>' + this.y +'</span>';
}
}
},
showInLegend: true
},
},
series: [{
type: 'pie',
data: [
{
name: '1',
y: 19,
color: '#01a698'
},
{
name: '2',
y: 11,
color: '#77c646'
},
{
name: '3',
y: 12,
color: '#fd4c01'
}
,
{
name: '4',
y: 17,
color: '#f7921d'
}
,
{
name: '5',
y: 13,
color: '#f7af33'
}
]
}],
tooltip : {
enabled : false
}
});
<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="container" style="height:250px"></div>

You need to add textOutline: false to the style object in the config:
style: {
fontSize: 13,
textOutline: false
},
This has also already been answered here: Remove shadow/background glow on highcharts data label?

why click event not working in legend?

could you please tell me why click event not working in legend.I try to show alert when i click on legend .
here is my code
http://jsfiddle.net/qhq2ctqr/3/
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
symbolHeight: 1,
symbolWidth: 1,
symbolRadius: 0,
useHTML: true,
align: 'right',
verticalAlign: 'top',
itemWidth: 100,
layout: 'vertical',
x: 0,
y: 100,
labelFormatter: function() {
return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
events: {
legendItemClick: function(event) {
alert('----')
}
},
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
states: {
hover: {
enabled: false
}
},
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: true
},
data: [
['A', 55],
['B', 65],
],
size: '30%',
innerSize: '70%',
}, {
states: {
hover: {
enabled: false
}
},
name: 'Versions',
data: [
['sdsd', 55],
['sdf', 65],
['sdf', 65],
['sdf', 132],
],
size: '70%',
innerSize: '80%',
}]
});
})
;
I tried this code on fiddle but alert is not display ?
/* $('.test').on('click',function(e){
alert('---');
console.log(e)
console.log($(this))
$('div.test').css('background-color','red')
return false;
}) */

Your PlotOptions should be,
plotOptions: {
series: {
cursor: 'pointer',
events: {
legendItemClick: function(event) {
alert('TEST');
},
click: function(event) {
alert('TEST');
}
}
}
}
DEMO

how to remove shadow on hover in highchart?

could you please tell me how to remove shadow on hover in highchart ? When I hover the any slice it give shadow .
here is my code
http://jsfiddle.net/oupmgvjy/11/
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
title: {
text: 'Election'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: false
},
data: [
['A', 55],
['B', 65],
],
size: '30%',
innerSize: '70%',
}, {
name: 'Versions',
data: [
['a', 55],
['b', 65],
['c', 65],
['d', 132],
],
size: '70%',
innerSize: '80%',
}]
});
});
in other words I need to remove shadow on hover .I already use shadow: false

What you want is achieved throug plotOptions -> series -> states -> hover. You just have to add the next option inside plotOption:
series: {states: {hover: {enabled: false}}},
Here you have the documentation.
Please, if this answer your question, mark it as solved :)

how to show text in center in highcharts?

Could you please tell me how to show text in center in highcharts .I want to show A/B value in center of both donut chart .I want to show
value of donut chart 155/165 value in center here is my code
http://jsfiddle.net/oupmgvjy/12/
expected output
A/B value in center
$(function() {
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100,
labelFormatter: function() {
return '<span style="color:' + this.color + ';background:red!important">' + this.name + ':</span> <b>' + this.y + '</b> </n>';
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
series: {
states: {
hover: {
enabled: false
}
}
},
allowPointSelect: false,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: 0,
endAngle: 270,
center: ['50%', '75%']
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
states: {hover: {enabled: false}},
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: true
},
data: [
['A', 155],
['B', 165],
],
size: '30%',
innerSize: '70%',
}, {
states: {hover: {enabled: false}},
name: 'Versions',
data: [
['sdsd', 55],
['sdf', 65],
['sdf', 65],
['sdf', 132],
],
size: '70%',
innerSize: '80%',
}]
});
});

You can use dataLabels.distance property to set the labels inside the pie.
dataLabels: {
enabled: true,
distance: -40
},
example: http://jsfiddle.net/oupmgvjy/13/