Hover Over Pie Chart Segments (pure CSS)

» html » Hover Over Pie Chart Segments (pure CSS)

By : user3042490

Date : November 28 2020, 12:01 PM

I hope this helps you . I am creating a pie chart using pure HTML and CSS. I want to change the color of the background of each pie chart segment/slice when hovered over using pure CSS. Pure Javascript solutions are acceptable, but not desired. Can I use the hover pseudoclass for this? , I changed color on id basis for each slice.

code :

.pieContainer {
  height: 150px;
  position: relative;
}

.pieBackground {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}

.pie {
  transition: all 1s;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 75px, 150px, 0px);
}

.hold {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 150px, 150px, 75px);
}

    #pieSlice1 .pie {
  background-color: #1b458b;
  transform:rotate(120deg);
}

#pieSlice2 {
  transform: rotate(120deg);
}

#pieSlice2 .pie {
  background-color: #0a0;
  transform: rotate(120deg);
}

#pieSlice3 {
  transform: rotate(240deg);
}

#pieSlice3 .pie {
  background-color: #f80;
  transform: rotate(60deg);
}
#pieSlice1 .pie:hover{
  background-color: red;
}
#pieSlice2 .pie:hover{
  background-color: yellow;
}
#pieSlice3 .pie:hover{
  background-color: purple;
}

<div class="pieContainer">
  <div class="pieBackground"></div>
  <div id="pieSlice1" class="hold"><div class="pie"></div></div>
  <div id="pieSlice2" class="hold"><div class="pie"></div></div>
  <div id="pieSlice3" class="hold"><div class="pie"></div></div>
</div>

Share :

Styling a segments chart

By : Xiddi Munnoo

Date : March 29 2020, 07:55 AM

it should still fix some issue I am essentially replicating this code from UPenn and want to add some styling to the segments, specifically I want to have different colors for whether the slope of the line is positive is negative. Other styling suggestions are welcome. , If you want to change the color of the line, set the col= property.

code :

arrows(rep(1,10),a,rep(2,10),b,code = 1, col=ifelse(a>b,"blue","orange"))

Divide image into segments to change them with css on hover

By : DoZ10

Date : March 29 2020, 07:55 AM

around this issue I have an image like this, divided into 4 segments. I want to be able to change the blur of each segment on hover. For example: , Something like this, perhaps:

code :

.x { opacity:0; }
.x:hover { opacity:1; }

<svg width="400" height="300" viewBox="0 0 800 600">
  <defs>
    <filter id="blur">
       <feGaussianBlur stdDeviation="8"/>
    </filter>
    <image href="https://i.stack.imgur.com/DkIzu.jpg"
           width="800" height="600" id="img"/>
    <clipPath id="c1">
      <path d="M0 0h400v300h-400z"/>
    </clipPath>
    <clipPath id="c2">
      <path d="M400 0h400v300h-400z"/>
    </clipPath>
    <clipPath id="c3">
      <path d="M0 300h400v300h-400z"/>
    </clipPath>
    <clipPath id="c4">
      <path d="M400 300h400v300h-400z"/>
    </clipPath>
  </defs>
  <use xlink:href="#img"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c1)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c2)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c3)" class="x"/>
  <use xlink:href="#img" filter="url(#blur)"
       clip-path="url(#c4)" class="x"/>
</svg>

R Pie Chart with only top three segments

By : MAzCastro

Date : March 29 2020, 07:55 AM

this one helps. There is no need to delete these rows from your dataframe, you could just run your ggplot commands over a subset of your data. BTW, I think you mean some OS could have a share under 1%, not under 0%? Also, please do not name a data.frame "data", because it could mess up some functions from the utils package. Better to use df for example.
I think you can try this:

code :

library(ggplot2)
library(scales)

df <- read.table(text = 'operatingSystem  sessionsPercent
             Android          0.620
             iOS              0.360
             Windows          0.010
             Blackberry       0.001', header = TRUE)

p <- ggplot(df[df$sessionsPercent %in% head(df$sessionsPercent, 3),], aes(x="", y=sessionsPercent, fill = operatingSystem)) 

p + geom_bar(width = 1, stat = "identity") +
  geom_text(aes(label = percent(head(df$sessionsPercent, 3))), position = position_stack(vjust = 0.5), color = "white", size = 8) +
  coord_polar(theta="y", direction = -1) +
  theme_void()

AJAX/PHP - Upload a large file in segments in pure javascript

By : user2627308

Date : March 29 2020, 07:55 AM

may help you . I'm trying to let users upload huge files ~1GB using PHP and HTML/JS. I know from past experiences that uploading files ~10mb also causes PHP to refuse the request. , I forgot that I had to use

code :

xhttp.setRequestHeader('Content-Type', 'application/octet-stream');

<?php
file_put_contents(time()+rand(), file_get_contents("php://input"));
?>

Gap between segments in an SVG doughnut chart

By : Jay Howarth

Date : September 27 2020, 08:00 AM

hop of those help? The solution could be this:
Below is a full gray circle Above the gray circle is the purple circle sector

code :

 <circle id="income" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" 
             stroke="#4E0E7C"  stroke-width="5" stroke-dasharray=" 25 0  0 75 " stroke-dashoffset="25">
 </circle>

 <mask id="msk1"> 
       <rect width="100%" height="100%" fill="white"/>
         <polyline points="21,0 21, 21" fill="black" stroke="black" stroke-width="1"  />
          <polyline points="21, 21 42 21" fill="black" stroke="black" stroke-width="1"  />
 </mask>

<style>
.dashboard-balance {
    width: 350px;
    height: 400px;
    box-sizing: border-box;
}

.chart-text {
    font-family: sans-serif;
    fill: #000;
    transform: translateY(0.25em);
}

.chart-number {
    font-size: 0.15em;
    line-height: 1;
    text-anchor: middle;
    transform: translateY(-0.25em);
}

.chart-label {
    font-size: 0.15em;
    font-weight: bold;
    text-transform: uppercase;
    text-anchor: middle;
    transform: translateY(0.7em);
}
</style>
<div class="dashboard-balance">
  <figure>
    <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
      <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle> 
    
 <defs>
	 <mask id="msk1"> 
	   <rect width="100%" height="100%" fill="white"/>
	     <polyline points="21,0 21, 21" fill="black" stroke="black" stroke-width="1"  />
	      <polyline points="21, 21 42 21" fill="black" stroke="black" stroke-width="1"  />
     </mask> 
</defs>	
   
	<g mask="url(#msk1)">
      <circle id="expense" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent"
     	  stroke="#ebebeb" stroke-width="5" >
	  </circle>  
	     <circle id="income" class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" 
		     stroke="#4E0E7C"  stroke-width="5" stroke-dasharray=" 25 0  0 75 " stroke-dashoffset="25">
		 </circle> 
	</g>  
	  
	  
     
	  <g class="chart-text">
        <text x="50%" y="50%" class="chart-number">250.00</text>
        <text x="50%" y="50%" class="chart-label">Balance</text>
      </g>
    </svg>
  </figure>
</div>