Bar chart in Highcharts vanishing following the update from version 10.2.1 to 10.3.1

I've been in the process of updating my highcharts to the latest version, but I've hit a roadblock.

Specifically, I have a bar chart set up with the following configuration:

{
            chart: {
                type: 'bar',
                height: 70,
                pointPadding: 0,
            },
            title: {
                text: null,
            },
            credits: {
                enabled: false,
            },
            xAxis: {
                type: 'datetime',
                visible: false,
            },
            yAxis: {
                type: 'datetime',
                min: startTime,
                max: endTime,
                visible: true,
                opposite: false,
                endOnTick: true,
                ordinal: false,
                minPadding: 0,
                maxPadding: 0,
                tickInterval: tickIntervalMs,
                minTickInterval: tickIntervalMs,
                reversedStacks: false,
                title: {
                    text: null,
                },
                labels: {
                    style: {
                        color: mfTheme.colorPalette.n500,
                    },
                    formatter() {
                        return moment((this as any).value)
                            .tz(institutionTimezone)
                            .format('LT');
                    },
                },
            },
            time: {
                timezone: institutionTimezone,
                moment,
            },
            legend: {
                enabled: false,
            },
            tooltip: {
                borderWidth: 0,
                borderRadius: 24,
                backgroundColor: '#FFFFFF',
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    pointWidth: 50,
                    groupPadding: 0,
                    pointPadding: 0,
                    borderWidth: 0,
                },
            },
            series,
        }
}

Everything looks great so far until version 10.2.1

https://i.sstatic.net/53ss6XUH.png

However, after upgrading to Highcharts 10.3.1, the bar disappears completely and just shows a blank white area.

Upon investigating, I noticed that all elements of the chart have a height and width of 0.

I'm using highcharts-react-official for this implementation.

I even went through the PR changes in the update notes but couldn't find any information on what might be causing the issue in the new version.

Any suggestions on how I can get the chart to reappear?

You can also view a reproducible example on codesandbox:

https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-s82pdf?file=%2Fdemo.jsx

Answer №1

It is important to note that the yAxis.min value must be a number as specified in the API documentation. It may have appeared to work differently in earlier versions due to potential errors in input. The recommended way to set a minimum value for the yAxis is to use a timestamp, similar to how you would set the maximum value with yAxis.max.

Check out the demo here: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-5623sy?file=%2Fdemo.jsx%3A31%2C1

For more details, refer to the API Reference: https://api.highcharts.com/highcharts/yAxis.min

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

Steady Navigation Bar in Javascript without Bouncing

While experimenting with a fixed navigation bar, I've encountered an issue where the content below jumps up on the page when the navigation bar "fixes" itself to the top of the screen. You can check out the JSFiddle I've been working on for refer ...

Explore the power of Infinity.js for optimizing the rendering of large HTML tables, complete with a detailed example using prototype

Is there a way to efficiently load/render large html tables without compromising performance, especially in Internet Explorer? I recently came across a plugin in prototype.js (https://github.com/jbrantly/bigtable/, post: , demo:) that addresses this issue ...

Guide on how to copy data from an excel spreadsheet to a table and save it in the state using React

I have a React table where I need to paste values from an Excel sheet and store them in a state. I've attempted using both onPaste and onInput events, but only the last value is being stored in the state. function App() { // State setup } // Event ...

Deleting an ID from an array within a document using Node.js Mongoose

In my model document, there is an array that I am working with. I want to be able to remove a specific ID from this array. Is it possible to do so? https://i.sstatic.net/agaD3.png Below is what I attempted. module.exports.RemoveFavourite = async (req, re ...

Edge Runtime does not permit the use of Dynamic Code Evaluation functions such as 'eval', 'new Function', and 'WebAssembly.compile'

My project involves the implementation of NextUI components. I incorporated the Select component from NextUI, and during development mode, everything functioned flawlessly. However, upon completion of development and attempting to build the project, I enc ...

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

const styling = { base: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, borderRadius: 3, boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', color: 'white', height: 48, ...

JavaScript problem encountered when using the forEach() function on $el

I am encountering an issue where I am unable to access the element value inside the forEach() function var filtered = rawData.map(function(x){ return { state : x.state, active : x.active, deaths : x.de ...

visit a new page with each reload

Can I navigate to a new page without refreshing the current window.location.href? I attempted to achieve this using a jQuery event handler on the window object, however, it doesn't seem to be functioning properly. $(window).on('reload', fu ...

interactive textbox created with the combination of javascript and php

Hello, I am new to JavaScript and jQuery. I am trying to create a dynamic text box using JavaScript that can add and remove rows. When I press the add button, it works well, but when I pressed delete, it deleted the entire table. Below is my JavaScript fu ...

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

Trigger a Tabulator event when a checkbox is selected in Vue 3

Currently, I am utilizing Vue3 along with Tabulator (5.2.7) to create a data table using the Composition API. In the following code snippets, I have excluded irrelevant parts of the code. //DataTable.vue <script setup> import { TabulatorFull as Tabu ...

Having issues with C# ASP.Net autocomplete not functioning properly when using Javascript/Json post

I have been working on a c# asp.net usercontrol that requires a functional autocomplete feature. However, I am encountering an ongoing issue where the script appears to be running – with the progress bar spinning – but it consistently returns an ' ...

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

Is there a way to identify when a browser or tab is closed in Angular/JavaScript? I would like to know if there are specific events that can be used for detecting these actions. Any advice, information, or code examples on this topic would be greatly app ...

Why is the Jquery console not displaying any values?

Hey everyone, I need some help with a small issue in my project. For some reason, the console.log() function in my project is not returning any values. <script> $('#search-box<?=$x;?>').blur(function() { var val = $("#search ...

When making a Get Request from Angular, the header fails to appear for servicing

I am currently working on an angular JS application where I need to call a GET API that is OAuth 2.0 enabled, requiring a Bearer Token in the header for authentication. The method I am using to make the HTTP request is as follows: var config = { heade ...

error encountered when working with date arrays in JavaScript

I find myself perplexed by this particular issue. Although the following code snippet appears to function correctly, it exhibits some peculiar behavior. var tmpcurdte = eval(dataSource[i].startDate); tmpcurdte.setDate(tmpcurdte.getDate() + 1); while (tm ...

The value of a variable remains constant even when it is assigned within a function

I developed a dynamic image slideshow using HTML and JS specifically for the Lively Wallpaper app. This app offers various customization options, which are stored in the LivelyProperties.json file along with input types such as sliders and text boxes. To ...

Tips on handling multiple text field validation in material-ui for react?

Currently, I am working on developing a form using Material-UI and React.js where I need to validate two TextField components. My goal is to apply the same error and textHelper props to both TextFields. Below is a snippet of my code for reference. Any sugg ...

Adjusting the OrbitControl target in a React environment

I attempted to create a model using react-three-fiber and react-drei, but the OrbitControl target setting is causing it to appear too high. import React, { useRef, useState, Suspense, useEffect } from 'react' import { Canvas, useFrame, useLoader, ...

Utilize puppeteer by passing a function inside page.waitForFunction() for efficient automation processes

Below is the code I am using: function checkDataRefresh(pastAvgGain, currentAvgGain) { if (pastAvgGain !== currentAvgGain) { return true; } else { return false; } } async function fetchInformation(pair, page) { let pastAvgGain = C.AVG ...