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 align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap

Delete a div when a button is clicked through JavaScript

I'm having an issue with a form I created that duplicates itself - I can't seem to get the 'x' button to remove the corresponding div as needed. I have placed both buttons outside of the div like this: <button type="button" id="cro ...

javascriptjqueryhtmlcss

Disable the default form input reset button generated by Internet Explorer 10

Just have one field form for search input. Below is the HTML code: <form class = "search-form hide-on-mobile"> <input class = "global" type = "text" placeholder = "Who are you looking for ?"> <but ...

htmlcssinternet-explorer-10

Struggling to eliminate the scrollbar on a Material UI Dialog

I have a modal window that includes a keyboard, but I'm encountering some issues. Despite adding overflow:'hidden' as inline CSS, the scrollbar refuses to disappear. Furthermore, even when utilizing container-full padding-0 in Bootstrap, th ...

javascriptcssreactjsmaterial-ui

Modify css with php instead of using FTP

As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...

phpcssftpfwrite

New and improved Bootstrap 5 menu bar

I am seeking to customize my navigation bar by adding a black background that spans its entire length. I do not want to rearrange the links or logo; just apply a background color. Another issue arises during SASS compilation: I am trying to change the col ...

htmlcssnavbarbootstrap-5

Pass various checkboxes data in an email using PHP and $_POST

I'm having trouble sending my checkbox values via my email form as it keeps returning as "None" every time. Any assistance would be greatly appreciated! Code snippet: <form method="post" name="sentMessage" id="contactForm" novalidate> ...

phphtmlpost

The resizing of the background image is contingent upon the size of the

I am facing an issue with my bootstrap carousel. One of the items only contains a background image without any content. I have set a height for it so that it is still visible even without content. However, when viewing on mobile devices, I can only see a p ...

jqueryhtmlcsstwitter-bootstrap

I am seeking advice on how to incorporate JavaScript to adjust slider values and add numerical values or prices. Any suggestions would

Seeking assistance with a unique project: I am currently developing a calculator that allows users to utilize sliders to select the best option for themselves across various categories. My experience with JavaScript is limited, so I decided to reach out h ...

javascripthtmlcssconstantsslider

jQuery struggles to process large response

I am currently developing an application that sends requests to a URL and parses the table found in the HTML response using jQuery. While this method works well for smaller amounts of HTML code, it runs into issues with larger datasets. The problem arises ...

javascripthtmljquery

eliminate the script and HTML comment from a designated division

Here is the default code that I need to modify using JavaScript to remove scripts, comments, and some text specifically from this div: I came across this script that removes all scripts, but I only want to remove specific ones from this div: $('scri ...

javascriptjqueryhtml

Aligning angular bootstrap modal window in the center vertically

Is there a way to vertically center a modal window on the screen, regardless of the size of the content being displayed? I'm currently using an image as a modal window in my page, and while I was able to align it horizontally, I'm struggling to g ...

cssangularjstwitter-bootstrapbootstrap-modalangular-bootstrap

Ways to display the main image on a blog post

This piece of code is designed for displaying the relevant post associated with wp_ai1ec_events function display_event($atts ) { global $wpdb; $event = $wpdb->get_results("SELECT * FROM wp_ai1ec_events ORDER BY start"); ...

phphtmlcsswordpress

Tips for showcasing the currently active item in a Bootstrap dropdown menu using jQuery

I am trying to highlight the menu item that is selected in a drop-down menu. I attempted the following code, which works if I prevent the default behavior of the link element, but I do not want to do that. So I tried using local storage instead, but it d ...

javascriptjqueryhtmlcsstwitter-bootstrap

Content within this specific div should move in a marquee fashion

#player #title{ left: 90px; width: 200px; overflow: hidden; } Within this specific div (#Title), the text should scroll like a marquee. The challenge is to achieve this effect using only JavaScript without altering the HTML structure. How can this be acco ...

css

Adjust the alignment of the text to match the orientation of the image

When creating a layout with text and an image, I want them to be contained within a parent element that has a specified height, such as 100px. The text should adjust to the content, whether it's a short phrase or a lengthy paragraph, without a fixed ...

htmlcss

Tips for incorporating images as radio buttons

Can anyone assist me in setting up a straightforward enabled/disabled radio button grouping on my form? My idea is to utilize an image of a check mark for the enabled option and an X for disabled. I would like the unselected element to appear grayed out ...

javascriptcsshtml

Create a border that does not inherit the opacity of the object

Check out this jsBin for reference: http://jsbin.com/uyonux/1 The hover state is working fine, but the focus state is not. I want the blue color to remain solid #13A3F7 without inheriting the opacity of .4. Is there a way to achieve this without the elem ...

csscolors

Utilize MaterialUI Grid to define custom styles for the ::after pseudo-element

I came across a helpful article on Stack Overflow about Flex-box and how to align the last row to the grid. I'm interested in implementing it in my project: .grid::after { content: ""; flex: auto; } However, I'm not sure how to inc ...

javascriptcssmaterial-ui

What is the best method for utilizing an autocomplete plugin to update a div element?

I am seeking assistance regarding implementing an autocomplete feature in a DIV that displays the names, images and ages of other users as they are typed into a field positioned above the DIV. I want this autocomplete functionality to mimic Facebook' ...

htmlajaxjquery-uijquery