tickPositions becomes undefined upon introducing a second Y-Axis

I encountered an issue with my Highcharts chart when using the addSeries method along with two Y-axes.

As this project employs Backbone, I have simplified the code in a JSFiddle that can be accessed here: http://jsfiddle.net/michalcarson/V84pP/.

The code initializes a chart without any data, adds a second Y-axis, and then attempts to add data for the first series. However, at this point, an error occurs with the message "TypeError: tickPositions is undefined" in highcharts.src.js line 7315.

The data I am trying to include should be linked with the primary y-axis (chart.yAxis[0]), yet specifying this association or not leads to the same error. Further details are available on the JSFiddle link provided.

var chart,
options = {
    chart: {
        renderTo: 'chartdiv'
    }
},

real_series = {
    "data": [10.816667, 8.458333, 9.1, 8.794771, 7.91789, 7.281212,
        6.671075, 6.08748, 5.530427, 4.999916, 4.495946, 4.018517, 3.567631]
};

chart = new Highcharts.Chart(options);

chart.addAxis({
    id: "LCUReal",
    title: { text: "LCU Real" },
    opposite: true
}, false);

chart.addSeries(real_series);

The versions being used are jQuery 1.11.1 and Highcharts 4.0.3.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/4.0.3/highcharts.src.js"></script>
<div id="chartdiv"></div>

Hence, the query arises: What could possibly be incorrect in this code? How can I successfully implement a second Y-axis without encountering this error?

I have not made use of tickPositions previously, leaving it for Highcharts to handle. Any insights would be greatly appreciated.

Answer №1

To eliminate the range on your axis, you can connect it to the first axis.

For example:

chart.addAxis({
            linkedTo: 0,
            id: "LCUReal",
            title: {
                text: "LCU Real"
            },
            opposite: true
        }, false);

http://example.com/jsfiddle123

Answer №2

After some experimentation, I have discovered a way to resolve this issue by dynamically creating the secondary y-axis only when necessary. The revised approach is as follows:

  • Initialize the primary y-axis first,
  • Add data series that utilize the primary y-axis,
  • Create the secondary y-axis if required, and
  • Add data series using the secondary y-axis.

Updated implementation:

let chart,
options = {
    chart: {
        renderTo: 'chartdiv'
    }
},

series1 = {
    "name": "Interest Rate %",
    "data": [10.816667, 8.458333, 9.1, 8.794771, 7.91789, 7.281212,
    6.671075, 6.08748, 5.530427, 4.999916, 4.495946, 4.018517, 3.567631],
    "yAxis": "%"
},
series2 = {
    "name": "Exports",
    "data": [5803.475611, 5820.886038, 5925.661986, 6022.908979, 6091.005915, 6133.429061, 
             6158.918132, 6174.863244, 6186.050828, 6195.144854, 6203.458226, 6211.561078, 6219.661642],
     "yAxis": "LCUReal"
};

chart = new Highcharts.Chart(options);

chart.yAxis[0].update({
    id: "%",
    title: { text: "%" }
});

// By adding series1 here, we prevent any errors from occurring
chart.addSeries(series1);

if (condition for secondary axis) {
    chart.addAxis({
        id: "LCUReal",
        title: {
            text: "LCU Real"
        },
        opposite: true
    }, false);  
}

// Now we can safely add series2 without causing issues with tickPositions on the secondary axis
chart.addSeries(series2);

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

What is the best way to programmatically insert a new element into the DOM after it has already been rendered in Next

In my project with Next.JS 13, I am currently exploring methods to manually inject component code into an existing element in the DOM that has already been rendered. Below is the code snippet for the component: const layouts = { forgotPassword: () => ...

Could one harness the power of SO's script for adding color to code within questions?

Similar Question: Syntax highlighting code with Javascript I've observed that Stack Overflow utilizes a script to apply color coding to any code shared in questions and answers, making it resemble how it would appear in an IDE. Is this script pub ...

Change the blue line to a crisp, clean white

Is it possible to customize the color of the blue line that appears when clicked? class Greetings extends React.Component { render() { return <div>Greetings {this.props.name}</div>; } } ReactDOM.render( <div> <p tabInde ...

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Lately, I've been facing a strange issue with using a checkbox that collapses a hidden div by utilizing bootstrap. When I include the attribute data-toggle="collapse" in the checkbox input section, the div collapses but it mandates every single one o ...

The click event in an Angular 6 loop is not being activated

When the Test is clicked, the function should be invoked. However, nothing happens when I click on it. Here is the HTML component code: <div class="row m-0 justify-content-between" *ngFor="let i of k[currentk]?.details | keys"> <div (click ...

Is there a way to dynamically convert a css rule like "select::-ms-expand" to JavaScript?

Looking for assistance with implementing the following code snippet in JavaScript: "$('select').css('-moz-appearance','none');". I've tried searching on Google for solutions, but haven't been successful. Any tips or ...

What is the best way to transfer parameters from the Vue root to a component?

Currently, I am attempting to transfer a string value from index.cshtml to the main Vue element. The specific parameter I want to pass is: userId Location: Index.cshtml (this is where the parameter is obtained) @using Microsoft.AspNetCore.Identity @inje ...

Generating unique ID's for data posting in PHP and JavaScript

I've developed a dynamic form that includes an "add more" button to generate an XML file for data import purposes. Users can fill out the form and add as many entries as needed by clicking on the "add more" button. The inputted data is then processed ...

Create new <div> elements dynamically within a loop using the value of a variable as a condition

I am in need of assistance with a function that generates news tiles ("cards") as displayed below: renderNews = <div className={styles["my-Grid-col"] + " " + styles["col-sm12"]+ " " + styles["col-md12"] + " " + styles["col-lg12"] + " " + styles["col-xl ...

What is the ideal amount of data to store in browser cache?

I am facing the challenge of loading thousands of user data records from a REST service, specifically user contacts in a contact-management system, and conducting a search on them. Unfortunately, the existing search functionality provided by the REST servi ...

Make sure to trigger a callback function once the radio button or checkbox is selected using jQuery, JavaScript, or Angular

I'm looking to receive a callback once the click event has finished in the original function. <input type="radio" onchange="changefun()" /> function changefun() { // some code will be done here } on another page $(document).on('input: ...

Understanding the optimal scenarios for utilizing inline functions in button onClick events in JavaScript/React.js

When it comes to assigning event handlers to buttons, there are various styles to choose from. Is there a specific scenario where using an inline function for the button's onClick event handler is recommended? onClick={props.handleDeleteOption(props. ...

specify environment using command line parameters in protractor

Can Protractor handle specifying environment names in the command line? I'm interested in having specific URLs selected for testing based on the name provided, as defined in my .env file. ...

Having trouble resolving errors in Visual Studio Code after failing to properly close a parent function? Learn how to fix this issue

Here we have the code starting with the construct function followed by the parents function public construct() //child { super.construct; } protected construct() //parent { } The issue arises where I am not receiving an er ...

reqParam = $.getQueryParameters(); How does this request work within an ajax form

I've spent a lot of time searching, but I can't figure out what the code reqParam = $.getQueryParameters(); means and how it is used in Ajax JavaScript. I copied this Java script from a website as an example. If anyone has any insights, please he ...

JQuery .click function functioning properly on alternate clicks

Currently, I am integrating JQuery with ReactJS. However, there seems to be an issue where the action that should occur when clicking a button only works on every other click. The first click doesn't trigger anything, but the second one does. I attem ...

Vue3: Pinia store data not being received

Having trouble retrieving Pinia data using the Composition API after a page reload? I'm utilizing Vue to parse fetched JSON data. Despite being new to the Composition API, I can't pinpoint what's causing the issue even after going through th ...

It appears that the jQuery this() function is not functioning as expected

Despite all aspects of my simple form and validation working flawlessly, I am facing an issue where 'this' is referencing something unknown to me: $('#contact').validator().submit(function(e){ e.preventDefault(); $.ajax ...

Review Limited Screen Size for a Smartphone Website

I have been working on optimizing a mobile website and I utilized CSS to adjust the layout design for screen widths between 150px and 480px. However, during testing on an actual phone, the desktop layout is appearing instead of the custom layout set with C ...

The Vue warning message states: "An error occurred during rendering: TypeError - Unable to access the 'Id' property of an undefined or null reference."

After testing it with various browsers such as Chrome, Firefox, Opera, and Internet Explorer, I noticed that the error only occurs in Firefox. In my Vue.js code, I have two computed properties that change almost simultaneously. When I modify my select box ...