am trying to export highchart to image, my high chart contains arabic labels (captions) after export arabic text shows as question marks, i tried to add (useHTML) and changed the script encoding to (utf8) and it still showing as question marks.
var options = {
chart: {
style: {
fontFamily: 'arial'
},
height: 300,
events: {
drilldown: function (e) {
generateDrillDownJSON(e, false);
},
drillup: function (e) {
generateDrillDownJSON(e, true);
}
}
},
title: {
text: Var_ChartTitleText,
},
subtitle: {
text: Var_ChartSubtitleText,
},
tooltip: {
formatter: function () {
return this.point.name + ' : ' + this.y + ' %';
}
},
xAxis: {
categories: true
},
drilldown: Var_drilldown,
legend: {
enabled: true
},
plotOptions: {
allowhtml: true,
series: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.name + ' : ' + this.y + ' %';
}
},
useHTML: true,
shadow: true
},
pie: {
size: '100%',
showInLegend: true
}
},
series: Var_Series
};
when exporting it shows as below
Related
So I have this issue where i pass in categories with html, but if I send in
foo
the only thing that comes out is
<a>foo</a>
Does anyone know why this happens? Here is the code for the highchart. This has worked before and I haven't changed anything that I can remember. These are all the details I have to post. How many more details do you need?
var test1 = Highcharts.chart('zoneChart', {
chart: {
type: 'bar',
height: 600
},
title: {
text: ''
},
xAxis: {
categories: categories,
labels: {
useHTML: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: null
}
},
tooltip: {
valueSuffix: '%',
formatter:function(){
var deviation = this.point.series.options.avvik;
var app = this.x;
var name = this.point.series.name;
var value = this.point.y
var html = this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.y,0,',','.') + '%</b><br/>';
$.each(deviation, function(i, item) {
/*<![CDATA[*/
if(item.key == app && item.avvik > 0) {
/*]]>*/
html = name + ': <b>' + Highcharts.numberFormat(value,0,',','.') + '%</b><br/><br />Har '+item.avvik+' avvik!';
}
})
return html;
}
},
credits: {
enabled: true,
},
legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
overflow: 'none',
crop: false,
useHtml: true
}
},
series: {
stacking: 'normal',
dataLabels: {
useHTML:true,
enabled: true,
color: '#FFFFFF',
align: 'right',
enabled: true,
overflow: 'none',
crop: false,
y: -10,
formatter: function(){
var app = this.x;
var html = '';
$.each(this.series.options.avvik, function(i, item) {
/*<![CDATA[*/
if(item.key == app && item.avvik > 0) {
/*]]>*/
html = '<img style="padding: 5px;" src="/css/icons/32/error.png" />';
}
})
return html;
}
}
}
},
credits: {
enabled: false
},
series: [seriesObject]
});
That behaviour was introduced in Highcharts 9 and it is intended. You can separate the click handlers from the config.
Highcharts.addEvent(Highcharts.Chart, 'load', e => {
[...e.target.renderTo.querySelectorAll('a.alerter')].forEach(
a => a.onclick = function () { alert(a.innerHTML); }
);
});
Live demo: https://codepen.io/TorsteinHonsi/pen/RwoWPqd
Please check this github issue: https://github.com/highcharts/highcharts/issues/15031 for more information.
I am using highcharts and facing the issue.
In my data I have different ratings for different quarters and I am trying
to show all "ratings" on xaxis for all "quarters".
enter code here
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
var response = {
"KBByRating":[
{
"FiscalQtr":"FY2018 Q4",
"FiscalQtrData":[
{
"Rating":"2.5",
"Count":1
},
{
"Rating":"4.0",
"Count":1
},
{
"Rating":"5.0",
"Count":1
}
]
},
{
"FiscalQtr":"FY2018 Q3",
"FiscalQtrData":[
{
"Rating":"2.33",
"Count":1
},
{
"Rating":"1.0",
"Count":3
},
{
"Rating":"5.0",
"Count":17
}
]
},
{
"FiscalQtr":"FY2018 Q2",
"FiscalQtrData":[
{
"Rating":"3.67",
"Count":1
},
{
"Rating":"5.0",
"Count":8
}
]
}
]
};
var ratings=[],ratingsCount=[],periodRatingData=[];
_.each(response.KBByRating, function(val){
ratings=[];
ratingsCount=[];
_.each(val.FiscalQtrData, function(main){
ratings.push(main.Rating),
ratingsCount.push(main.Count);
});
periodRatingData.push({
name: val.FiscalQtr,
data:ratingsCount
});
});
Highcharts.chart('container',
{
chart:{
type: 'column'
},
title: {
text: 'Knowledge Articles Published By Rating'
},
subtitle: {
text: ''
},
colors: ['#005073','#64e572','#24cbe5'],
xAxis: {
categories:ratings,
labels: {
formatter: function(){
var str = this.value;
if(str < 0){
str = '';
}
return str;
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'middle'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '' +'Count'+ ': ' + this.y;
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth: 40,
groupPadding: '.05',
shadow: false
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name + '</span>';
}
},
credits: {
enabled: true
},
exporting: {
enabled: true
},
series: periodRatingData
});
but I am getting only few ratings which is not correct. Could you please
help out to fix this.
Here I have created live example on jsfiddle:
https://jsfiddle.net/ugyef9ju/
can we change the slice color of donut chart when user click .I want to grey out all slice except selected one ..can we grey out all slices when user
click /select any slice ..
In other words
I have four colors blue ,black , green, orange ..When I click on blue it show blue rest are grey ..when I clcik on black it show black rest are grey .here is my code
http://jsfiddle.net/nyhmdtb8/5/
$(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: {
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
point: {
events: {
legendItemClick: function (e) {
return false;
},
click:function(e){
console.log(this.points)
console.log(e);
this.graphic.attr({
fill: 'yellow'
});
//return false;
}
}
},
startAngle: 0,
endAngle: 270,
}
},
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%',
}]
});
});
You have to loop through the series and through the points and change its color with the Point.update(). If you use point.graphic.attr(fill: 'grey'), then the svg elements and js objects will not be in sync.
On load events, preserve the original color for the slices:
chart: {
type: 'pie',
events: {
load: function () {
this.series.forEach(series => {
series.points.forEach(point => {
point.options.origColor = point.color;
});
});
}
}
},
On click, change the color according to the clicked point.
click: function(e) {
console.log(this)
console.log(e);
this.series.chart.series.forEach(series => {
series.points.forEach(point => {
point.update({
color: this !== point ? 'grey' : point.options.origColor
}, false, false);
});
})
this.series.chart.redraw();
}
And the last one, modify the legend formatter, if you want its color to be not changed
labelFormatter: function() {
return '<div style="padding:5px;width:55px;background-color:' + (this.options.origColor || this.color) + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
}
example: http://jsfiddle.net/zwawuem9/
example with changing legend's color: http://jsfiddle.net/zwawuem9/1/
I am after getting rid of the shadow around the highchart I have made, there is currently a shadow when hovered over the area of the pie chart like in this image:
I am also after getting text in the center of the pie chart.
Example
Here is the code:
$(function() {
// Create the chart
Highcharts.setOptions({
colors: ['#26d248', '#323232']
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'summoner-pie-container',
type: 'pie',
backgroundColor:'transparent'
}, plotOptions: {
series: {
marker: {
states: {
hover: {
enabled: false
}
}
}
},
pie: {
borderWidth: 0
}
},
title: {
text: '',
style: {
display: 'none'
}
}, credits: {
enabled: false
}, exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
}
},
series: [{
data: [["Damage Dealt",34000],["Team Damage Dealt",86423]],
size: '60px',
innerSize: '70%',
dataLabels: {
enabled: false
}
}]
});
});
http://jsfiddle.net/HpdwR/1994/
In your tooltip settings:
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
}
},
You need to add shadow: false
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
},
shadow: false
}
Also, in your plotOptions you need to essentially remove the marker layer in the object, like so:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
},
(Working Fiddle)
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.