Is it possible to add a circle around a pie chart in highcharts?
I know I can do it with an absolute positioned div just over the size of the chart, with a negative zIndex, but it doesn't look entirely right since the graph is drawn with SVG (notice the slight offset on the attached image where I've tried that approach
Thank you!
You could use a shadow with a 0 offset.
http://jsfiddle.net/blaird/RgdJ3/
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
plotOptions: {
pie: {
shadow: {
color: 'black',
offsetX : 0,
offsetY: 0,
opacity: 1,
width: 3
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
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,
},
}
}
This is the JSFiddle for demonstration.
In the two bars shown in the above JSFiddle, the respective top and the bottom side of the two bars are not black, but grey, since that is the color of the chart border/border of plot area. Would it be possible to make the two bars to be "on top" of the chart border (so that all their sides are black)? I have tried with zIndex in "series". But that does not work.
These are the most relevant javascript code:
Highcharts.chart('container', {
chart: {
type: 'column',
borderWidth: 1,
plotBorderWidth: 1,
marginBottom: 100
},
plotOptions: {
series: {
borderColor: 'black',
animation: false
},
},
xAxis: {
categories: ['1', '2']
},
yAxis: {
tickInterval: 10,
min: -50,
max: 50
},
series: [{
data: [50, -50],
zIndex: 300
}]
});
To achieve this effect, you can set series.column.clip: false.
Disabling this option allows series rendering over plotArea borders.
series: [{
clip: false,
data: [50, -50]
}]
Live demo:
https://jsfiddle.net/BlackLabel/2kyc4dbu/
API reference:
https://api.highcharts.com/highcharts/series.column.clip
When the window size shrinks, the width of the pie is updated, but the height of the whole canvas is not updated, which leads to much space above and below the pie. How can I make sure the graph doesn't take up more space than needed after resize?
Demo: http://jsfiddle.net/remisture/xV8PM/167/
Thanks
$(function() {
$('#container').highcharts({
title: null,
marginLeft: 0,
marginRight: 0,
spacingLeft: 0,
spacingRight: 0,
chart: {
type: 'pie'
},
plotOptions: {
pie: {
size: '100%',
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
#container {
outline: 1px solid red;
padding: 0;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Place your container inside a wrapper <div>, set your container width to 100% and then you will have to redraw your chart whenever the window resize event occurs,
Here is a working DEMO: http://jsfiddle.net/xV8PM/172/
Hope this helps!
I need to set a gradient background color to full height of column in Highcharts. Like on the image below. How can I do it? Help me, please.
here an example of what I need
Make another series which has points equaled yAxis maximum value. You can use pattern-fill plugin and set the pattern to a specific column.
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
pointPadding: 0
}
},
series: [{
enableMouseTracking: false,
showInLegend: false,
grouping: false,
color: 'url(#highcharts-default-pattern-1)',
data: [100, 100]
}, {
data: [20, 50]
}, {
data: [40, 30]
}]
});
You can read more about modifying/creating patterns here - http://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Live example and output
http://jsfiddle.net/rgs9uv39/
Go here and import your image: http://www.colorzilla.com/gradient-editor/ and after get your css properties.
If you need the element to be full height use:
.yourClass {
height: 100vh;
}
How can I make a pie chart fill 100% of the divit is contained in? The div has a width of 198px and it's height is 152px.
Additionally I would like to have a linear-gradient effect inside each pie slice, can you advise on how to do that?
You can achieve the full height of the pie chart by setting the size attribute in the plotOptions of pie and removing margins, spacing and titles from the chart.
Code
chart: {
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
plotOptions: {
pie: {
size:'100%',
dataLabels: {
enabled: false
}
}
}
Example (updated the fiddle to point to version 2.2.4)
Here is an example demonstrating this.
As to the linear gradients, I don't know if they have been implemented yet, but here is an example showing radial gradients.
Radial gradients are also part of Highcharts 3.0 now, here is an example
Update
Looks like as of Highcharts 3.0, this is not possible anymore due to the chart auto-scaling within the plot area, an excerpt from their documentation:
size: The diameter of the pie relative to the plot area. Can be a percentage or pixel value. Pixel values are given as integers. The default behaviour (as of 3.0) is to scale to the plot area and give room for data labels within the plot area. As a consequence, the size of the pie may vary when points are updated and data labels more around. In that case it is best to set a fixed value, for example "75%". Defaults to .
in my opinion this should not be the case since dataLabels are disabled. should probably be logged as a bug
Update (Aug 2014)
As per Torstein's comment, this is indeed still possible. slicedOffset needs to be set to 0 in addition to the margins begin set. (example)
$(function () {
$('#container').highcharts({
title: null,
chart: {
type: 'pie',
margin: 0
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
#container {
outline: 1px solid red;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>
my solutions; (for legend position margin-top error..)
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height:'100%' // added...
},
plotOptions: {
pie: {
size:'100%',
height: '100%',
dataLabels: {
enabled: false
}
}
}