I have a chart where I had to build a second series to format the labels for my design brief. In this the data labels on the pie chart show percentages, and the legend shows the labels of the items. Currently my implementation works fine except that the legend is still hoverable, and causes the chart to wash out.
Highcharts.chart({
chart: {
styledMode: true,
renderTo: chart,
events: {},
},
title: {
text: "",
},
credits: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
enableMouseTracking: false,
},
pie: {
dataLabels: {
distance: 3,
padding: 0,
// crop: false,
// overflow: "allow",
alignTo: "toPlotEdges",
verticalAlign: "middle",
},
},
},
series: [
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: highchartsData,
innerSize: "25%",
showInLegend: false,
size: "95%",
states: {
hover: {
enabled: false,
},
},
},
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: labelData,
showInLegend: true,
states: {
hover: {
enabled: false,
},
},
},
],
});
Currently, this is the behavior:
Not sure what to do to disable this that I haven't already done.
You don't need to use the second series, use instead format for data labels.
series: [{
dataLabels: {
format: '{point.y}%'
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/jhmfcty3/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.format
Related
I have problem with my chart, I want to my Pie chart use specific color for specific label, for example :
if label is "Bekerja" then chart color is #2489FF
here is my code :
var options = {
chart: {
type: "donut",
fontFamily: 'inherit',
height: 260,
sparkline: {
enabled: true
},
animations: {
enabled: true
},
},
fill: {
opacity: 1,
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
showAlways: true,
show: true
}
}
},
distributed: false,
}
},
colors: ["#2489FF", "#FFC149"],
series: jumlah,
labels: nama_status,
}
does anyone can help? thank you.
i am using pie chart of highcharts and i am not able to popluate dynamic data. Here is static form pie chart view
and code for above graph is
Highcharts.setOptions({
colors: projectColor.split(','),
});
Highcharts.chart('myChartStatics', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
type: 'pie',
},
title: {
text: ''
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
}
},
series: [{
type: 'pie',
innerSize: '60%',
name: 'Tasks',
colorByPoint: true,
data: [
[
"Inbox", 12
],
[
"Usage Guidance", 12
],
[
"Jobeegoo", 12
],
]
}]
});
now i want to add data array dynmaic on ajax call i am tried but it does not show graph
projectName = projectName.split(',')
totalTask = totalTask.split(',')
var loop = [];
for(var x = 0; x < projectName.length; x++){
loop.push([projectName[x] , parseInt(totalTask[x])]);
}
var data_value = JSON.stringify(loop);
console.log(data_value)
and console disply
[["inbox",128],["Usage Guidance",116],["FocusChain",0]]
tell me where i am wrong
I am trying to create a chart like this one:
:
I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.
I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.
My current Highcharts settings look like this:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Is there an built-in solution for this?
EDIT:
I used the proposed solution by ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.
There is also a small rendering issue - small gaps between the zones.
Best,
Philipp
You can add an extra spline series with zones:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/
API: https://api.highcharts.com/highcharts/series.spline.zones
I am using HighChart to draw a pie chart.Pie chart container is in an ascx control.In the page there are 5 controls other than this.Each ascx sections are loading by ajax async calls.Problem is that graph in first section is showing only after complete page page load.Please provide a solution.
$('#arrhythmiacontainer').highcharts({
chart: {
//plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
colors: ['#F5F5F5'],
title: {
text: ''
},
exporting: {
enabled: exportingStatus
},
tooltip:{
formatter: function() {
return false;
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
size:'100%',
dataLabels: {
enabled: true,
distance: -70,
style: {fontSize: '12px',fontWeight: 'bold'}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'pie',
name: 'Percentage',
data: [['NO DATA AVAILABLE', 100]]
}]
});
}
The above graph is in first control and it is binding using ajax call.all the other informations in control1 is loading after first ajax call.but graph is loading only after window stop.
Flot graph do not show date/hour correctly. In x-axis there are values of unix timestamps.
data:
[[1365712202000,61.39],[1365712510000,60.89],[1365712817000,0]]
flot configs:
$.plot(plotarea , [
{
label: "Value",
data: dataLine,
color: "#FF8848",
lines: { show: true, steps: false },
points: { show: true },
grid: { hoverable: true, clickable: true },
xaxis: { mode: "time", timeformat: "%d/%H/%M" }
}
]
Your configuration is wrong. xaxis and grid are not series options but plot options. Try:
$.plot($('#placeholder') ,[{
label: "Value",
data: dataLine,
color: "#FF8848",
lines: { show: true, steps: false },
points: { show: true }
}],
{
grid: { hoverable: true, clickable: true },
xaxis: { mode: "time", timeformat: "%d/%H/%M" }
}
);
Fiddle here.