Morris bar adjusts size when printing

I'm facing an issue with printing my Morris bar chart results. Everything looks fine in HTML, but when I try to print it, the layout seems off. Here is what I have tried so far:

<script>
function myFunction() {
    window.print();
}
</script>

    <div id="bar" class="bar" class="col-sm-12"></div>

    <script>
    Morris.Bar({
      barGap:4,
      barSizeRatio:0.90,
      element: 'bar',
      data: dataChart,
      xkey: 'y',
      ykeys: ['a'],
      labels: ['Actuel'],
    });
    </script>

When viewing the normal print preview (which doesn't look good as it's too large):

However, if I refresh the printing page, the size adjustment is much better:

It appears that there might be an issue with the svg rendering, as after refreshing, the size is correct:

If you have any suggestions or ideas on how to resolve this, please let me know.

Thank you for your assistance and time.

Answer №1

A different question has been raised that is similar to yours: https://github.com/morrisjs/morris.js/issues/652

Based on that reference, you can implement the following:

<div id="myBar" class="col-sm-6"></div>

Using JavaScript:

var bar = Morris.Bar({......});

and lastly:

$('#myBar').resize(function () { bar.redraw(); });

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

Values are being subtracted correctly without displaying any negative results

I'm working with the following code snippet: const my_transactions = [{amount: -100,currency: 'EUR'},{amount: -200,currency: 'EUR'},{amount: -400,currency: 'EUR'}]; let total = 0; my_transactions.forEach(el => total ...

If the element is checked and equal to a specific value, take action

I am trying to hide one of the 3 radio buttons on my page. Although they all have the same class, each button has a different value. I attempted to write code to achieve this, but unfortunately, it is hiding all radio buttons instead of just one. Could s ...

How can I loop through JSON in AngularJS to populate fields without knowing the key value?

Here is the data structure that I'm working with: { "0": { "keyword": "flower", "short_desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "pt_value": "5" }, "1": { "keyword": "tree", "short_desc": "Lorem ipsum dolor sit amet, consecte ...

Ensure Angular JS includes a space or special character after applying a currency filter

Is there a way to include a space or special character after the "₹" symbol? Desired output: ₹ 49 Current output: ₹49 HTML - {{cart.getTotalPrice() | currency:"₹"}} ...

What is the best way to sort and organize this JSON data?

There is an array of JSON objects named events that contains fields such as eventId, eventName, and the date of the event. [{event1}, {event2}, {event3}]; The goal is to iterate through this array and filter out events that occur on the same day. The des ...

Displaying Component when Clicked using Vue.js

How can I display a modal component after an "on click" event? Is it possible to show a component using a method call, or what is the recommended approach in this scenario? Here is my specific use case: I have multiple cards each containing various infor ...

Retrieve MySQL data and insert it into a new table row using jQuery

I am relatively new to using jquery and AJAX and I am unsure if AJAX would be beneficial in this particular scenario. I came across a similar question that seems to be related to what I am looking for. Add new row to table using jQuery on enter key button ...

The process of retrieving numerical values from a string is failing to function properly during live operation

I am facing a problem with extracting a number from a string in react. The solution I implemented works perfectly on my local machine but encounters issues when deployed to production. I have tried deploying it on both netlify and heroku, yet the result re ...

Two flex boxes displayed next to each other on the screen

Within the .maroon section, there are two .whitewrap sections. I am puzzled as to why they are not wrapping onto another line and instead displaying side by side. The form should be positioned below the text and graphic with some maroon showing in between. ...

Sass compilation with source mapping

Is there a more efficient method to compile my sass files with sourcemap enabled other than using the command below? sass --compass --sourcemap --style compact --watch sass:css In the case of utilizing compass, 'compass watch' would be the pref ...

Guide to creating a radio button with the appearance of a toggle button

Is there a way to style radio buttons like toggle buttons using only CSS and HTML? I want the group of radio buttons to have the appearance of toggle buttons, while still maintaining their functionality as radio buttons. UPDATE: I am open to simply makin ...

How come an inner <div> element does not recognize the margin of its outer <div> container?

Here is the code snippet in question: <div id="x"> <div id="modal-body"> <div class="modal-input-row"> xxx </div> </div> </div> #modal-body { display: block; margin-top: 5rem; } .modal-inp ...

Tips for consolidating JavaScript assets in Mean.io

Recently, I started using Mean.io and encountered an issue while trying to include an external .js file in my package. Unfortunately, I seem to be doing it incorrectly as the file is not being added to aggregated.js. This is the approach I have taken: im ...

Tips for resolving the error message: React is not able to identify the `currentSlide` and `slideCount` prop on a DOM element

I recently implemented an image slider using "react-slick" in my next.js project. However, I encountered some warnings in the console related to the 'currentSlide' and 'slideCount' props on a DOM element. Warning: React does not recogni ...

What could be causing this form to continuously submit outdated parameters?

I have a comment form that appears multiple times on my page, as each comment is linked to a node, and multiple instances of each node are displayed. The issue arises when I try to submit a comment successfully via AJAX. Upon trying to send another commen ...

Reset the dropdown list back to its initial state

I am facing an issue with two dropdown lists in my view. When I change the value on the first one, it should update the second one accordingly. Initially, this functionality works fine with the script provided below. However, if I change the first dropdown ...

Steer clear of Cross-Site Request Forgery through

As someone who is still learning about web security, I am curious about the best practices for using tokens on JavaScript requests to prevent CSRF attacks. Is it possible for someone to provide a code example? I already know how to implement this properly ...

Error: Dotenv.apply is unable to access the property 'version' because it is undefined

Hey there, I'm currently working on setting up environmental variables in my react app. Starting from scratch using webpack 4 and babel. Once I added the dotenv-webpack plugin to my webpack.config file, I encountered this error: TypeError: Cannot read ...

What is the best way to respond to a hashchange event within AngularJs?

I am new to AngularJs and I am trying to update the page on hashchange events. Currently, I have this code which I know is not the proper way to do it: <!DOCTYPE html> <html> <head> <style> #hashdrop { display:block; ...

Issue with Three.js sample scene not functioning correctly

Forgive my lack of experience, but I am new to three.js and seeking guidance from the experts. I am starting with a basic scene to build my understanding from there. I began with an example scene from the documentation, but when I run it locally or on my s ...