I am using Highcharts - pie
How can I create a style for sliced out slice... for ex: 3d border or something ?
What I want
Normal Slice
jsFiddle
PS: As I am new to these highcharts, your help would be much appreciated.
Code
$(function() {
$(document).ready(function() {
// Build the chart
$('#container').highcharts({
chart: {
type: 'pie',
},
title: {
text: 'Test'
},
tooltip: {
pointFormat: ''
},
plotOptions: {
pie: {
cursor: 'pointer',
slicedOffset:30,
}
},
series: [{
borderWidth: 0,
name: 'Brands',
data: [{
name: 'IE',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced:true
}, {
name: 'Firefox',
y: 10.38
}]
}]
});
});
});
You can use selected property and then set css for highcharts-point-select class.
point config
{
name: 'Chrome',
y: 24.03,
sliced:true,
selected: true
}
css
.highcharts-point-select {
stroke: red;
stroke-width: 3
}
example: http://jsfiddle.net/xe8zqv3n/
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 have a high chart and my data labels say Interest and balance when I click the segments of the pie chart it shows the value of 4 752.6 and I want it to show 4,752.60
{
lang: {
thousandsSep: ','
},
tooltip: {
pointFormat: '<span>{point.y:,.1f}</span>'
},
chart: {
type: 'pie'
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
enabled: true,
}
}
},
series: [
{
type: 'pie',
name: 'Line 1',
data: [
{ name: 'Balance', color: '#0000FF', y: balance, dataLabels: 'Balance' },
{ name: 'Interest', color: "#FF0000", y: interest }
]
}
]
}
You need to set the thousandsSep property in setOptions method:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Live demo: http://jsfiddle.net/BlackLabel/vwpfe429/
API Reference: https://api.highcharts.com/highcharts/lang
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
}
}
}
}
}]
}
As you can see by my example I am trying to off center the Highcharts pie chart, but the label for the large section is off to the left and cropped. Is there a way to shift it more to the top where there is room? I also want to be able to move the connector as well. If I have to I am willing to hardcode a location in the container as the size will never change.
code:
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ','
},
chart: {
style: {
fontFamily: 'Myriad'
}
},
colors: [
'rgb(97,70,59)',
'rgb(129,123,59)',
'rgb(0,125,171)',
'rgb(240,50,46)',
'rgb(175,186,102)',
'rgb(228,21,58)',
]
});
var options = {
chart: {
renderTo: 'container',
align: 'top',
type: 'pie'
},
credits: {
enabled: false,
},
exporting: {
enabled: false
},
title: {
text: ''
},
plotOptions: {
pie: {
center: ['30%', '60%'],
animation: false,
borderWidth: 3,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
softConnector: false,
connectorWidth: 2,
formatter: function() {
return this.key + "<br>" + this.percentage.toFixed(2) + '%';
}
}
}
},
xAxis: {
categories: []
},
series : [],
};
var series = {
data: [
{
type:'pie',
name: 'Example 1',
y: 5000
},
{
type:'pie',
name: 'Example 2',
y: 2150
},
{
type:'pie',
name: 'Example 3',
y: 3000
},
{
type:'pie',
name: 'Example 4',
y: 8000
},
{
type:'pie',
name: 'Example 5',
y: 5000
},
{
type:'pie',
name: 'Example 6',
y: 50000
}
],
size: '85%', // added for the donut view
innerSize: '75%', // updated for the donut view
};
options.series.push(series);
var chart = new Highcharts.Chart(options);
});
At this moment this is default behavoir of chart. You can disable main dataLabels and use Renderer to add custom shapes like text or paths.
You can also post your suggestion in our userVoice service and vote for it.
I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.
The two charts are below:
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
name = 'Votes',
data = [{
y: 1,
color: colors[0],
}, {
y: 2,
color: colors[1],
}, {
y: 3,
color: colors[2],
},{
y: 5,
color: colors[3],
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#review').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Review breakdown'
},
xAxis: {
categories: categories
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
}, yAxis: {min: 0, max: 5,
title: {text: 'Star Rating'}
}
})
.highcharts(); // return chart
});
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['positive', 'negative', 'sum'],
name = 'Votes',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Positive votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [10.85, 7.35, 33.06],
color: colors[0]
}
}, {
y: -7.15,
color: colors[3],
drilldown: {
name: 'Negative votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [-4.55, -1.42, -0.23],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Total votes',
categories: ['Users', 'Admin', 'Anonymous'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
var chart = $('#votes').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Vote breakdown'
},
subtitle: {
text: 'Click the columns to view breakdown.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total votes'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +' votes</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' breakdown';
} else {
s += 'Click to return';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
})
.highcharts(); // return chart
});
If you're trying to get two charts on one page then it is VERY simple.
<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>
CSS - Just to make the example a little easier on the eyes
.chart {
height: 200px;
}
.spacer {
height: 20px;
}
JavaScript
$(function() {
// If you need to specify any global settings such as colors or other settings you can do that here
// Build Chart A
$('#chart-A').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart A'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Apple Consumption'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Apples',
data: [5, 3, 8, 2, 4]
}]
});
// Build Chart B
$('#chart-B').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart B'
},
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
},
yAxis: {
min: 0,
title: {
text: 'Miles during Run'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true
},
series: [{
name: 'Miles',
data: [2.4, 3.8, 6.1, 5.3, 4.1]
}]
});
});
Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/
I am not really sure what some of your code is trying to do - seems a little needlessly complicated, FWIW
AS to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)
and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.
One example of multiple charts on a page:
http://jsfiddle.net/kwtZr/1/
there's no relevant code to put here, just click the link