Develop Reference

Add second series to highchart master detail

I'm using highcharts to create a master-detail chart, could you help me how to add another series type area to the chart? i have used example from official site, but i cant imagine how to add second area to this chart
const priceChart1 = Highcharts.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json',
data => {
let detailChart;
// create the detail chart
function createDetail(masterChart) {
// prepare the detail chart
var detailData = [],
detailStart = data[0][0];
masterChart.series[0].data.forEach(point => {
if (point.x >= detailStart) {
detailData.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
zoomType: "x",
spacingLeft: 10,
spacingRight: -20,
borderRadius: 10,
backgroundColor: "#F3F3F3",
borderColor: "#335cad",
height: priceChartHeight,
style: { fontFamily: "Manrope" },
style: {
position: 'absolute'
},
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: -40,
y: 5
},
theme: {
fill: '#377DED',
stroke: 'transparent',
r: 0,
style: {
color: 'white',
borderRadius: 10
},
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
},
},
},
},
},
marginBottom: 90,
reflow: false,
marginLeft: 10,
style: {
position: 'absolute'
}
},
credits: {
enabled: false
},
title: {
text: null,
align: 'left'
},
subtitle: {
text: null,
align: 'left'
},
xAxis: {
type: 'datetime',
visible: false,
},
yAxis: {
title: {
text: null,
},
opposite: true,
gridLineColor: "rgba(87, 87, 87, 0.15)",
gridLineDashStyle: "dash",
left: -40
},
tooltip: {
formatter: function () {
var point = this.points[0];
return '' + '<br/>' + ' <span style="font-weight: 700;font-size: 14px; line-height: 19px; color: #377DED;"> ' + Highcharts.numberFormat(point.y, 2) + '</span> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">Nominal</span>' + '<br/> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">' + Highcharts.dateFormat('%e %B %Y', this.x) + '</span>' },
shared: true,
borderRadius: 5,
borderColor: 'transparent',
shadow: false,
backgroundColor: '#fff'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [
{
name: 'Nominal',
data: detailData,
type: 'area',
},
],
exporting: {
enabled: false
}
}); // return chart
}
// create the master chart
function createMaster() {
Highcharts.chart('master-container', {
chart: {
reflow: false,
borderWidth: 0,
backgroundColor: null,
spacingLeft: 10,
spacingRight: 30,
borderRadius: 10,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function (event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
this.series[0].data.forEach(point => {
if (point.x > min && point.x < max) {
detailData.push([point.x, point.y]);
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: data[0][0],
to: min,
color: 'rgba(0, 0, 0, 0)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
});
xAxis.addPlotBand({
id: 'mask-after',
from: min,
to: max,
color: 'rgba(255, 255, 255, 1)',
borderColor: "#377DED",
borderWidth: 2
});
detailChart.series[0].setData(detailData);
console.log(min)
console.log(max)
return false;
}
}
},
title: {
text: null
},
accessibility: {
enabled: false
},
xAxis: {
type: "datetime",
labels: { format: '{value:%b %e }' },
crosshair: {
color: '#377DED80'
},
lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', minorTickLength: 0, tickLength: 0,
top: -5,
showLastTickLabel: true,
maxZoom: 14 * 24 * 3600000, // fourteen days
plotBands: [{
id: 'mask-before',
from: data[0][0],
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
}],
title: {
text: null
},
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
min: 0.6,
showFirstLabel: false
},
tooltip: {
borderRadius: 50,
borderColor: 'red'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 70],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(255,255,255,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
series: [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: data[0][0],
data: data
}],
exporting: {
enabled: false
}
}, masterChart => {
createDetail(masterChart);
}); // return chart instance
}
// make the container smaller and add a second container for the master chart
const container = document.getElementById('price-chart-main');
container.style.position = 'relative';
container.innerHTML += '<div id="detail-container" style="height: 100%"></div><div id="master-container" style="height: 90px; position: absolute; bottom: 0; width: 100%"></div>';
// create master and in its callback, create the detail chart
createMaster();
}
);
there is example that i used https://www.highcharts.com/demo/dynamic-master-detail

Adding a new series to a master-detail chart is very simple. You need to only add a new data set and connect it to the right series. For example:
var detailData = [
[],
[]
],
detailStart = data1[0][0];
masterChart.series.forEach((s, index) => {
s.points.forEach(point => {
if (point.x >= detailStart) {
detailData[index].push(point.y);
}
});
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
type: 'area',
...
},
...,
series: [{
data: detailData[0]
}, {
data: detailData[1]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/97dxakfe/
API Reference: https://api.highcharts.com/highcharts/series

want to remove this bullet in front of these labels of highcharts graph

i am using highcharts solid gauge. below is sample i have created
now i want to remove these grey bullets as these are not coming in my local but in test its there, i havn't got anything helpful from api. here are options passing to this.and thus i am not sure what i am missing can anyone guide me as i have tried looking into api for solid gauge but i am not sure which option is there to help me
options() {
return {
credits: {
enabled: false
},
chart: {
type: "solidgauge",
},
title: {
text: "",
style: {
fontSize: "24px"
}
},
legend: {
layout: "horizontal",
align: "right",
itemDistance: 100,
verticalAlign: "middle",
itemMarginTop: 5,
itemStyle: {
fontSize: "28px",
},
itemMarginBottom: 5,
labelFormatter: function() {
const formattedTotal = Number(
this.userOptions.data[0].total
).toLocaleString("en-US", {
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
return (
'<span style="text-weight:bold;color:' +
this.userOptions.data[0].color +
'">' +
this.name +
'</span><br/><span style="text-align: center">' +
formattedTotal +
"</span>"
);
},
symbolWidth: 0
},
tooltip: {
borderWidth: 0,
backgroundColor: "none",
shadow: false,
style: {
fontSize: "16px"
},
useHTML: true,
pointFormat:
'<table><tr><td style="text-align: center"><span style="font-size: 14px">{series.name}</span><br><span style="font-size:22px; color: {point.color}; font-weight: bold">{point.y}%</span></td></tr></table>',
positioner: function(labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth - 600) / 2,
y: this.chart.plotHeight / 2 - 15
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [
{
// Track for Move
outerRadius: "112%",
innerRadius: "88%",
backgroundColor: Highcharts.Color(this.graphColors && this.graphColors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
},
{
// Track for Exercise
outerRadius: "87%",
innerRadius: "63%",
backgroundColor: Highcharts.Color(this.graphColors && this.graphColors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
},
{
// Track for Stand
outerRadius: "62%",
innerRadius: "38%",
backgroundColor: Highcharts.Color(this.graphColors && this.graphColors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}
]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [],
},
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false,
},
linecap: "round",
stickyTracking: false,
rounded: true
}
},
series: [
{
name: "Passerby",
showInLegend: true,
data: [
{
color: this.graphColors && this.graphColors[0],
radius: "112%",
innerRadius: "88%",
y: this.passerby,
total: this.passerbyTotal
}
]
},
{
name: "Visitor",
showInLegend: true,
data: [
{
color: this.graphColors && this.graphColors[1],
radius: "87%",
innerRadius: "63%",
y: this.visitor,
total: this.visitorTotal,
}
]
},
{
name: "Connected",
showInLegend: true,
data: [
{
color: this.graphColors && this.graphColors[2],
radius: "62%",
innerRadius: "38%",
y: this.connected,
total: this.connectedTotal
}
]
}
],
}
}

I think you can just apply a style to the class highcharts creates to hide these markers:
.highcharts-legend-item rect {
display: none;
}

I'm not familiar with highcharts, but those bullets looks like the work of a <ul> element.
You can remove bullets from all ul elements using css, like this:
ul
{
list-style-type:none;
}
See list-style-type. Of course it is better to specify the #id of the particular ul element, but (above) is just an example.

It's not possible to remove legend symbols and keep series markers. As a workaround, you can remove them manually in the chart load event callback.
Code:
chart: {
type: "solidgauge",
events: {
load: function() {
var chart = this,
series = chart.series;
series.forEach(function(serie, i) {
if (serie.legendSymbol) {
serie.legendSymbol.destroy()
}
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/e1usLm08/1/
API:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#destroy

Highcharts - How do I position tooltip behind icon on each pie slice on hover?

I wanted help with the following:
To put html tags on each pie slice(element+class to show icon) and have it positioned behind the hover tooltip?
At the moment I have this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'modules',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
backgroundColor:"transparent"
},
credits:{
enabled:false
},
exporting: {
enabled: false
},
title: {
text: '',
style: {
fontSize: '20px',
color: '#999999',
fontWeight: 'bold',
fontFamily: 'Verdana'
}
},
subtitle:{
text: '',
style: {
fontSize: '15px',
color: '#999999',
fontFamily: 'Verdana'
}
},
tooltip: {
borderWidth: 0,
borderColor: null,
borderRadius: 0,
shadow: false,
shape: "callout",
pointFormat: "{series.data.name}",
backgroundColor: "rgba(0,0,0,0.8)",
style: { "color": "#ffffff", "cursor": "default", "fontSize": "12px", "pointerEvents": "none", "whiteSpace": "nowrap" }
},
plotOptions: {
pie: {
allowPointSelect: true, // on click pulls segment out
stickyTracking: false, // mouse events
cursor: 'pointer',
followPointer:true,
dataLabels: {
enabled: false, // annotation of each segment
format: '<b>{point.name}</b>',
style: {
color: "#FFFFFF"
}
}
},
series: {
animation: {
duration: 1000,
easing: 'easeOutBounce'
},
point: {
events: {
mouseOver: function(event) {
var point = this;
if (!point.selected) {
//chart.tooltip.shared = true;
timeout = setTimeout(function () {
point.firePointEvent('click');
chart.tooltip.shared = false;
chart.tooltip.refresh(point);
}, 100);
}
}
}
},
events: {
mouseOut: function() {
chart.tooltip.shared = false;
clearTimeout(timeout);
}
},
dataLabels: {
allowOverlap:false,
enabled: true,
useHTML: true,
format:'{point.icon}',
formatter: function() {
return Math.round(this.percentage*100)/100 + ' %';
},
distance: -70,
color:'#FFFFFF'
}
}
},
series: [{
type: 'pie',
name: 'Modules',
colorByPoint: true,
color:'#FFFFFF',
data: [
{
name: 'Scheduling',
y: 60,
icon: '<i class="fa fa-book" style="font-size:80px;margin:-20px;"></i>'
},
{
name: 'Budgeting',
y: 60,
icon: '<i class="fa fa-calculator" style="font-size:70px;margin:-24px -20px -20px -40px;"></i>'
},
{
name: 'Attendance',
y: 60,
icon: '<i class="fa fa-user" style="font-size:80px;margin:-40px -15px -40px -15px;"></i>'
},
{
name: 'Reporting',
y: 60,
icon: '<i class="fa fa-bar-chart" style="font-size:80px;margin:-40px -20px -40px -15px;"></i>'
},
{
name: 'Absence',
y: 60,
icon: '<i class="fa fa-bed" style="font-size:80px;margin:-30px -20px -30px 0px;"></i>'
},
{
name: 'Payroll',
y: 60,
icon: '<i class="fa fa-gbp" style="font-size:80px;margin:-10px -20px -20px 10px;"></i>'
}
]
}]
});
If you hover each slice, the tooltip is behind the font-awesome icon?
Can it be behind?

You need to use an html tooltip instead of an svg tooltip. Set tooltip.useHTML to true.
Disable tooltip's svg box
tooltip: {
borderWidth: 0,
borderColor: null,
borderRadius: 0,
shadow: false,
backgroundColor: "none",
useHTML: true,
Set style in css:
.highcharts-tooltip > span {
padding: 5px;
background-color: rgba(0,0,0,0.8);
background-color: white\9;
/* < IE11 */
border: 1px solid #a8a7a5;
z-index: 9999;
}
Live example and output
https://jsfiddle.net/tz5stfcw/

Pie chart overlaps with legends

I am trying to create a donut chart but the problem is its overlapping with legends which is causing an issue. i want it to move a bit upward .
Javascript :
$('#divCustomerServicePieChart').highcharts({
chart: {
type: 'pie'
},
//colors: [
// '#4572A7',
// '#AA4643'],
tooltip: {
valueSuffix: '',
enabled : false
},
title: {
text: '',// retJson.Title,
margin : 0
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom',
align: 'left',
floating: true,
enabled: true,
labelFormatter: function () {
return this.name;
}
},
plotOptions: {
pie: {
borderColor: '#ffffff',
borderWidth: '4px',
innerSize: '60%',
size: '100%',
dataLabels: {
enabled: true, distance: -20, color: 'white',
formatter: function () {
return this.point.y;
}
}
// ,columns: { colorByPoint: true }
}
},
series: retJson.d.Series,
},
function (chart) { // on complete
var xpos = '50%';
var ypos = '30%';
var circleradius = 55;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: 'red',
}).add();
// Render the text
chart.renderer.text('<span style="color: white;font-weight:bold;">' + retJson.d.CenterText + '</span>', 80, 150).css({
width: circleradius * 2,
fontSize: '25px',
textAlign: 'center'
}).attr({
zIndex: 999
}).add();
chart.attr({ transform: "translate(200,40)" });
});

Set center, for example:
plotOptions: {
pie: {
borderColor: '#ffffff',
borderWidth: '4px',
innerSize: '60%',
size: '100%',
center: ['50%', '30%'], // set center
dataLabels: {
enabled: true, distance: -20, color: 'white',
formatter: function () {
return this.point.y;
}
}
// ,columns: { colorByPoint: true }
}
},

Set Colors of Different Points when Clicking on Pie Slice Legend

I would like to set all colors for the pie slices to gray except for the color pie slice clicked in the legend. I have been only able to figure out how to change the color of only the clicked legend item not the others.
I have tried setting id's to the data points and using e.target but that didn't provide the proper access.
Thanks for your help.
Here is my myFiddle.
$(document).ready(function () {
var myCharts = {
chart: {
renderTo: 'container',
type: 'pie',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
borderColor: 'rgba(255, 255, 255, 0.1)',
margin: [38, 20, 20, 20],
width: 300,
height: 300,
shadow: true,
},
colors: [
'#0066FF',
'#33CC33',
'#FF0000',
'#FFFF00',
],
credits: {
enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
x: 0,
y: 0
},
title: {
text: 'Net Activations',
verticalAlign: 'bottom',
y: 10
},
subtitle: {
text: '7%',
verticalAlign: 'middle',
y: 30,
style: {
color: 'black',
fontSize: '40px'
}
},
yAxis: {
tickColor: '#FF0000',
tickWidth: 3,
tickInterval: 5
},
xAxis: {
tickColor: '#FF0000',
tickWidth: 3,
tickInterval: 5
},
plotOptions: {
pie: {
states: {
hover: {
enabled: false
}
},
point: {
events: {
legendItemClick: function () {
this.graphic.attr({
fill: '#CCCCCC'
});
return false
}
}
},
dataLabels: {
enabled: true,
distance: 0.1,
color: 'black',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
},
},
innerSize: '60%',
shadow: true,
size: '100%',
allowPointSelect: true,
slicedOffset: 10,
}
},
tooltip: {
enabled: false
},
series: [{
data: [],
showInLegend: true,
}]
};
myCharts.chart.renderTo = 'container';
myCharts.title.text = 'Net Activations';
var actual = 52,
goal = 73 - actual,
ATB = 100 - goal - actual;
myCharts.series[0].data = [{
name: 'Actual',
y: actual,
id: 0
}, {
name: 'goal',
y: goal,
id: 1
}, {
name: 'ATB',
y: ATB,
id: 2
}];
new Highcharts.Chart(myCharts);
});

Instead of attacking the SVG directly with this.graphic.attr, you'd be better off using the API to update the slice. Point.update works well for this:
legendItemClick: function () {
var series = this.series;
for (var i=0; i < series.data.length; i++){
var point = series.data[i];
if (point == this){
// set back to old color
point.update({color: series.chart.options.colors[this.id]});
}else{
// make it gray
point.update({color: '#CCCCCC'});
}
}
return false;
}
Updated fiddle here.

Well, I can get you 50% of the way there:
point: {
events: {
click: function () {
if (event.point.sliced) {
$.each(this.series.data, function (i, e) {
if (!e.sliced) {
this.graphic.attr({
fill: '#CCCCCC'
});
}
});
}
}
}
This still breaks when you re-click the slice to slot it back in - the colors of the other slices are still grey until you click on them. Will need to look more into this.