Untitled

mail@pastecode.io avatar
unknown
plain_text
14 days ago
13 kB
2
Indexable
Never
{
    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