I'm using Highcharts pie chart and I want to add custom suffix for each point. For example now I have this in the tooltip formatter:
tooltip : {
formatter : function() {
return 'Daily KB: <b>'+ this.point.y +'</b>';
}
},
and the way the pop up is displayed is something like that for each piece of the pie Daily KB: 300. How can I modify this so that in one piece the pop up will be somehting like this Daily KB: 700 remaining and the other will be Daily KB: 300?
Highcharts script:
(function($){
$(this.document).ready(function(){
//get local time
Highcharts.setOptions({
colors: ['#fa604c', '#00CC66']
});;
myChart_d = new Highcharts.Chart({
chart: {
height:200,
width:200,
type: 'pie',
animation: false,
renderTo: 'dailychart',
zoomType: 'x',
events: {
load: function () {
requestDataLim();
}
}
},
title: {
text: 'Daily'
},
tooltip : {
formatter : function() {
return 'Daily KB: <b>'+ this.point.y +'</b>';
}
},
//tooltip: {
//shared:true
//},
plotOptions: {
pie: {
// allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
},
borderColor: '#A0A0A0',
innerSize: '40%',
},
series:{
dataLabels: {
style:{ fontSize: '14px', fontWeight:'bold' },
enabled: true,
formatter: function() {
return Math.round(this.percentage) + ' %';
},
distance: -15,
color:'black'
}
},
},
credits: {
enabled: false
},
series: [{
name: 'DailyKB',
data:
[<?php echo join(',',$d);
echo ',';
echo join (',',$dl);?>]
}],
exporting: {
buttons: {
printButton: {
enabled: false
},
exportButton: {
enabled: false
}
}
}
});
I get me data through ajax and JSON and currently are something like this [300, 700]
How about changing format fo data to array of objects? For example:
[{y: 300, suffix: ""}, {y: 700, suffix: " remaining" }]
Then in tooltip set add suffix info:
return 'Daily KB: <b>'+ this.point.y +'</b>' + this.point.options.suffix;
Related
I am trying to create a chart like this one:
:
I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.
I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.
My current Highcharts settings look like this:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Is there an built-in solution for this?
EDIT:
I used the proposed solution by ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.
There is also a small rendering issue - small gaps between the zones.
Best,
Philipp
You can add an extra spline series with zones:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/
API: https://api.highcharts.com/highcharts/series.spline.zones
how to draw hh:mm pie chart using highcharts for bellow table
You could try this approach, we get the total amount of time, then create a highcharts chart from the individual points:
const data = [
{
name: 'Line Clear - Line maintenance',
value: '06:29',
color: '#eef441'
},
{
name: 'Incoming Supply Failure (ICF)',
value: '14:44',
color: '#f44242'
},
{
name: '33 KV Line Breakdown',
value: '02:13',
color: '#41f48b'
},
{
name: 'Line Clear - SS maintenance',
value: '00:10',
color: '#4176f4'
},
{
name: 'Momentary Interruptions',
value: '01:11',
color: '#e541f4'
}
];
var totalTimeSeconds = data.reduce((sum,row) => {
return sum + 1.0*moment.duration(row.value).asSeconds();
}, 0.0);
var dataSeries = data.map((row) => {
return {
name: row.name + " (" + row.value +")",
y: moment.duration(row.value).asSeconds() / totalTimeSeconds,
color: row.color
};
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Reason Type'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Reason',
colorByPoint: true,
data: dataSeries
}]
});
Here's a JSFiddle that demonstrates this: Reason-Chart
*Actually i'am generating pie chart for table using table id.
So i added another column as seconds,generated table like bellow image.
The bellow Script is used to generate pie chart
<div class="row" style="margin-left: 0px;text-align: center;">
<div id="durationGraphcontainer" style="height: 310px; margin: 0 auto;margin-bottom: 10px;width: 100%"></div>
</div>
// Duration Graph
Highcharts.chart('durationGraphcontainer', {
data: {
table: 'durationGraph'
},
chart: {
type: 'pie'
},
title: {
text : 'Inetrruption Reason Type Graph'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Million Units'
},
stackLabels: {
enabled: true,
align: 'center'
}
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left',
layout: 'vertical',
y: 100,
labelFormatter: function() {
return this.name + " - " + this.percentage.toFixed(2) + "%";
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>',
formatter: function () {
return this.point.name.toUpperCase();
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false,
format: '{point.percentage:.2f} %',
} ,
innerSize: 100,
depth: 45,
showInLegend: true
},
},
series:[
{
type: 'pie',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return this.point.y.toFixed(2);
}
}
},{point: {
events: {
click: function() {
}
}
}
}],
credits: {
enabled: false
}
});*
What do I need to do to make this chart work with 3D options? I have everything connected properly and it shows the charts in 2D just fine.
When I add the options3d like in the example below it throws an error that the identifier is depreciated.
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
Here is what I have tried with no luck, I commented out the 3D portion because that was the only way it worked with my data query:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 75,
marginBottom: 25
//options3d: {
// enabled: true,
//alpha: 15,
//beta: 15,
// depth: 50,
// viewDistance: 25
// }
},
title: {
text: 'Contributions to Filers by Year',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Money Contributed to Filers'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
}
$.getJSON("/charts/data/filers-test.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>
Since no one was able to help me with this, I figured it out on my own with trial and error. Here is the script I used to get the final working result from the server. This produces a nice 3D highchart that can show the data properly. I may need to edit it a few more times before it is actually used...
$(document).ready(function() {
var options = {
// basic chart options
chart: {
height: 350,
renderTo: 'container',
type: 'column',
marginRight: 130,
lang: {
thousandsSep: ','
},
marginBottom: 25,
// 3D initialization, comment out for non-3D columns
options3d: {
enabled: true,
alpha: 0,
beta: 2,
depth: 50,
viewDistance: 25
}
},
// main chart title (TOP)
title: {
text: 'Contributions to Filers',
x: -20 //center
},
// main chart sub-title (TOP)
subtitle: {
text: '',
x: -20
},
// xAxis title
xAxis: {
reversed: true,
title: {
text: 'Election Year'
},
categories: [],
reversed: true
},
// yAxis title
yAxis: {
title: {
text: 'Dollar Amount'
},
// chart options for each plotted point
plotLines: [{
value: 1,
width: 1,
color: '#66837B'
}]
},
// tooltip on hover options
tooltip: {
lang: {
thousandsSep: ','
},
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: 0,
y: 0,
borderWidth: 0,
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#F2C45A'
}
},
series: {
text: 'Total Dollar Amount',
color: '#66837B',
cursor: 'pointer'
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#F2C45A'
}
}
},
series: []
}
Highcharts.setOptions({
// sets comma for thousands separator
lang: {
thousandsSep: ','
}
});
$.getJSON("/charts/data/filers-test.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
chart.legend.allItems[0].update({name:'Total by Election Year'}); ///// LEGEND LABEL CHANGES HERE!
});
});
I need to create a highchart with jquery. I have given the Zoom type as x. The Zoom option in chart is not working when there are large amount of data.
In my X-Axis I will be having date value :
Below is my chart implementation:
// Global chart options
Highcharts.setOptions({
chart: {
borderRadius: 0,
borderWidth: 1,
borderColor: '#DADCE0',
marginRight: 45,
zoomType: 'x',
width: 600,
height: 400
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
minRange: 8 * 24 * 3600000,
labels: {
format: '{value:%m-%d-%Y}', //'{value:%m-%d-%Y}'
rotation: 45
}
},
plotOptions: {
series:{
fillOpacity:0.1
},
spline: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
},
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
}
},
global: {
useUTC: false
}
});
var chartJobCount = new Highcharts.Chart({
chart: {
renderTo: 'container-segementReport',
type: 'areaspline'
},
colors: ['#0D4F8B','#00CCFF', '#ff0000', '#ff69b4','#663399','#ffa500','#006400','#654321'],
title: {
text: 'Segments (Classic)'
},
yAxis: {
title: {
text: 'Production Ratio'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '', ',');
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ' </b> <br/> Date : <b>' + Highcharts.dateFormat('%m-%d-%Y', this.x) + ' </b> <br/> Production Ratio: <b>' + this.y + '</b>';
}
},
series: getProductionRatio() --// This function will get the data for series
});
When I try to zoom the chart, the contents present in the chart gets hided.
Is there anything that needs to taken care in the point interval for X-Axis ?
Thanks in Advance !
When I open a page that contains Highcharts (I use 3 pie charts), the print dialog always shows and I don't know how it comes and to stop it.
This is the js code:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'users_contain',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Users'
},
// exporting: {
// buttons: {
// exportButton: {
// enabled:true
// },
// printButton: {
// enabled:false
// }
// }
// },
exporting: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage,2) +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage,2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'User Usage',
data: []
}]
}
$.getJSON("data/account_preview/user_usage.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
I've tried to modify its exporting by add this
exporting: {
enabled: false
}
or
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}
}
}
but, it also didn't work, it just make the button exporting be disabled in the chart.
Anyone know, how to stop print dialog when I open page that containt highcharts ?
Thank's.