Now I am trying to create a responsive, horizontal-only, bar-chart.
For this horizontal bar-chart, the HTML is slightly different, however, I am trying to use your CSS code for the Y-axis Title and Labels.
Unfortunately, my Title and Labels aren’t behaving.
Here is what I have so far…
<!DOCTYPE HTML>
<html lang="en">
<!-- ************************* HTML HEAD ********************************* -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<title>sp_bar-chart-horizontal_v03.html</title>
<!-- CSS STYLES -->
<style media="screen">
/**************************************************************************/
/* GENERIC */
/**************************************************************************/
*{
margin: 0;
padding: 0;
}
*,
*:before,
*:after{
box-sizing: border-box;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
line-height: 1.4em;
font-size: 0.9em;
color: #000;
}
/**************************************************************************/
/* DESKTOP */
/**************************************************************************/
/* FIGURE */
figure{
min-width: 200px;
max-width: 600px;
margin: 2rem;
padding: 1.5rem 2rem 2rem;
border: 1px solid #000;
}
/* TABLE */
.barChart_h{
display: block;
height: auto; /* Do I need this? */
width: 100%;
overflow-wrap: break-word;
border-spacing: 0;
}
/* CAPTION */
.barChart_h caption{
display: block;
padding: 0 0 1rem 0;
line-height: 1.1;
font-size: 1.1rem;
font-weight: bold;
text-align: left;
}
/* TBODY */
.barChart_h tbody{
display: block /* All HTML elements have a "display" value assigned by the User-Agent (UA).
Default-values assigned:
tbody ==> (display: table-row-group)
tr ==> (display: table-row)
td ==> (display: table-cell)
Assigning (display: block) allows us to turn a table into a horizontal display. */
}
.barChart_h tbody:after{ /* For IE9 and under, need to enclose floats... */
content: "";
display: block;
clear: both;
height: 0;
}
/* TH */
.barChart_h tbody th{
width: 25%;
font-weight: normal;
text-align: right;
}
/* TD */
.barChart_h tbody td{
border-left: 2px solid #F00; /* X-AXIS. (vertical) */
border-right: 1px solid #DDD; /* Finish out repeating vertical-gridlines. */
background-image: linear-gradient(to right, #DDD 1px, transparent 1px);
/* Create black-transparent gradient for 1px, then remainder of gradient is transparent.
This creates the illusion of a 1px vertical-line. */
background-size: 10% 100%; /* Go right in 10% increments. */
}
/* TH+TD */
.barChart_h tbody th,
.barChart_h tbody td{
padding: 0.5rem 0 0.4rem 0; /* Space around Bars. */
}
.barChart_h tbody tr.firstRow th,
.barChart_h tbody tr.firstRow td{
padding: 1rem 0 0.5rem 0; /* Add spacing. */
}
.barChart_h tbody tr.lastRow th,
.barChart_h tbody tr.lastRow td{
padding: 0.5rem 0 1rem 0; /* Add spacing. */
}
/* BARS */
.barChart_h tbody td span{
position: relative; /* Needed for absolute-positioning of Bar-value. */
display: block; /* Expands <span> to fill <td> */
height: 20px;
background: #99FFFF;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.3);
}
/* BAR-VALUES */
.barChart_h tbody td span b{
position: absolute;
left: 100%;
top: 0;
right: auto;
bottom: 0;
display: block;
padding: 0 0 0 0.5rem;
}
/* Y-AXIS TITLE+LABELS */
.barChart_h tbody th.y-axis{
display: block;
width: 100%;
/* width: calc(100% + 2px); /* Hide right border. /**/
display: flex; /* Create Flexbox (Flex-Container). */
padding-bottom: 1.4rem;
font-weight: bold;
border-bottom: 2px solid #F00; /* Y-AXIS. (horizontal) */
background-color: #FFF;
}
/* NEED HELP WITH STYLES BELOW... */
/* Y-AXIS TITLE */
.barChart_h tbody .rotate{
display: block;
}
/*
-ms-writing-mode: initial;
writing-mode: initial;
white-space: nowrap;
transform: none;
margin: 0;
line-height: normal;
font-size: 0.9rem;
}
/**/
/* Y-AXIS LABELS */
.barChart_h tbody th.y-axis ol.segments{
position: absolute;
top: auto;
bottom: 0;
right: 0;
left: 0;
display: flex; /* Create Flexbox (Flex-Container). */
flex-direction: row;
font-size: 0.9rem;
}
.barChart_h tbody ol.segments li{
flex: 1 0 0;
text-align: right;
}
.barChart_h tbody ol.segments li b{
display: inline-flex;
transform: translate(50%, 0%);
}
.barChart_h tbody ol.segments li.zero{
left: 0;
right: auto;
bottom: auto;
top: 0;
}
.barChart_h tbody ol.segments li.zero b{
transform: translate(-50%, 0%);
}
/**************************************************************************/
/* MOBILE */
/**************************************************************************/
@media screen and (max-width: 414px){
body{
font-size: 0.8em;
}
/* CAPTION */
.barChart_h caption{
font-size: 1rem;
}
/* FIGURE */
figure{
margin: 0;
padding: 1rem;
}
/* TD */
.barChart_h tbody td{
width: 60%;
}
}
</style>
</head>
<!-- ************************* HTML BODY ********************************* -->
<body>
<figure>
<table class="barChart_h">
<caption>Q1: My waiter provided good service tonight.</caption>
<tbody>
<!-- Y-axis -->
<tr>
<th class="blankCell"></th>
<th class="y-axis">
<div class="rotate">Responses</div>
<ol class="segments">
<li><b>100</b></li>
<li><b>80</b></li>
<li><b>60</b></li>
<li><b>40</b></li>
<li><b>20</b></li>
<li class="zero"><b>0</b></li>
</ol>
</th>
</tr>
<!-- Data Rows -->
<tr class="firstRow">
<th scope="row">Stongly Disagree:</th>
<td><span style="width:10%"><b>10</b></span></td>
</tr>
<tr>
<th scope="row">Disagree:</th>
<td><span style="width:30%"><b>30</b></span></td>
</tr>
<tr>
<th scope="row">Neither:</th>
<td><span style="width:20%"><b>20</b></span></td>
</tr>
<tr>
<th scope="row">Strongly Agree:</th>
<td><span style="width:70%"><b>70</b></span></td>
</tr>
<tr class="lastRow">
<th scope="row">Strongly Agree:</th>
<td><span style="width:40%"><b>40</b></span></td>
</tr>
</tbody>
</table>
</figure>
</body>
</html>
Not sue what I am doing wrong, but am hoping you can help me fix things.
Thanks!
