I am using two xAxis and three yAxis in this example. As you can see the data labels for the two purple lines show as expected. But when you change the zoom level to anything more than 3m, the dataLabels hide.
I am using:
dataLabels: {
enabled: true,
allowOverlap: true,
align: 'left',
verticalAlign: 'top',
x: 0,
y: -18,
zIndex: 1000,
crop: false,
overflow: 'none',
inside: true,
padding: 0,
maxPadding: 0,
formatter: function() {
return 'Other';
}
}
for one, and just allowOverlap: true for the other. None of them seem to work. Any suggestions?
The issue is caused by dataGrouping, which group points when you set range above 3m. The solution is define formatter in plotOptions.series object, instead of point.
Related
I am trying to move my data labels inward so that they are easier to read. If there is a way to dynamically center them in the slice, that would be ideal.
I've read the docs and tried modifying the X & Y.. i've tried -50 to 50 and nothing seems to be impacting the position of these labels. Am I missing something?
var PTDLastMonthOptions = {
series: [35, 65],
chart: {
width: 300,
type: 'pie',
},
legend: {
position: 'bottom'
},
dataLabels: {
enabled: true,
offsetX: 50,
offsetY: 50
},
colors: ['#00e396', '#ff4560'],
labels: ['PAID', 'UNPAID']
};
var PTDLastMonthChart = new ApexCharts(document.querySelector("#ptdLastMonthChart"), PTDLastMonthOptions);
PTDLastMonthChart.render();
#Edit 1 - Adding codepen:
https://codepen.io/flashsplat/pen/NWzowbx
#Edit 2 - I am convinced this is a bug and have reported it as such:
https://github.com/apexcharts/apexcharts.js/issues/3537
Thanks!
Change offset in plotOptions not dataLabels https://apexcharts.com/docs/options/plotoptions/pie/#dataLabelsOffset
plotOptions: {
pie: {
dataLabels: {
offset: -10,
},
}
}
I have a Highcharts area chart with no labels that I'd like to take up the entire size of its container (i.e. with the chart itself up to the very edge). I have already disabled the labels on each axis and set reserveSpace to false and padding to 0, yet my chart still does not expand to the very edges (see below screenshot):
I have this in my chart config:
...,
xAxis: {
...,
title: {
enabled: false,
reserveSpace: false
},
labels: {
enabled: false,
reserveSpace: false,
padding: 0
},
tickLength: 0,
lineWidth: 0,
tickWidth: 0,
...
},
yAxis: {
...,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
enabled: false,
reserveSpace: false
},
labels: {
enabled: false,
reserveSpace: false,
padding: 0
},
tickLength: 0,
minPadding: 0,
maxPadding: 0,
...
},
...
How can I accomplish extending the lines out to the very edge of its container?
chart.spacing is the option you are looking for.
spacing: Array.Since 3.0.6
The distance between the outer edge of the chart and the content, like title or legend, or axis title and labels if present. The numbers in the array designate top, right, bottom and left respectively. Use the options spacingTop, spacingRight, spacingBottom and spacingLeft options for shorthand setting of one option.
Defaults to [10, 10, 15, 10].
I have a chart with multiple xAxis and yAxis. I want to have multiple plotLines on the xAxis, but each plotLine doesn't stay on it's course. Here's the fiddle. Click on All to see what I mean.
The plotLine on the first axis goes to the second axis as well. How could I stop it?
There is a solution suggested in the HighCharts issue tracker which involves defining the related xAxis on each yAxis. So a plotline defined on a particular xAxis will use the top and height of the related yAxis to draw the plotline only in the correct area.
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
xAxis: 0,
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
xAxis: 1,
}, {
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true,
xAxis: 1,
}]
Updated Fiddle with each plotline only on its corresponding pane.
Note that the ability to define related axes appears to be undocumented in the API.
I have been using Highcharts(v2.1.9) to generate some pie charts. The charts are generated quite well, however I am having some problems with displaying the legend.
The legend shows in vertical view, but instead of all the legend items showing, some are hidden. I believe this is due to the navigation option being automatically enabled, which pages all of the other legend items that do not fit within the container.
Instead of paging the rest of the legend items, I want to show them in a second column, side by side with the first column.
This data is dynamic so the number of legend items/pie sectors may change over time. The solution must be able to handle more than two columns if the sectors increase.
I think one way to turn off the navigation option is to use the useHTML: true option but I haven't been able to style it in the way that I want.
Here is the fiddle: http://jsfiddle.net/7fb3x9ys/
$(function () {
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderWidth: 0,
width: 800,
height: 280
},
credits: {
enabled: false
},
legend: {
borderWidth: 0,
labelFormatter: function() {
var total = 0, percentage;
$.each(this.series.data, function() {
total+=this.y;
});
percentage=((this.y/total)*100).toFixed(2);
return '<span style="color:#000000,font-size:12px !important;"><b>'+ this.name + '</b></span><br/><span style="color:#000000,font-size:12px !important;">'+percentage+'%</span>';
},
verticalAlign: 'middle',
x:185,
y:0,
layout: 'vertical',
width: 600,
height:280,
itemWidth: 600,
symbolWidth: 7,
symbolHeight: 28
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 275,
center: ["16%", "50%"],
dataLabels: {
enabled: false,
},
showInLegend: true,
minSize: 130,
colors: [
'#7DA0B0',
'#9264AA',
'#4F2A72',
'#9A3968',
'#BF5269',
'#E16553',
'#E3985E',
'#E4BF80',
'#75C494',
'#52584B'
]
}
},
series: [{
type: 'pie',
name: 'Sector',
data:{"data":[["ENERGY",17.4],["FINANCIALS",15.1],["CONSUMER STAPLES",14.9],["UTILITIES",14.88],["MATERIALS",7.59],["REAL ESTATE",7.24],["TELECOMMUNICATION SERVICES",7.08],["CONSUMER DISCRETIONARY",6.95],["INDUSTRIALS",5.28],["HEALTH CARE",2.64],["CASH",0.95]]}.data
}]
});
});
});
I want to thank all responses in advance. I have been stuck on this for a few days now and any help would be greatly appreciated.
You can try laying out the legends horizontally and setting itemWidth to something greater than 80. That worked for me.
Example:
legend: {
itemWidth: 80
}
I want to trim in extra edges from the xAxis .
I am using end on tick and start on tick to achieve that but somehow it seems that highcharts is ignoring that.
Here is the (fiddle)
Options Set
xAxis: [{
gridLineWidth: 2,
lineColor: '#000',
tickColor: '#000',
gridLineDashStyle:'ShortDash',
categories:xAxisCategories,
gridLineColor:'#000',
tickmarkPlacement:'on',
endOnTick: true,
startOnTick: true,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
title: {
text: null
}
}],
labels: {
enabled: false
},
title: {
text: null
}
}],
I think you mean startOnTick. Anyway, that works exactly as should - note, you are using categories, that means plotting area is divided for categories equally (docs). One tick = one category = one part of plotting area (for example width = 20px).
You have two options:
don't use categorized axis (quite a lot of questions on SO are mentioning this - search for start/endOnTick or min/maxPadding with categories)
set start/endOnTick to false, min to (-0.5), max to (categories.length-0.5) and should work (-0.5 etc. may be different a little).