Highchart encountering issues with multiple Y axes

My highchart is causing Chrome to crash when I add the second series.
I am unable to see the Chrome console for debugging purposes.. :(
Does anyone have any suggestions?

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                margin: [40,10,60,80],
            },
            title: {
                text: 'Today's Temperature'
            },
            xAxis: {
                type: 'datetime',    
                dateTimeLabelFormats: {
                    day: '%H:%M'
                },
                tickInterval: 3600 * 1000,
                labels: {
                    rotation: -45,
                    align: 'right',

                    style: {
                        fontSize: '10px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                },
            }, 
            yAxis: {
                title: {
                    text: 'Temperature'
                },
                minorGridLineWidth: 0,
                /* gridLineWidth: 0, */
                /* alternateGridColor: null */
            },
            tooltip: {
                formatter: function() {
                        return ''+
                        Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y;
                }
            },
            plotOptions: {
                spline: {
                    lineWidth: 4,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                symbol: 'circle',
                                radius: 3,
                                lineWidth: 1
                            }
                        }
                    },
                }
            },
            series: [{
                    name: 'Temperature',
                    data: temp,
                    type: 'line',
                    showInLegend: false,
                    pointInterval: 60 * 1000,
                    pointStart: Date.UTC(2006, 0, 1),
                        marker: {
                            enabled: false
                        },
                    dashStyle: 'solid',
                    yAxis: 0,
                    xAxis: 0,
                    } , {
                    name: 'Humdity',
                    data: hum,
                    yAxis: 1,
                    xAxis: 0,
                    showInLegend: false,
                    type: 'line',
             }],
            navigation: {
                menuItemStyle: {
                    fontSize: '6px'
                }
            }
        });
    });

});

Answer №1

Having only one yAxis is causing the issue, as you have set the second series to display on the second axis (which is represented by yAxis: 1).

You can either remove it or create a second yAxis.

Update:

  • Specify yAxis: 0 for the first axis and 1 for the second axis.
  • Don't forget to include a , after } on line 36 of jsfiddle.
  • Make sure to store data before making any changes.

Check out the Demo

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

Converting long date format to short date format: yyyy-mm-dd

Is there a way to convert the long date format from "Sat Dec 13 2014 06:00:00 GMT+0600" to "2014-12-13" in yyyy-mm-dd format? <script> function myDate(val) { var now = new Date("<?php echo $Cnextdue;?>"); now.setDate(now.getDate() + 30*val); ...

Achieving optimal performance with scoped CSS in Vue.js

As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...

Finding the identification of the first element within a nested div using JQuery

Here is the HTML snippet that I am working with: <div id="parent"> <div id="computer"> <div id="items"> <div id="1">hp</div> <div id="2">compaq</div> <div id="3"& ...

Requesting information asynchronously returns a positive response

I wrote the following code: if (venue_exists(instagramUserID)){ alert('A'); }else { alert('C'); } function venue_exists(instagramUserID) { $.get( "/venues/" + instagramUserID, function( ...

Navigating with router.push in Vue.js to the same path but with different query parameters

The existing URL is /?type=1 I am attempting to implement router.push on this specific page. this.$router.push('/?type=2'); However, it results in a NavigationDuplicated error. I prefer not to utilize parameters such as /:type ...

How should I proceed if a TypeScript definition file that I am relying on is lacking a specific definition?

I have encountered an issue while using the React type definitions for my project. The focus method is missing on elements in the array returned by the refs property, which prevents me from getting a specific example to work. The compiler error states: pro ...

The error message states: "Cannot create element as the React object is not

Recently delving into the world of React and Material UI, I've been working on creating an AppBar with nested Tabs. Here's a snippet of my current approach: import {React, PropTypes, Component} from 'react'; import TodoTextInput from & ...

Transferring an array from JavaScript to PHP, encountering an issue with determining the length

I'm having an issue passing an array from my .js file to a PHP file. In JavaScript, the array is structured as follows: theBlock[0 - 79] with color, x, and y values. For example, theBlock[10].color or theBlock[79].x The data is sent using the follow ...

What is the best way to search for documents that have all conditions met within a sub-array entry?

My rolesandresponsibilities collection document is displayed below: [{ "_id": { "$oid": "58b6c380734d1d48176c9e69" }, "role": "Admin", "resource": [ { "id": "blog", "permissions": [ " ...

What could be causing XMLHttpRequest to encounter issues with the readystate and status states while running on localhost

Hey guys, I'm having some trouble with this code and can't figure out why it's not working. Here is the code snippet: <script> function findMatch() { if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); ...

Developing uniform resource locators with jQuery

As I work on developing my webapp, I have made use of the tag in my JSPs to ensure that all links within the application - whether they lead to pages or resources like images and CSS - always stem from the root directory rather than being relative to the ...

Collaborate and pass around SQL connections among different modules

One of my recently developed modules consists of three main functions: Establishing a SQL connection Executing a query Closing the connection This module is called in script.js along with other custom modules responsible for various operations that requi ...

Add a preventDefault event listener to a submit button that triggers a specific function

$(function() { $('#login').submit(function(e){ preventSubmission(); e.preventDefault(); }); }); function preventSubmission() { $('#btnLogin').attr('disabled','disabled'); $("#btnLogi ...

Tips for defining a dynamic class variable in React with Flow

I am working with a map that assigns a reference to items, specifically in this scenario it is a video. const ref = this[`video-${index}-ref`]; I am seeking guidance on how to properly type this using Flow. The number of indexes may vary. ...

Searching for documents in MongoDB that meet specific criteria has become possible through the use

Criteria: COUNT the total number of documents in the collection WHERE objects.objectType is 'group' AND (objects.objectType is NOT 'person' AND relation is 'Exposed_to') Expectation: should return the count of all documents W ...

use javascript or jquery to conceal the textbox control

Looking to conceal a textbox control using javascript or jquery. I attempted the following code: document.getElementsByName('Custom_Field_Custom1').style.display="none"; Unfortunately, I received an error in the java console: document.getEle ...

Is there a way to retrieve the row and parent width from a Bootstrap and Aurelia application?

Is there a way to determine the exact width of a bootstrap grid row or grid container in pixels using Aurelia? I attempted to find this information on the bootstrap website, but I am still unsure as there are multiple width dimensions such as col-xs, colm ...

Player-Oriented Online Game: Addressing Target Accuracy Challenges in ctx.setTransform

I'm currently developing a web game and my goal is to ensure that the player remains at the center of the screen. However, as the player moves further away from the center, the accuracy decreases. I've attempted using ctx.setTransform, which work ...

Tips for creating animations with JavaScript on a webpage

I created a navigation bar for practice and attempted to show or hide its content only when its title is clicked. I successfully toggled a hidden class on and off, but I also wanted it to transition and slide down instead of just appearing suddenly. Unfort ...

The code functions properly within the emulator, however, it fails to execute on an actual device

Yesterday, I posted a question about the background related to this topic: on click event inside pageinit only works after page refresh. I received an answer for my question and tested it in Chrome devtools where it worked perfectly. However, today when ...