I have a couple of questions while dealing with Pie Charts in High charts.
How to change the legend's shape apart from the circle.
I want to display legends in data labels prior to percentage values.
And also with an increase in data, data labels are not radical to the pie chart. How to fix this.
my chart options :
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.percentage:.1f} %'
},
showInLegend: true
},
},
series: [{
name: 'Brands',
colorByPoint: true,
dataLabels: {
connectorWidth : 0
},
showLegends: true,
data: [{
name: 'Chrome',
y: 61.41,
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
});
my code pen
Would be grateful if I get an answer to any of my questions.
The API allows customizing the legend symbol by setting options like symbolRadius or symbolHeight.
Demo: https://jsfiddle.net/BlackLabel/1m98xgvr/
API: https://api.highcharts.com/highcharts/legend.symbolHeight
If you want to change the legend symbol to the custom png try to use this solution:
Custom Highcharts legend symbol
You can set the dataLabels.useHTML flag to true and use the dataLabes.formatter callback to customize the output which will be an outstanding HTML element.
Demo: https://jsfiddle.net/BlackLabel/2sog3znq/
Here I am not sure what do you have in mind - could you explain it more precisely?
Related
As the title says, i want to switch the tooltip header with the tootlip body text.
for me it makes no sense why the standard config is this way around...
i know i can create a custom tootlip but thats not my favorite way to do it.
the code im using currently
var options = {
series: [{
name: 'Series',
data: [v0, v1, v2, v3, v4]
}],
colors: ['#3979bd', '#c1a748', '#69b761', '#69b761', '#d54c4c'],
chart: {
type: 'bar',
height: 200
},
plotOptions: {
bar: {
distributed: true,
borderRadius: 0,
horizontal: true,
}
},
tooltip: {
enabled: true,
},
dataLabels: {
enabled: true,
},
xaxis: {
categories: ['open', 'planned', 'done', 'done cloud', 'stopped'],
}
};
var chart = new ApexCharts(document.querySelector("#overview_apex_sc4stats"), options);
chart.render();
and heres a image what i want
i want to show the negative value in the chart, but its not showing, i tried so many configs but nothing is happening.
Codesandbox link
these are the true values.
the component:
<apexcharts
ref="barchart"
width="500"
height="350"
type="bar"
:options="chartOptions"
:series="series"
></apexcharts>
Options:
chartOptions: {
colors: ["#00E676", "#9155FD", "#8A8D93"],
dataLabels: {
enabled: false,
},
xaxis: {
categories: ["Janeiro", "Feb", "Mar"],
},
},
Series:
series: [
{
name: "Receita",
data: [241221.4, 277855.4],
},
{
name: "Sub",
data: [15957.8, 18169.15],
},
{
name: "Rat",
data: [-776.525, -322.625],
},
],
To show negative values in the ApexCharts chart, the min option in the yaxis configuration is set to a value less than 0. So with the xaxis, add this code:
yaxis: {
min: -100
},
I add these options in my chart and solved my problem to show the values:
legend: {
position: "right",
width: 128,
},
tooltip: {
shared: true,
},
I have created piecharts in my django project using highcharts.Each pie is in a seperate div and the width of all divs are set to 25%.I have created the pie using a for loop so they all have the same properties yet the pies differ in size.What could be the reason for this.
This is the code for my div.
var div = document.createElement("div");
div.id = "container"+i;
div.style.cssFloat = "left";
div.style.width="25%"
document.getElementById("main").appendChild(div);
And this is the code for my chart
for(i=0;i<res.length;i++)
{
Highcharts.chart('container'+String(i), {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: server[i]
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Success',
data: res[i]
}]
});
}
Pie size by default is automatically adjusted so that data labels have enough space to be rendered. This behavior can be changed by setting plotOptions.pie.size - the diameter of the pie relative to the plot area.
Code:
plotOptions: {
pie: {
size: '50%' // Can be a percentage or pixel value
}
}
Demo:
with fixed size: https://jsfiddle.net/BlackLabel/yptnreda/1/
without fixed size: https://jsfiddle.net/BlackLabel/zfpd3at7/1/
API reference:
https://api.highcharts.com/highcharts/plotOptions.pie.size
When using Highcharts in combination with Highcharts's boost module, the graph is not rendered correclty when using small MS intervals for the xAxis.
Rendering 5000 records, with an interval of 10 ms, it looks like highcharts gets the average for a periode of time (i think)? On hovering the labels shows the correct location of the point line, not the straight line
I some how figured that the graph shows correctly at 4999 record:
Also using 100.000 record, but with a lower interval of 1000ms shows fine:
This problem only shows up when using the boost (which i MUST use because im working with millions of records). Without boost it works fine.
I could not figure out why its behaving like this.
Is this a bug of Highcharts?
Am i missing a porpperty in my chartsettings?
How can i solve this problem?
See jsfiddle for the above example : http://jsfiddle.net/r8Lv41do/49/
My Settings:
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: { type: 'datetime' },
boost: {
useGPUTranslations: true
},
navigator: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: data,
}]
});
Try enabling the boost without the useGPUTranslation set to true.
E.g.:
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: { type: 'datetime' },
// Enables boost without any other performance options
boost: { },
navigator: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: data,
}]
});
Highcharts pie chart - offset a single slice on legend click answers the question asked in the Title but I have an issue with that. When you click on one legend, corresponding slice pops out and when you click the second, it also explodes along with the first one.
What I want to do here is that only the clicked slice is exploded and all other slices go back to their original positions so there could only be one selected slice at a time.
Any help in this regard will be greatly appreciated as I am not very familiar with highchart events..
$(function () {
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
point: {
events: {
legendItemClick: function () {
this.slice();
/*Something should happen here to move all other slices back*/
return false;
}
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "Microsoft Internet Explorer",
y: 56.33
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
}]
});
});
});
JSFiddle Link
I have set a check if legend is clicked other pie slice shouldn't be sliced.
See Updated fiddle here
point: {
events: {
legendItemClick: function () {
this.slice();
var chart = $('#container').highcharts();
var legend = chart.legend;
for (var i in legend.allItems) {
var item = legend.allItems[i];
if(item !=this)
item.slice(false);
}
return false;
}
}
}