how to show text in center in highcharts? - javascript

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/

Related

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>

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 make rectangular legend in highcharts?

Could you please tell me how to make rectangular legend in highcharts?
Currently in my demo legend is circular or circle. Here is my code
http://jsfiddle.net/oupmgvjy/12/
I want to make like this as show in image:
$(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', 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%',
}]
});
});
Try with useHTML and labelFormatter
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:10px;width:55px;background-color:'+this.color+'"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
}
}
fiddle : http://jsfiddle.net/qhq2ctqr/
$(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:10px;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: {
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%',
}]
});
});
<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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0px auto"></div>

highcharts / highstock column doesn't show all datalabels

I have a highstock column chart which doesn't show all of the values - I've tried to simplify it as much as possible for this example. I'm using highstock because I need a horizontal scroll bar on the column.
$('#container').highcharts({
tooltip: {
formatter: function () {
if (this.y === '' && this.y !== 0) {
return this.series.name + '<br/>' + this.x + ': NO DATA';
}
return this.series.name + '<br/>' + this.x + ': ' + this.y;
}
},
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: labels,
title: {
text: null
},
labels: {
style: {
color: '#000',
}
},
lineWidth: 2,
lineColor: '#000',
tickWidth: 2,
tickLength: 12,
tickColor: '#000',
startOnTick: true,
},
yAxis: {
title: {
text: 'test',
align: 'middle',
style: {
color: '#000',
}
},
labels:{enabled: false},
style: {
color: '#000',
},
gridLineColor: 'transparent',
lineWidth: 2,
lineColor: '#000',
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
floating: false,
borderWidth: 0,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: series
});
Here is a fiddle: https://jsfiddle.net/ypw4gx1h/
Some data labels are not showing because they would be overlapping nearby data labels. With a column chart dataLabels.allowOverlap is set to false by default. You could change this to true in your code like this (JSFiddle example):
plotOptions: {
series: {
dataLabels: {
enabled: true,
allowOverlap: true
}
}
}

Categories

Resources