I'd like to overlay a custom layer over a chart (e.g. a comment, author). Reading the API there seems to be already an object for the purpose:
A HTML label that can be positioined anywhere in the chart area.
I tried using this on one of the example charts but it has no effect (see below), although the interpreter isn't issuing any error. Am I doing something wrong or should a lable of this kind be created some other way?
Thank you.
chart = new Highcharts.Chart({
chart: {
renderTo: 'pie-container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#FFFFFF',
connectorColor: '#FFFFFF',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}],
labels: [
{html: "<b>This is a label!</b>",
style: {
left: '100px',
top: '100px',
width: '50px'}}],
});
});
});
labels should be an object.
Then you have to add each label as an element of items.
labels: {
items: [{
html: "<b>This is a label!</b>",
style: {
left: '100px',
top: '100px',
width: '50px'
}
}]
}
Demo
Related
I have a stacked column/scatter chart with some dataLabels off to one side. The issue I am facing is that when my two markers begin to get close to one another, their dataLabels overlap
I need to always show both labels, so is there a way to detect when labels are overlapping and move the bottom one down by adjusting its y value based on how much overlap there is?
sample fiddle of the issue
Highcharts.chart('container', {
chart: {
type: 'column',
width: 500
},
title: {
text: 'Stacked column chart'
},
xAxis: {
visible: false,
},
yAxis: {
min: 0,
visible: false,
title: {
},
},
legend: {
layout:"vertical",
align: "right",
verticalAlign: "bottom",
itemMarginTop: 15,
y: -10,
x: -50
},
tooltip: {
enabled: false,
},
plotOptions: {
scatter: {
marker: {
symbol: "triangle",
},
dataLabels: {
enabled: true,
x: -80,
y: 50,
allowOverlap: true,
useHTML: true,
}
},
column: {
pointWidth: 70,
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
name: '',
data: [100],
color: "#ededed"
}, {
name: '',
data: [500]
}, {
name: '',
data: [400]
},
{
type: "scatter",
data: [1000],
color: "#000",
dataLabels: {
formatter: function(){
return "<div class='label-text'>Your goal of <br/>$"+ this.y +"<br/>text</div>"
},
}
},
{
type: "scatter",
data: [900],
color: "#000",
dataLabels: {
formatter: function(){
return "<div class='label-text'>You are here <br/>$"+ this.y +"<br/>text</div>"
},
}
}]
});
You can correct data-labels positions by using the attr method on their SVG elements.
For example:
chart: {
events: {
render: function() {
const series = this.series;
const dl1 = series[3].points[0].dataLabel;
const dl2 = series[4].points[0].dataLabel;
if (dl1.y + dl1.height > dl2.y) {
dl2.attr({
y: dl1.y + dl1.height
});
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5Lmh4owb/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement.html#attr
https://api.highcharts.com/highcharts/chart.events.render
I need to do a responsive pie chart with a drilldown on the green area. The text of the labels are too long so in mobile devices it appears like this:
As you can see the texts are cut.
How can I make these texts appear fully in responsive. Please find code below. TIA
Highcharts.chart('recoveryGraf', {
chart: {
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
colors: ['#005eb8','#56b6cc','#8bc540'],
data: [{
name: 'Potential for further recovery',
y: 6,
drilldown: null
}, {
name: 'Non-recoverable<br>(e.g. tissue,wallpaper,etc)',
y: 22,
drilldown: null
}, {
name: 'Recycled',
y: 72,
drilldown: 'Recycleds'
}]
}],
drilldown: {
series: [{
name: 'Recycleds',
id: 'Recycleds',
colors: ['#57a133','#8bc540'],
data: [
['Exported', 16],
['Used Europe', 84]
]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="recoveryGraf"></div>
...
responsive: {
rules: [{
condition: {
maxWidth: 300
},
chartOptions: {
plotOptions: {
pie: {
dataLabels: {
enabled: false
// add your costume code here
}
}
}
}
}]
}
I'm making a HTML5 hybrid app for android with Highcharts for my dashboard page.
There are 3 charts in this page, and only less than 10 points in each chart.
The init animation looks smoothly on PC browser(include chrome & firefox), but very choppy on my mobile device(Nexus 7 and MSM8916 CPU phone).
Even i set duration to 2000, it's still choppy.
With jQuery 2.1.3 and Hightcharts 4.1.5.
Could someone tell me the reason and how to improve the performance of Highcharts animation on mobile device?
html code below, i use jquery mobile 1.4.5 for UI framework.
<div data-role="page" data-title="总览" id="overall-page">
<div role="main" class="ui-content no-margin">
<div class="border-chart" id="hdgjChart"></div>
<div class="border-chart" id="sbzxlChart"></div>
<div class="border-chart" id="lsgjChart"></div>
</div>
</div>
js code below:
$(document).on("pageshow", "#overall-page", function() {
// Draw first Charts.
$('#hdgjChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'column',
//pinchType: 'xy',
//zoomType: 'xy',
//panning: true
},
title: {
text: '活动告警',
align: 'left',
margin: 0,
style: { "color": "#004488", "fontSize": "16px" }
},
legend: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
labels: {
enabled: false
},
stackLabels: {
style: {
color: "#004488"
},
enabled: true
},
title: {
text: null
},
tickAmount: 8
},
plotOptions: {
column: {
stacking: 'normal',
animation: {
duration: 2000
}
}
},
tooltip: {
headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>'
},
series: [{
name: '数目',
data: [
{
y: 381,
color: "#f00505",
name: "一级告警"
},
{
y: 25,
color: "#f46700",
name: "二级告警"
},
{
y: 652,
color: "#ffcf05",
name: "三级告警"
},
{
y: 72,
color: "#22a5f2",
name: "四级告警"
}]
}]
});
// Draw second chart
$('#sbzxlChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'pie',
spacingBottom: 0
},
title: {
text: '<span style="color:#004488;font-size:16px">设备在线率</span><span style="color:#004488;font-size:12px">--总设备数：78</span>',
align: 'left',
margin: 0
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
align: 'right',
verticalAlign: 'top',
floating: true,
itemDistance: 10,
borderRadius:3,
borderWidth: 1
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.y}个，{point.percentage:.1f} %',
style: {
color: "#004488"
}
},
innerSize: '50%',
point: {
events: {
legendItemClick: function(e) {
e.preventDefaut();
}
}
},
animation: {
duration: 2000
}
}
},
series: [{
name: '数目',
data: [
{
y: 31,
color: "#00ff00",
name: '在线'
},
{
y: 47,
color: "#959595",
name: '中断'
}
],
showInLegend: true
}]
});
// Draw third chart
$('#lsgjChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'areaspline',
spacingBottom: 0,
//pinchType: 'x',
//zoomType: 'x',
//panning: true
},
title: {
text: '<span style="color:#004488;font-size:16px">历史告警数量</span><span style="color:#004488;font-size:12px">--最近7天</span>',
align: 'left',
margin: 7
},
tooltip: {
headerFormat: "",
pointFormat: '{point.y}'
},
legend: {
align: 'right',
verticalAlign: 'top',
floating: true,
borderRadius:3,
borderWidth: 1
},
xAxis: {
gridLineWidth: 1,
tickAmount: 7,
tickInterval: 1
},
yAxis: {
stackLabels: {
enabled: true,
useHTML: true,
y: -12,
formatter: function() {
return '<span style="background-color:#0d61be;color:white;font-weight:normal">' + this.total + '</span>';
}
},
title: {
text: null
},
tickAmount: 7
},
plotOptions: {
areaspline: {
stacking: 'normal',
pointStart: 1,
color: '#0d61be',
events: {
legendItemClick: function(e) {
e.preventDefault();
}
},
animation: {
duration: 2000
}
}
},
series: [{
name: '总告警数',
data: [150, 450, 300, 550, 300, 300, 100]
}]
});
});
When I made a simple highcharts test html page, and run it on mobile chrome browser, it runs smoothly.
But when simple packaged it to hybrid android app, using OS WebView & Crosswalk, It runs choppy still.(intel XDK)
I tested a canvas based js chart lib, Chart.js, It's choppy also when hybrid app.
So, I think it's the problem of VebView or Phonegap.
I'm finding the reason now, and will update the issue when I solved it.
Thanks all.
If you use a bar chart in Highcharts, the zoom does not seem to work properly.
You can select the area and also the button "Reset zoom" appears. The chart, however, is not zoomed in.
The only code I added to the basic bar example was the zoom type:
chart: {
type: 'bar',
zoomType: 'x'
},
Complete example: http://jsfiddle.net/966off9e/
Is this a bug or a feature? ;-)
I think this is somehow a bug in Highcharts, when you use categorized axis. But a workaround would be using a min for that axis:
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
min: 0
}
Here's the DEMO
Just add 'minRange' to the xAxis: http://jsfiddle.net/mushigh/axy8v9oa/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
zoomType: 'x'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
minRange: 1,
},
yAxis: {
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
Another possibility is that the amount of data is bigger than the cropThreshold variable. See this related post.
You can also see the official docs for this variable. Every kind of graphic has this variable with different default values. You should check it out to be sure.
I'm trying to add a legend on a pie when exporting the chart as PNG.
Here is my code :
var chart_23_106;
$(document).ready(function () {
chart_23_106 = new Highcharts.Chart({
chart: { type: 'pie', renderTo: 'container_23_106', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false },
title: { text: 'NRJ' },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>', percentageDecimals: 1 },
plotOptions: {
pie: { borderWidth: 0, shadow: false, allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false } }
},
colors: ['#9F9F9F','#BE6EBE','#FFA74F','#B7B7D0','#CBE22A','#00C8C8'],
credits: { enabled: false, text: "Source: Air Normand", href: "" },
exporting:{ buttons: {
printButton: {enabled:false},
exportButton: {menuItems:null,onclick:function(){this.exportChart(null,
{ chart: {reflow: false, width: 400},
title: {text: "Répartition de la Consommation"},
subtitle: {text: "Haute-Normandie"},
plotOptions: {pie: {dataLabels: {enabled: true}, showInLegend: true}},
credits: {enabled: true} }
);}}
}},
lang: {exportButtonTitle: "Export image au format PNG"},
series: [{
type: 'pie',
name: 'Proportion',
data: [
['Activite 1', 684.6],
['Activite 2', 564.7],
['Activite 3', 244.4],
['Activite 4', 42.8],
]
}]
});
});
In the function exportChart, all but the plotOptions gives the right effect. In the PNG file, the title is changed, subtitle and credits are added, but the dataLabels and the legend don't appear...
Anyone knowing why ?
Could anyone help me ?
Thanks
Yes it is possible by disabling legend in chart and in exporting parameters (http://api.highcharts.com/highcharts#exporting.chartOptions) set this option as active.
Working example: http://jsfiddle.net/xvQNA/
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
legend:{
enabled:false
},
exporting:{
chartOptions:{
legend:{
enabled:true
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
showInLegend:true,
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
For me it worked when i disabled the navigation in the exporting options :
exporting: {
chartOptions: {
legend: {
navigation: {
enabled: false
}
}
}
},
you just should add enable: true in dataLabels:
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
}