Transferring Chart Div Titles Above Bars

Is there a way to adjust the layout of an HTML bar chart so that the names or labels appear outside of the bars, tagged to the left end?

<!DOCTYPE html>
<style>

.chart div {
  font: 10px Ubuntu;
  background-color: white;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: black;
  float: right;
  clear:both;
}

</style>
<div class="chart">
<div style="width:0px;">Inwood 10</div>
<div style="width:3px;">Washington Heights 111</div>
<div style="width:7px;">Hamilton Heights 230</div>
<div style="width:10px;">Chinatown 314</div>
<div style="width:10px;">East Harlem 346</div>
<div style="width:16px;">Harlem 514</div>
<div style="width:18px;">Morningside Heights 590</div>
<div style="width:24px;">Battery Park 804</div>
<div style="width:25px;">Little Italy 814</div>
<div style="width:25px;">Yorkville 841</div>
<div style="width:33px;">North Sutton Area 1088</div>
<div style="width:37px;">Carnegie Hill 1228</div>
<div style="width:47px;">Tribeca 1544</div>
<div style="width:50px;">Central Park 1654</div>
<div style="width:51px;">Financial District 1684</div>
<div style="width:62px;">Lower East Side 2050</div>
<div style="width:64px;">Soho 2112</div>
<div style="width:71px;">West Village 2333</div>
<div style="width:89px;">Murray Hill 2932</div>
<div style="width:110px;">East Village 3642</div>
<div style="width:117px;">Clinton 3873</div>
<div style="width:137px;">Greenwich Village 4511</div>
<div style="width:140px;">Garment District 4614</div>
<div style="width:189px;">Chelsea 6225</div>
<div style="width:229px;">Gramercy 7568</div>
<div style="width:297px;">Upper West Side 9808</div>
<div style="width:428px;">Upper East Side 14113</div>
<div style="width:439px;">Midtown 14490</div>


</div>

View current appearance here

Desired visual outcome

htmlcss

Answer №1

A possible solution could be placing the text inside a separate <"div"> and using the float property to align it to the left of the bar. This is just my suggestion as I am still learning in this field. Hopefully, this information proves useful to you.

Answer №2

It is not possible to relocate the text outside of its designated element. The recommended approach would be to create distinct elements (such as divs) for both the label and the bar itself. The bar's div could then be nested within the label's div. You can structure it like this:

<div>
  Label
  <div style="width:123px"></div>
</div>

Answer №3

If you're looking for a way to make it work, I have a sample that might help. While I'm not a CSS expert, this code snippet could be a good starting point. Try running it to see the outcome.

.chart div {
  font: 10px Ubuntu;
  background-color: red;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: black;
  white-space: nowrap;
  position: relative;
  float: right;
  clear: both;
}
.chart div span {
  position: absolute;
  right: 15px;
}
<!DOCTYPE html>
<div class="chart">
  <div style="width:0px;"><span>Inwood</span> 10</div>
  <div style="width:3px;"><span>Washington Heights</span> 111</div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The values are not being displayed in the local storage checkbox

I attempted to transfer checkbox values to another HTML page using local storage, however they were not appearing on the other page Here is my page1 HTML code snippet: <input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW"> ...

javascripthtmlcss

I'm facing challenges with setting auto heights on CSS and aligning floating divs

I'm trying to create a simple tiled list with six smaller divs inside a main div, all set to float:left. However, this is causing issues with the auto height and it doesn't seem to work properly within the div. Can anyone help me fix my code or s ...

csshtml

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...

javascripthtmlcss

Issues with CSS not being applied when the page content exceeds the viewport

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Unique Title</title> <style> #div1 { posit ...

htmlcss

Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...

jqueryhtmlcssanimationeffects

Let us know when the information on a different tab is updated

I have multiple tabs and I want to indicate when a change occurs on another tab that the user hasn't clicked. For example, if the user hits the run button while on the Data pane, I would like the Errors tab to change to red to show that there was a ch ...

javascriptcss

The background image does not appear to be displaying correctly on GitHub pages

I've encountered an issue where my svgs are not displaying as background-image or background on GitHub pages, even though they work fine locally. I utilized sass as a preprocessor for css, in case that detail is helpful. If anyone has insights on how ...

csssassgithub-pages

Using Selenium's findElement method along with By.cssSelector to locate elements with multiple classes

I'm a beginner with selenium. Can someone explain how to locate an element that has multiple classes and values? <div class="md-tile-text--primary md-text">Getting Started</div> using the findElement method By .css Selector. ...

cssselenium-webdriver

How can I dynamically adjust the font size of content in a React Material-UI Button when it's unexpectedly

In my web application project, I have created multiple choice questions where each answer is displayed within a single button: <Button fullWidth={true} variant="contained" onClick={(answer) => this.handleAnswer(this.state.answers[0].tex ...

htmlcssreactjsfrontendmaterial-ui

What can I do to prevent my website's font from getting distorted due to the recommended display settings?

I've noticed that newer laptops typically have a display font-size recommendation of 150%, which is causing issues with viewing my webpage correctly. The items appear larger and stretched out on their screens. Is there a way to ensure that users can ...

htmlcsswidth

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

Verify the checkbox for validation is shown exclusively

I am currently facing an issue with a form that includes a checkbox, which is only displayed under certain conditions. I want to ensure that the checkbox is checked only when it is visible, and if not, the form should be submitted upon clicking the submit ...

javascripthtmlcheckbox

Is there a way to allow users to edit all the input fields within the td elements when they click the edit button for a specific row?

I am completely new to web dev and I'm struggling with what should be a simple task. My goal is to enable editing of all inputs in a table row when the edit link is clicked. Since I am not using jQuery, I prefer a pure JavaScript solution if possible. ...

javascripthtmlnode.jsexpressejs

The parameter type 'Event' cannot be assigned to the argument type

edit-category-component.html: <custom-form-category *ngIf="model" [model]="model" (onSaveChanges)="handleChanges($event)"></custom-form-category> <mat-loader *ngIf="!model"></mat-loader> edi ...

htmlangulartypescriptforms

"Why is it that only one of the two similar spans with onclick event is not functioning properly

Encountering a perplexing issue that has me stumped. Here's the code in question: js: function Test() { alert("test"); } html: <span id='bla' onclick='Test()'> Click me </span> <hr> <span id='bla2& ...

javascripthtmlonclick

How can I match dates in order to run the following code?

If Purchase Date is after 31/Mar/xxxx it should not calculate elap_yend, rem_days, depre_cur, cur_wdv. Also I have to calculate GST with some options that is if SGST and CGST are chosen, I should not calculate IGST else if IGST selected or marked it shoul ...

javascriptjqueryhtmlajax

Accessing a JSON value in SCSS for localization

I have a JSON file containing all the values that I want to use for internalization in my app. On the HTML side, I am able to retrieve the values, but on the CSS side, I am using a "before" pseudo-element. In my HTML, I am using the class "menu-input" li ...

cssangular

Scroll bars on JQuery UI dialog

When using the jquery UI Dialog modal, everything appears correctly in Firefox and Chrome. However, in IE8, scroll bars suddenly appear. Is there a way to remove them? ...

htmlcssjquery-uidialog

I am curious about how to implement overflow:hidden along with position:sticky in React.js

My attempt to address the white space issue caused by a navbar I created led me to try using overflow:hidden. The navbar is generated using the Header component, and I desired for it to have a position: sticky attribute. However, I realized that I cannot ...

javascripthtmlcssreactjsstyling

What is the trick to getting the <label> and <input> elements to show up side by side in an HTML form?

I am designing a registration form for a new website. My goal is to have each label and its corresponding input element displayed on the same line. Here's the CSS code I'm using: #registration-form { background-color: #FFF; height: 600px; ...

htmlcssforms