ChartJS Chart failing to adjust size

I am working on a software project that includes a chart with two x-axes and one y-axis. However, I am looking to reduce the size of the chart.

Although I attempted to adjust the width and height using "width: 50px" and "height: 50px", the resizing did not take effect. Additionally, I tried adding "responsive: true" to the chart settings, but that also proved unsuccessful. Is there a solution available for this issue?

Here is the current code in use:

JavaScript:

const data = { ... }

HTML:

<canvas id="chart"></canvas>

CSS:

#chart {
    background: black;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 50px;
    width: 20px;
    height: 20px;
}
javascripthtmlcsschartschart.js

Answer №1

To enhance your css styling, it is recommended to modify the width and height attributes to max-width and max-height.

I personally tested this code and it worked perfectly fine for me.

#chart {
        background: black;
        padding: 20px;
        border-radius: 30px;
        margin-bottom: 50px;
        max-width: 1000px; // Adjusted to resize
        max-height: 500px;
    }

Moreover, I incorporated the following javascript code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js'></script>

Feel free to check out the demo for reference!

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

How to use Angular ng-repeat to filter an array by a specific key

Here is the data I am working with: $scope.allNames = [ "A": [ { "name": "a1" }, { "name": "a2" }, { "name": "a3"} ], "B": [ { "name": "b1" }, { "name": "b2" }, { "name": "b3"} ], "C": [ { "name": "c1" }, { "name": "c2" }, { "name": "c3"} ], ...

javascriptangularjsangularjs-ng-repeat

Avoiding unauthorized access to folders

Is there a way to redirect users from accessing a specific folder, such as images, by typing in the URL directly? For instance, if someone enters www.example.com/images, how can I set up an index.php file in that folder to display a message like "Sorry, ...

phphtmldirectory

"Using Node.js to create a simulated mobile environment: a step-by-step guide

I am seeking a way to replicate the functionalities of a mobile browser using Node.js. This means that all mobile browser features should be accessible on the client-side, even if they are simulated. The goal is for webpages to believe they are being load ...

javascriptnode.jsmobile

Where should constants be kept in Nuxt.js?

What is the ideal location for storing constants? I want to save key-value pairs to quickly swap IDs with corresponding names. For example: const roleNames = { 1: 'Admin', 2: 'Moderator' 3: 'User' } Would using vuex ...

javascriptvue.jsconstantsnuxt.js

Obtaining specific Google Image Search results depending on certain criteria

I am working on a project to create a web application that can suggest outfits based on the weather of a specific location. Here is where I am at with the project so far: https://codepen.io/anchpags/pen/bMpjxX <html> <head> <link rel=" ...

javascripthtmlcssapigoogle-custom-search

How to make an Ajax request in Osclass classified script using a PHP file located in the theme directory?

Currently, I am utilizing the Osclass classified script and attempting to display a message that is returned by an ajax call. Within my theme folder, there is a file called ajax-test.php with the following content: <?php $name = $_GET["name"]; echo "My ...

javascriptphpajaxosclass

Execute code after the directive has finished loading

Currently, I am facing an issue with a function that handles resizing after a directive is loaded. The function always runs before the content in the directive is fully loaded, causing it not to resize properly. Here is a snippet of the code I am working ...

javascriptjqueryhtmlangularjs

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

html

$q, postponement, and fractional deployment

I can't figure out why this code isn't functioning as anticipated: func = -> deferObj = $q.defer() $timeout -> deferObj.resolve({foo:'bar'}) ,1000 return deferObj.promise showData = (data)-> console.l ...

javascriptangularjscoffeescript

I am looking for a way to utilize AngularJS to dynamically insert an input element into a form based on the condition of another input element within the same form

Currently working on creating a form within Angularjs. I am trying to dynamically adjust the number of options in a set of radio buttons based on the value selected in another set of radio buttons. While this is easily done with direct DOM manipulation, I& ...

javascriptangularjsangularjs-directive

I will see the "undefined" entity displayed in the bar chart created using react-chartjs

Using the react-chartjs-2 library, I created a bar chart with the following data: const chartData = { labels: ['Dealer1', 'Dealer2', 'Dealer3', 'Dealer4', 'Dealer5', 'Deal ...

javascriptreactjsspring-bootreact-chartjs-2

Struggling to create a search bar and dropdown menu that adapts to different

Currently, I'm working on creating an advanced search bar and came across this template here. Everything seems to be functioning properly except for the fact that the search bar and dropdown menu are not fully utilizing the entire width of 100%. I wou ...

htmlcssbootstrap-4

Is there a way to achieve the same functionality in Javascript without utilizing a for loop?

Is there a way to achieve the same result as this code snippet without utilizing a for loop? Currently unsure about which array method would be appropriate function duplicateElements(x){ var y = []; x.forEach(element =>{ y.push(element ...

javascriptarraysfor-loopmap-function

Tips on creating a responsive absolute div

I'm currently working on creating a profile component with Material UI and React.js. I'm having trouble making the Avatar/profile photo and profile name div responsive. Here are some screenshots to illustrate my issue: The specific div that need ...

javascriptcssreactjstwitter-bootstrapmaterial-ui

How to invoke a class in JavaScript within Visual Studio

I have a controller class that retrieves data from the database and returns it within a function. I now need to call this function in JavaScript and store the data in variables for display on a page: Here is an example of my code: exampleController.cs na ...

c#javascript.netajaxasp.net-mvc

Using Vue.js: Passing an object from data() to a mounted() function

I'm facing an issue while attempting to pass the grid array to the createGridChart. An error message stating "grid is not defined" keeps popping up: “grid is not defined”. export default { data() { return { grid: [], } ...

javascriptvue.jsvuejs2

Tips on validating interconnected strings with the help of yup within a react native environment

In my scenario, I am dealing with two date strings called start_date and end_date. Initially, both of these start off as empty strings: export interface FilterSchema { start_date?: any; end_date?: any; } const initialValues: FilterSchema = { s ...

javascriptreactjstypescriptreact-nativeyup

How to set up objects with accessors and mutators in ES5 JavaScript?

creating a new object, obj1, with an enumerable property of value 42 > changing the value of obj1.property to 56 > output: 56 > accessing obj1.property returns: 42 When using use strict, an error occurs. To merge multiple objects: using jQuery ...

javascriptjquerycoffeescriptecmascript-6ecmascript-5

Exploring the .map() Method in ReactJS

Would it be feasible to integrate another Postgres database table into the current mapping displayed in this code? It would be ideal if it could be done using some sort of array function. {items.map(item => ( <tr key={item.id}& ...

javascriptreactjs

The description in the lower design must not be on the same line or at the same height as the element

I'm facing an issue with CSS regarding achieving the same height. I have a list of designs, each with a description at the bottom. While I've successfully aligned the designs vertically between portrait and landscape orientations, the problem ari ...

htmlcssbootstrap-4