D3.js: Difficulty fitting the chart within my bootstrap div

Currently, I'm encountering a problem where the "card" component from Bootstrap is not adjusting responsively with my d3.chart. The screenshot below displays the outcome:

https://i.sstatic.net/2MhBx.png

Chart Code

const sample = [
  {
    language: 'Rust',
    value: 78.9,
    color: '#000000'
  },
  {
    language: 'Kotlin',
    value: 75.1,
    color: '#00a2ee'
  },
  ...
  // Truncated for brevity
  ...
  {
    language: 'Source: Stack Overflow, 2018'
  }

While experimenting with other "card" elements in Bootstrap filled with Lorem Ipsum text, they appeared to be functioning correctly. However, when incorporating my chart within the

javascripthtmlcssd3.jsbootstrap-4

Answer №1

To display the graph properly, ensure you specify a minimum height using min-height for the graph and set the overflow property to be visible for the svg element.

  const data = [
    {
      language: 'Rust',
      value: 78.9,
      color: '#000000'
    },
    {
      language: 'Kotlin',
      value: 75.1,
      color: '#00a2ee'
    },
    // more data entries here...
  ];
#container {
    min-height: 37rem;
}

#container svg {
    overflow: visible;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
    <div class="col-12">
        <div class="card shadow mb-5">
            <h5 class="card-header">
                Bar Chart
            </h5>
            <div class="card-body">
                <div id="container">
                    <svg></svg>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>

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

When attempting to execute the delete script, some errors were encountered

The following error has occurred: An issue with the SQL syntax has been detected; please refer to the manual specific to your MySQL server version for guidance on the correct syntax to use near ''sarojini'_bookings WHERE date=2014-07-24 A ...

phphtml

How to locate the data-id of the next element in a jQuery list

Is it possible to retrieve the data-id of the following list element when clicking a button while on the current active list item? <div class="nbrs"> <ul> <li id="item1" data-id="1" class="active ...

javascriptjquery

What is the best way to determine the quantity of elements received from an ajax request?

Here's the method I am currently using to count the number of li elements returned from an AJAX call: $.post('@Url.Action("actionName", "controller")', function (data) { $('#notificationCounter').html($(data).find('li&a ...

javascriptjqueryajax

Loop through the ng-repeat scope object in AngularJS

Is it possible to create rows of 3 using bootstrap and ng-repeat with data from a scope object without the loop repeating every three times due to ng-if? I am curious if something like <h4> {{yogurt[$index+1].name}} </h4> would work. Below is ...

javascriptangularjstwitter-bootstrap

Python Flask login application failing to redirect to login page

Currently, I'm building a login application with Python Flask and MongoDB integration at the backend. While everything else seems to be running smoothly, there's an issue with redirecting to the login page upon login. # See below for my code @ap ...

pythonhtmlmongodb

Exploring the font variables in the asset pipeline of Rails 7

Creating a habit of defining a set of root variables is crucial for maintaining consistency throughout an application. :root { --main-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; --kbd-font-family: Consolas, "Libe ...

cssruby-on-railsasset-pipeline

Webpack configuration for asynchronous loading

I'm having trouble making this work. Can someone please assist? :) (According to the documentation, webpack is capable of handling Promises) Here is what works for me: var compiler = webpack(webpackConfig) However, when I try using a promise, I en ...

javascriptnode.jsasynchronouswebpack

Discover the process of selecting an item from a list and viewing it on a separate page with the help of AngularJS and Ionic technology

I am struggling with creating a list of items that, when clicked, should take me to the corresponding post. Despite trying to use ng-click in the header, I suspect there is an issue with the route not functioning properly. As part of my testing process, I ...

javascriptangularjsionic-framework

Multer's re.file function is returning an undefined value

I am seeking assistance with my coding project. I have a setup that uses React on the front end, Node.js on the backend, and MySQL as the database. The issue I am facing is related to file transfer using Multer in Node.js. When trying to transfer files, Mu ...

javascriptnode.jsreactjsexpressmulter

Unable to change the filename when utilizing Angular.js ng-file-upload

After uploading a file using Angular.js ng-file-upload, I am attempting to rename the file. However, when I remove the properties ngf-min-height="400" ngf-resize="{width: 400, height:400}", I encounter an issue. Below is my code: <input type="file" dat ...

javascriptangularjsng-file-upload

Troubleshooting: How to Fix Missing Sum Display in HTML Input Fields

I am new to the world of website programming and I am currently working on creating a basic sum equation using two input fields from the client-side. <!DOCTYPE html> <html> <head> </head> ...

javascripthtmlinputalerthtml-input

What strategies can be used to steer clear of overhyped products after adjusting state?

I have a function that retrieves data from Firebase. After getting the data, I want to set it into a state. So, I create an array and push all the data into it. Then, I update my state with this array. However, when I log or render this state, I encounter ...

javascriptreactjsfirebase-realtime-database

Despite providing the correct token with Bearer, Vue 3 is still experiencing authorization issues

I am working on a project that involves Vue 3 with a Node Express back-end server and Firebase integration. On the backend server, I have implemented the following middleware: const getAuthToken = (req, _, next) => { if ( req.headers.authori ...

javascriptnode.jsexpressvue.jstoken

Transform JSON data into an HTML layout

I'm looking to design a structure that showcases JSON information using HTML div elements. For example, utilizing the h4 tag for headers, p tag for text descriptions, and img tag for images. Can anyone provide guidance on the most efficient approach ...

javascriptjqueryhtmljson

Creating a pattern for values ranging from 18 to 99, including leading zeros, using regular expressions

Looking for a Regular Expression that matches numbers from 018 to 099, inclusive. The numbers must range between 18 and 99, and include a leading zero for values less than 100. ...

javascriptangularjsregexng-pattern

How jQuery stops the submission of a form

Sample HTML Code <p><select name="status" class="form-control" id="showThisItem"> <option value=""> Select Status </option> <option value="Paid"> Paid </option> <option value="Unpa ...

javascriptjqueryhtmlcss

VueJS component fails to properly sanitize the readme file, as discovered by Marked

Could someone explain why the output from the compiledMarkdown function is not sanitized, resulting in unstyled content from the markdown file? <template> <div style="padding:35px;"> <div v-html="compiledMarkdown" ...

javascripttypescriptvue.js

Can you explain the significance of the <%= %> HTML tag?

I've recently been tackling a project with Webpack. For those not familiar, Webpack is a bundler that combines all your files into one final product. One task I encountered was trying to insert one HTML file into another, similar to an import or requ ...

javascripthtmlwebpacktags

transferring data from JavaScript to PHP variables

Currently, I am working on a project that involves using ajax to access the database asynchronously. The value retrieved is stored in a JavaScript variable like this: var content=xmlhttp.responseText; My next step is to pass this value to the PHP module ...

phpjavascriptajax

Troubleshooting script error: Dealing with Ineffective Redirects

I am currently using a JavaScript code that allows users to jump to a directory by typing its name. Here is how it functions: If the input field is left empty, the user will be directed to a page called "error.html" which displays the message "This field ...

javascriptajax