Untitled
{ 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