Adjusting the size of a Highchart according to the size of the window

Greetings! I have a left navigation menu with content on the right side in the form of a Highchart. Below is the configuration for my Highchart:

this.InputData = {

            chart: { type: 'column' },
            title : { text : 'Overview' },  

            xAxis: {
                categories: this._weekValues
            },
            yAxis: {
                allowDecimals: false,
                title: { text: 'some title'},
                min: 0,
                max: 100,
                labels: {
                    formatter:function() {
                        var pcnt = (this.value / 100) * 100;
                        return Highcharts.numberFormat(pcnt, 0) + '%';
                    }
                }
            }
        }

I also have a function that is triggered when the size of my left menu changes:

this.menuEvent.onChangeLeftMenu().subscribe(()=>{
            Observable.timer().subscribe(()=>{
                console.log('highchart redraw?');
            });
        });

Is there a way to refresh or resize my chart when the size of my left menu changes? Currently, the chart overflows from my div wrapper. Thank you for your assistance!

javascriptangularjshighchartsredrawangular2-highcharts

Answer №1

Redraw ()

Refreshes the chart within its container. The chart typically refreshes automatically to fit its container after a window resize event, based on the chart's reflow option. However, if the container is resized without triggering a window resize event, this function must be called explicitly.

$('#reflow-chart').click(function () {
    chart.reflow();
});

If you can provide an actual demo or a link (like Plunker), it would greatly assist in solving any issues.

Answer №2

JS Fiddle

 $('#add').on('click', function () {
chart.addAxis({ // Secondary yAxis
    id: 'rainfall-axis',
    title: {
        text: 'Rainfall'
    },
    lineWidth: 2,
    lineColor: '#08F',
    opposite: true
});
chart.addSeries({
    name: 'Rainfall',
    type: 'column',
    color: '#08F',
    yAxis: 'rainfall-axis',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  $(this).attr('disabled', true);
  $('#remove').attr('disabled', false);
});
 $('#remove').on('click', function () {
  chart.get('temperature-axis').remove();

  $(this).attr('disabled', true);
$('#add').attr('disabled', false);
 });

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

Comparison between Javascript and C loops for handling complex arrays

I'm currently dealing with a challenge in my node.js project. The issue I'm facing is that a complex loop in my code is taking around 200-300 ms to complete, which seems quite high. I'm considering converting this particular piece of code to ...

javascriptcnode.js

Inter-service/module communication on a widget interface

We are in the process of creating a widget screen that contains various widgets/modules: Products: Displays a list of products Product Details: Retrieves product details from the server when a selection is made in the "Products" widget. Related Products: ...

javascriptangularjs

Ways to find the image source using JavaScript/Jquery upon page loading?

I've scoured countless forums, yet a viable solution still eludes me. My objective is simple - upon page load, I want to gather all elements with the ".home" class and store them in an array called arr. Subsequently, the script should iterate through ...

javascriptjqueryhtmlcss

Improving JavaScript Functions: Minimize duplication of helper methods

I have a set of helper functions that check for the presence of specific strings in an array and certain steps before triggering other functions. The reason for keeping them separated is because arrTours must be associated with only those arrSteps. // Help ...

javascriptreactjstypescriptalgorithmfunction

Having trouble loading Three.js in JavaScript file using npm install?

I am encountering a problem when trying to include Three.js in my JavaScript file without using the HTML script element. The error message I receive is "Uncaught SyntaxError: Cannot use import statement outside a module". Although my Three.js code runs suc ...

javascripthtmlimportthree.js

Selenium with Javascript

I am currently working on a website that utilizes the jquery.treeview.js plugin to display multiple nested branches. Each branch contains a JavaScript button: <a href="javascript:void(0);" id="show_link" class="show_links" onclick="$(this).parent().chi ...

javascriptpythonselenium

What is the best way to assign a distinct identifier to every hyperlink within a specific class using jquery?

For a project I'm working on, I need to create a list of links and a save button. My goal is to hide the save button if a link has already been saved. To achieve this, I am thinking of assigning a unique ID to each link based on a specific number in t ...

javascriptjquery

Having trouble with React's useEffect and React-Query's useQuery?

As a React newbie, I'm trying to implement global error handling using a context provider and a custom hook. Main Objective: Implementing a system to handle errors at the global level. The Issue: Errors reappear immediately after being removed. I s ...

javascriptreactjsreact-hooksreact-query

What is the best way to ensure my php variable is easily accessed?

Recently, I've been working on implementing a timer and came across the idea in a post on Stack Overflow. <?php if(($_SERVER['REQUEST_METHOD'] === 'POST') && !empty($_POST['username'])) { //secondsDif ...

javascriptphpjqueryhtmlajax

What is the reason behind this being deemed as true?

Imagine we have this snippet of code: var attachRed = false; Why is attachRed = !attachRed equivalent to true? I'm curious because I'm working with Vue.js and trying to grasp why this particular piece of code functions as it does. <div id= ...

javascriptvue.js

Updating and saving JSON data once retrieved in Ionic 2

When retrieving a JSON, I typically use the following method: this.http.get('http://someaddress.json') .map(res => res.json()) .subscribe( data => { ... } ); My next step involves making modifications to some of the data and saving it ...

angularjsjsonionic2

How can I identify the moment when an AngularJS route controller is no longer in scope?

Currently, I have a controller set up to poll the server at regular intervals using $timeout. The issue arises when the route changes - I need to stop the polling and then restart it once the original route is accessed again. If anyone has any suggestions ...

javascriptangularjs

Graph not displaying dates on the x-axis in flot chart

I've been attempting to plot the x-axis in a Flot chart with dates. I've tried configuring the x-axis and using JavaScript EPOCH, but have had no success so far. Here's a snippet of my code: <?php foreach($data[0] as $i => $d){ ...

javascriptphpflot

Inject an HTML or jade webpage into a div within another HTML or jade webpage

I'm facing an issue in my Node.js project with a script (JS) that is responsible for loading a Jade page into a div of another Jade page using $("#div").load(directory). Despite specifying the directory of the jade page to be loaded, I keep getting an ...

javascripthtmlnode.jsexpresspug

Navigating through a large array list that contains both arrays and objects in Typescript:

I have an array containing arrays of objects, each with at least 10 properties. My goal is to extract and store only the ids of these objects in the same order. Here is the code I have written for this task: Here is the structure of my data: organisationC ...

javascriptnode.jstypescript

Is it necessary for a writable stream in NodeJS to wait for the drain event before writing again automatically?

Below is the code I am working with: const { Writable } = require('stream') let writable = new Writable({ highWaterMark: 10 }) writable._write = (chunk, encoding, cb) => { process.stdout.write(chunk) } function writeData(iterations, writ ...

javascriptnode.js

What is causing Mocha.js to be unable to locate the module?

Having trouble with mocha.js not being able to locate my path! Here's the directory structure I have set up for my node course project: ///////Root --package.json --node_modules/ --playground --server -server.js -db -models ...

javascriptnode.jstestingnpmmocha.js

Performing a conditional query on a Many-to-Many relationship in TypeORM

Operating under a many-to-many relationship between Category and Product entities In need of filtering products based on category ID Attempted to implement the following code after referring to some examples, but encountered difficulties in making it fun ...

javascriptnode.jstypescriptnestjstypeorm

What is the best way to pass and save information across different routes in Express using Node.js?

Let's delve into the specific functionalities I envision for my server. Essentially, my project involves user registration and login processes. The URLs for these routes are as follows - localhost:3000/login and localhost:3000/register Upon successf ...

javascriptnode.jsexpressauthenticationroutes

Edit the settings for the dual-axis line chart's parameters

After countless hours of scouring the Internet and numerous attempts, I have come to the decision to seek help by posting my issue on this forum. I must confess, I am not the best developer. My approach usually involves finding pre-existing code that I ca ...

javascriptchartsgoogle-apps-scriptgoogle-sheets