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

Validate if a string in JQuery contains a specific substring

How can I determine if one string contains another string? var str1 = "ABCDEFGHIJKLMNOP"; var str2 = "DEFG"; What function should I utilize to check if the string str1 includes the string str2? ...

When running `grunt serve: dist`, an error is thrown stating: "Unknown provider: utilProvider <- util <- NavbarController"

I am facing a problem with my angularJS website that is built using the yeoman angular-fullstack generator. When I run grunt serve, everything works perfectly fine. However, when I try to run grunt serve:dist, I encounter this error: grunt serve: dist -&g ...

Checking the security status of a PDF file in the web browser to determine if it

Within my platform, individuals have the ability to upload PDF files for others to access at a later time. In order to accommodate this functionality, I require that these PDFs are not secured or encrypted, and can be easily viewed by any user. To ensure ...

The persistent issue of the modal box disappearing persists, despite my efforts to remove additional instances of bootstrap.min

I have been struggling to prevent my modal box from disappearing, despite trying various solutions found online. How can I ensure that it stays visible? Here is the code in question: <html> <head> <title> Test Slides </titl ...

PHP encountering a bad escaped character while parsing JSON using JSON.parse

I'm encountering an issue with JSON parsing. In my PHP code, I have the following: json_encode(getTeams(),JSON_HEX_APOS); This returns a large amount of data. Sample data: To provide more clarity, let's assume I have this: my_encoded_data ...

The Date Picker pops up automatically upon opening the page but this feature is only available on IE10

There seems to be an issue with the date picker opening automatically on IE10, while it works fine in Firefox where it only appears when you click on the associated text box. Does anyone have insight into why this might be happening specifically in IE10? ...

Create a URL hyperlink using javascript

I am looking to create a link to a page that updates its URL daily. The main URL is where X represents the day of the month. For example, for today, July 20th, the link should read: In my JavaScript section, I currently have code that retrieves the cur ...

Ending or stopping based on data retrieved from an ajax call

Currently, I have a php script that includes an image which, upon clicking, redirects the user to a different page. Additionally, there is an ajax/jQuery function in place to check if the user is logged in or not. When the user clicks on the link, the aja ...

Position a div relative to another div with a static position

I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using: top:100%; position:relative; width:100%; he ...

Transform PHP array into a properly structured array or object that can be easily used in JavaScript

My PHP code contains an array that looks like this: $variation = [ attribute_label => "Choose your Color", attribute_name => "pa_choose-your-color", variations => [ "819" => "Red", "820" => "Blue", ...

How to toggle a class using ng-click in AngularJS

Currently, I am working on a project using AngularJS for my website. One specific feature involves having a form that is initially hidden with "display:none" set deliberately. There's also a button labeled create. My goal is to have the form toggle b ...

Troubleshooting a bug in React TypeScript with conditional logic

I have a new message button and a few conversations. When I click on a conversation, the right side should display the message box. Clicking on the new message button should show the create new message box. Here are my useState and handlers: const [newMess ...

Tips for horizontally arranging a list with a flexible number of columns

I am attempting to create a horizontal list with 3 columns that automatically moves to a new line when the columns are filled. I have been trying to implement this using PHP but haven't had any success. If anyone could provide some guidance on how to ...

What is the best way to use jQuery to emphasize specific choices within an HTML select element?

Seeking help with jQuery and RegEx in JavaScript for selecting specific options in an HTML select list. var ddl = $($get('<%= someddl.ClientID %>')); Is there a way to utilize the .each() function for this task? For Instance: <select i ...

Check for the presence of a specific variable before using it as a dependency in useEffect. Only watch it if the variable

Here is the code snippet I'm currently working with: useEffect(() => { if (field[1].isActive === true) { handleMore(); } }, [field[1].text]); One issue I'm encountering is that sometimes the Field data does not come in the json-response, ...

Having difficulty assigning an argument to an HTTP get request in AngularJS

I am new to working with AngularJS and I am attempting to pass an integer argument to an HTTP GET request in my controller. Here is a snippet of my code: (function() { angular .module('myApp.directory', []) .factory('Ne ...

Repeating every other item in a list using ng-repeat in AngularJS

Using AngularJS version 1.5.3 In my view, I have a list of items that I want to display. After every two items, I would like to show a new div below the first one. <div class="col text-center" ng-repeat="event in weekDay.events"> &nbsp;& ...

What could be causing my Express API registration route to fail when attempting to POST?

Currently, I'm in the process of developing a compact authentication system for a practice project that I've undertaken. As part of this endeavor, I am sending POST requests via Postman to my Express server located at http://localhost:4000/api/re ...

The web method is not activated

My initial endeavor to call a server-side function from JavaScript is not yielding results as the webmethod is not being invoked. Within the aspx file, there is a bootstrap-styled button; upon clicking it, the objective is to append a new entry to the use ...

Steps for updating a property of an object using a function

I am working on a function that resets the deepest value of an object with variable depth to 0. I need this function to update the object's property outside of its scope. var data = { '1': { '10000': { ...