Untitled
unknown
plain_text
5 months ago
13 kB
2
Indexable
{
chart: {
reflow: true,
height: 350,
backgroundColor: "transparent",
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: "pie",
marginBottom: 98,
marginLeft: -98,
animation: false,
events: {
load: function() {
var chart = this,
legend = chart.legend;
title = chart.title;
chartHeight = chart.chartHeight;
screenWidth = window.innerWidth;
console.log("screenwidth" + screenWidth);
console.log('Title Text:', titleText);
if (screenWidth == 1112){
legend.update({
verticalAlign:"bottom",
layout: 'horizontal',
width: 200,
x: -85,
y: -10,
});
chart.update({
chart: {
marginBottom:65,
}
});
title.update({
y: 30,
} );
}
else if (screenWidth >= 360 && screenWidth <= 450) {
title.update({
y: 10,
x: -40,
} );
}
else if (screenWidth == 1024){
legend.update({
//y: 60,
x: -12,
});
}
else if (screenWidth >= 1250 && screenWidth <= 2800){
title.update({
y: 60,
x: -33,
} );
legend.update({
y: 95,
x: -10,
width: 122,
itemWidth: 195,
itemStyle: {
fontSize: '18px',
}
});
chart.update({
chart: {
marginBottom: -1,
marginLeft: -85,
},
plotOptions: {
pie: {
size: 304 // Set the pie size here
}
}
});
}
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
function hovOn() {
chart.update({
title: {
text: null
}
});
chart.tooltip.refresh(chart.series[0].points[i]);
}
function hovOff() {
chart.tooltip.hide(0);
chart.update({
title: {
text: `<div style="display: flex; flex-direction: column; gap: 5px;"><span style="font-size: 40px; font-weight: 500;">~70%</span><div style="display: flex; flex-direction: column; font-family: Guardian TextSans Web,sans-serif; font-size: 21px; line-height: 18px;font-weight: 500;"><span>South & West<span/></div></div>`,
}
});
}
var item = legend.allItems[i].legendItem;
item.on('mouseover', function(e) {
//show custom tooltip here
hovOn()
}).on('mouseout', function(e) {
//show first slice tooltip on mouse out
hovOff()
});
var item2 = legend.allItems[i].legendSymbol;
item2.on('mouseover', function(e) {
//show custom tooltip here
hovOn()
}).on('mouseout', function(e) {
//show first slice tooltip on mouse out
hovOff()
});
})(i);
}
},
}
},
title: {
useHTML: true,
text: `<div style="display: flex; flex-direction: column; gap: 5px;"><span style="font-size: 40px; font-weight: 500;">~70%</span><div style="display: flex; flex-direction: column; font-family: Guardian TextSans Web,sans-serif; font-size: 21px; line-height: 18px;font-weight: 500;"><span>South & West<span/></div></div>`,
verticalAlign: 'middle',
y: 15,
x: -60,
style: {
fontSize: '55px',
fontFamily: 'Sanomat Web',
}
},
yAxis: {
},
plotOptions: {
pie: {
shadow: false,
innerSize: '75%',
borderWidth: 0,
size: 210
},
series: {
stickyTracking: false,
events: {
mouseOut: function() {
this.chart.update({
title: {
text: `<div style="display: flex; flex-direction: column; gap: 5px;"><span style="font-size: 40px; font-weight: 500;">~70%</span><div style="display: flex; flex-direction: column; font-family: Guardian TextSans Web,sans-serif; font-size: 21px; line-height: 18px;font-weight: 500;"><span>South & West<span/></div></div>`,
}
});
},
mouseOver: function() {
this.chart.update({
title: {
text: null
}
});
}
},
point: {
events: {
//disable click
legendItemClick: function() {
return false;
}
}
}
}
},
tooltip: {
enabled: true,
useHTML: true,
borderWidth: 0,
backgroundColor: 'none',
headerFormat: '',
shadow: false,
hideDelay: 0, //keeps tooltip displaying in middle
delayForDisplay: 0, //keeps tooltip displaying in middle
style: {
fontSize: '55px',
textAlign: 'left',
color: '#000',
fontWeight: '400',
fontFamily: 'Sanomat Web',
},
formatter: function() {
var widthG = this.series.chart.plotSizeY
screenWidth = window.innerWidth;
if(screenWidth >= 1240){
return `<div style="width:calc(${widthG}px - 150px );margin-left:40px;white-space: normal;"><span style="font-size: 40px; font-weight: 500;">${this.y}%</span><br><div style="font-size: 21px; line-height: 18px; font-family: Guardian TextSans Web,sans-serif;">${this.point.name}</div></div>`
}
else { return `<div style="width:calc(${widthG}px - 150px );margin-left:40px;white-space: normal;"><span style="font-size: 0.5em; font-weight: 500;">${this.y}%</span><br><div style="font-size: 15px; line-height: 18px; font-family: Guardian TextSans Web,sans-serif;">${this.point.name}</div></div>` }
},
positioner: function(labelWidth, labelHeight) {
screenWidth = window.innerWidth;
if (screenWidth == 1112) {
return {
x: (this.chart.plotWidth - labelWidth - 100) / 2.6,
y: (this.chart.plotHeight - labelHeight + 5 ) - 280 / 2.8
};
} else if (screenWidth == 1024) {
return {
x: (this.chart.plotWidth - labelWidth - 150) / 2.5,
y: (this.chart.plotHeight - labelHeight - 5) / 2
};
}else if (screenWidth >= 360 && screenWidth <= 450) {
return {
x: (this.chart.plotWidth - labelWidth - 155) / 2.5,
y: (this.chart.plotHeight - labelHeight - 1) / 2
};
}else {
return {
x: (this.chart.plotWidth - labelWidth - 65) / 2,
y: (this.chart.plotHeight - labelHeight + 5 ) - 260 / 2
};
}
}
},
legend: {
floating: true,
enabled: true,
layout: 'vertical',
verticalAlign: 'top',
align: "right",
y: 72,
x: 23,
width: 122,
itemWidth: 95,
symbolHeight: 18,
symbolWidth: 24,
symbolRadius: 0,
squareSymbol: false,
itemDistance: 2,
itemStyle: {
color: '#000',
fontSize: '10px',
fontWeight: '400',
textOverflow: 'wrap',
},
itemHoverStyle: {
color: '#707070'
},
labelFormat: '{name} <span style="font-weight:550;">{y:.0f}%</span>',
itemMarginTop: 5,
itemMarginBottom: 5,
},
series: [{
data: [
["South", 38],
["West", 30],
["East", 19],
["Midwest", 9],
["Non-U.S.", 4],
],
showInLegend: true,
dataLabels: {
enabled: false
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 330
},
chartOptions: {
chart: {
height: 350,
marginLeft: 13,
marginTop:-65
},
title: {
y: 20,
x: 0,
},
legend: {
floating: false,
enabled: true,
layout: 'horizontal',
align: "center",
verticalAlign:"bottom",
y: -12,
x:30,
width: 340,
itemWidth: 160,
symbolHeight: 18,
symbolWidth: 24,
symbolRadius: 0,
squareSymbol: false,
itemDistance: 1,
itemMarginBottom: 5,
itemStyle: {
fontSize: '10px',
},
},
tooltip: {
formatter: function() {
var width = this.series.chart.plotSizeY
return `<div style="width:calc(${width}px/3.5 );margin-left:30px;white-space: normal;"><span style="font-size:.5em; font-weight: 500;">${this.y}%</span><br><div style="font-size:15px; line-height: 18px; font-family: Guardian TextSans Web,sans-serif;">${this.point.name}</div></div>`
},
positioner: function(labelWidth, labelHeight) {
return {
x: (this.chart.plotWidth - labelWidth + 60) / 2.5,
y: (this.chart.plotHeight - labelHeight - 150) / 2
};
}
}
}
},
{
condition: {
maxWidth: 270
},
chartOptions: {
legend: {
floating: false,
enabled: true,
layout: 'horizontal',
align: "center",
verticalAlign:"bottom",
y: -25,
x:55,
width: 320,
itemWidth: 125,
symbolHeight: 18,
symbolWidth: 24,
symbolRadius: 0,
squareSymbol: false,
itemDistance: 1,
itemMarginBottom: 5,
itemStyle: {
fontSize: '9px',
},
},
}
},
{
condition: {
minWidth: 600,
maxWidth: 650
},
chartOptions: {
legend: {
y: 35,
x: -105,
itemStyle: {
fontSize: '12px',
},
},
}
},
{
condition: {
minWidth: 700,
maxWidth: 800
},
chartOptions: {
legend: {
y: 73,
x: -125,
itemStyle: {
fontSize: '12px',
},
},
tooltip: {
formatter: function() {
var width = this.series.chart.plotSizeY
return `<div style="width:calc(${width}px/3.5 );margin-left:30px;white-space: normal;"><span style="font-size:.5em; font-weight: 500;">${this.y}%</span><br><div style="font-size:15px; line-height: 18px; font-family: Guardian TextSans Web,sans-serif;">${this.point.name}</div></div>`
},
positioner: function(labelWidth, labelHeight) {
return {
x: (this.chart.plotWidth - labelWidth - 70) / 2.5,
y: (this.chart.plotHeight - labelHeight - 5) / 2
};
}
}
}
}
]
},
} Leave a Comment