Displaying Highcharts Graph in Dual Containers

Could you kindly review this demonstration and provide guidance on how I can display one Highcharts chart in two separate containers? I have attempted both:

renderTo: 'container',
renderTo: 'container2',

and 

renderTo: 'container, container2',

within the

$(function() {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            renderTo: 'container2',
            type: 'column',
            plotBorderWidth: 1
        },
        yAxis: {
            title: {
                text: 'useHTML = true',
                useHTML: true
            }
        },
        series: [{
            data: [23,45,12,89,123,12,5]}]

    });

});

However, my attempts were unsuccessful!

javascripthighcharts

Answer №1

It's recommended to use class names instead of ID's when calling Highcharts. To make it work, add a dummy class (render_here) and implement the following code:

$(function() {
$('.render_here').each(function(){
var chart = new Highcharts.Chart({

    chart: {
        renderTo: this,

        type: 'column',
        plotBorderWidth: 1
    },
    yAxis: {
        title: {
            text: 'useHTML = true',
            useHTML: true
        }
    },
    series: [{
        data: [23,45,12,89,123,12,5]}]

});
});
});

Check out the Working fiddle here

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

Changing component properties using router-view in Vue.js is the recommended approach

Looking to pass a boolean value from a view within a router-view up to the root App.vue and then on to a component in the App.vue. Successfully achieved this, but encountering an error: Received a warning about mutating a prop directly, as it will be over ...

javascriptvue.jsvuejs2vuetify.jsvue-props

Can users arrange a lineup of choices?

As a beginner, I have a task that seems pretty simple to others but not so much for me. I need to create a feature where a client can order 10 different services in the order they prefer. The idea is to use a dropdown menu or checkboxes to allow the user ...

javascriptjquery

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

javascripthtmlcssreactjsuser-interface

Dynamically assigning classes based on the element that is being scrolled beyond

I am working on a navigation bar (nav) that consists of letters and corresponding sections. My goal is to add an active class to the letter when a user scrolls to its associated section. For instance: When the user scrolls to a section with the id of a, t ...

javascripthtmljquery

Achieving Distinct Values in an Observable Array Property - Angular

I have created an Angular application that utilizes a service to retrieve data from a mock API. The data returned is in the form of an array containing objects, as shown below: [ { "userId": 1, "id": 1, "title": "quidem molestiae enim" }, ...

javascripthtmlangular

A guide on efficiently storing and retrieving a webpage containing two angular2 components using local storage

I've been attempting to store and retrieve a page containing two angular2 components from local storage using the following code, but the component CSS is not being applied. Here is the code I'm using to save: localStorage.setItem('pageCon ...

javascriptangulartypescriptlocal-storage

Discovering a specific grandparent using its ID and retrieving the values of its children based on a specific class can be achieved effortlessly with the power

I have a dynamic div <div class="illustartionWrap" id="illustartionWrapId"> <div class="illusList illusListTop" id="illusList_heading"> <span class="fileName">File Name</span> <span class="fileDesc" ...

javascriptjqueryhtmlparentchildren

Converting hexadecimal to binary using Javascript or Typescript before writing a file on an Android or iOS device

Hey everyone! I'm facing a puzzling issue and I can't seem to figure out why it's happening. I need to download a file that is stored in hex format, so I have to first read it as hex, convert it to binary, and then write it onto an Android/ ...

javascriptreactjstypescripthexbin

Issue with Canvas.doDataUrl not functioning properly in presence of an image on canvas

It seems like the code I have tried only works for local images. Can someone share a working code snippet for this? Here is what I've attempted: var base_image = new Image(); base_image.src = ("/img.png"); base_image.onload = function(){ var co ...

javascripthtmlcanvashtml5-canvas

Change a JSON array with dates into a date type array in JavaScript

There is an array available: var BigWordsDates = JSON.parse('<?php echo addslashes($Array_OfDates_to_json) ?>'); When inspected in FireBug DOM, it appears as: BigWordsDates Object { #Tahrir=[36], #Egypt=[24], #Morsy=[16], more...} # ...

javascriptjsond3.js

Issue with Vue JS Components: Button function not working on second click with @click

I've been working with Vue JS and Laravel to create a modal. The first time I press the button with @click, it works fine but the next time I encounter an error. Here's my Laravel Blade code: <div class="col-span-12 mb-5" id="a ...

javascriptvue.jsvuejs3vue-componentlaravel-blade

Generating VueJS Syntax from JSON Data

My goal is to retrieve locale language variables from a JSON Request generated by Laravel and load them into VueJS. VueJS does not natively support locales, so I am facing issues with the ready function alert not working while the random text data variable ...

javascriptjsonlaravelvuejs2vue.js

How can I extract information from an HTML element using its ID in JavaScript?

Can anyone please help me retrieve the date using JavaScript from the following div: <div id="popupDateFieldMin" class="dateField">2017-08-02</div> Below is the code snippet I am currently using: var cal = document.getElementById( 'popu ...

javascripthtml

Is there a way to set up a listener for a particular property of a recoil state object?

Is it possible to create a listener for a specific property within a state object? Let's look at an example: type ExampleAtomProperties = { id: number; description: string; }; const ExampleAtom = atom< ExampleAtomProperties>({ key: &quo ...

javascriptreactjsreact-hooksrecoiljs

What is the best way to delete a jQuery.bind event handler that has been created for an event

I have a div and I need to assign two scroll functions to it, but I also want to remove one of them after a certain condition is met. <div id="div1" class="mydivs"> something </div> <div id="div2">Some crap here</div> <script&g ...

javascriptjqueryhtmlajax

Does the presence of all angular2 bundles in index.html result in imports retrieving data from memory rather than making another request to the server?

Transitioning from angular 1 to angular 2, I initially faced some challenges with performance using a node backend. The page took 40 seconds to fully load in Firefox and made over 500 requests. This made me consider reverting back to angular 1 until the re ...

javascriptnode.jsperformanceangularsystemjs

Is there a way to disable page prefetching for Next.js Link when hovering over it?

Whenever a link is hovered over in my production application, an XHR request is sent to the server. I need to find a way to prevent this from happening. I tried using prefetch={false} but it didn't work. Any suggestions on how to resolve this issue? ...

javascriptreactjsnext.js

Is it possible to modify the icon of a date picker in Ant Design?

Is it feasible to switch the icon of a date picker from the ant design framework to a material ui icon? https://i.sstatic.net/blbH1.png Material UI icon for reference: https://i.sstatic.net/zpJsZ.png ...

javascriptreactjsmaterial-uiantd

What are the drawbacks of calling async/await within a fresh Promise() constructor?

I have implemented the async.eachLimit function to manage the maximum number of operations concurrently. const { eachLimit } = require("async"); function myFunction() { return new Promise(async (resolve, reject) => { eachLimit((await getAsyncArray ...

javascriptnode.jsasynchronousasync-await

Considering a Servlet for managing AJAX requests?

Looking for advice on best practices for implementing a yes or no question with AJAX requests. Open to feedback if I make any missteps along the way. I have a specific Servlet (AjaxServlet?) designated to handle all AJAX requests AjaxServlet is mapped t ...

javajavascriptajaxservlets