When all y values are zero, Highcharts.js will shift the line to the bottom of the chart

Is there a way to move the 0 line on the y axis to the bottom of the chart when all values are 0? I attempted the solution provided in this post without success.

Highcharts: Ensure y-Axis 0 value is at chart bottom

http://jsfiddle.net/tZayD/58/

$(function () {
        $('#container5').highcharts({
      chart: {
                    type: 'column'
                },

                xAxis: {
                    categories: ['mon','tue','wed','thu','fri','sat']       
                },
                yAxis: {
                    title: {text: ''},
                    min:0
                },
                series: [{
                    name: 'Total Appts',
                    data: [0,0,0,0,0,0]
                }, {
                    name: 'Confirmed',
                    data: [0,0,0,0,0,0]
                }, {
                    name: 'no-shows',
                    data: [0,0,0,0,0,0]
                }]
            });          
    })

Answer №1

If you want the 0 "yValue" to be positioned at the bottom of the chart instead of in the middle, ensure that you also adjust the yAxis.max value accordingly. Choose a value that sits within your expected range.

To eliminate gridlines and only display the 0 "yValue" line, simply set the gridLineWidth to 0.

For example:

        yAxis: {
            title: {text: ''},
            min:0,
            max: 10,
            gridLineWidth: 0
        },

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

Can anyone recommend a high-quality jQuery lightbox replica?

Key Features Needed: Customizable with CSS Capable of handling forms, not just images Extensively documented Please provide any recommendations and suggestions for suitable options. Thank you in advance ...

Add delayed event listeners to embedded AJAX request beyond function boundaries

I'm working on developing a custom AJAX method extension named getApi that automatically includes my authentication bearer token in the request header. In my code, there is a function called getToken() which retrieves the token either from sessionSto ...

Custom-designed scroll bars that perfectly match the size of the content window

Currently attempting to adjust the layout of my webpages in order to enable scrolling for dynamic content across various pages. I have made adjustments to the header, footer, and sidebar elements, but am facing issues with implementing proper overflow prop ...

What is the best way to bring an image into your nextjs project?

I have a question about importing images into my Next.js project. I created an array of objects and want to import an image stored in a folder on my laptop, specifically in the src folder rather than the public folder. How can I properly achieve this in ...

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet: class Todos extends React.Component{ construc ...

Executing a file upload using ng-click="upload('files')" within Selenium Webdriver

Is it possible to automate a file upload when the HTML code does not include an < input type='file' > instead, uses a link <a ng-click="upload('files')"> File Upload </a> Clicking this link opens a file selector f ...

It is imperative that the 'Access-Control-Allow-Origin' header value in the response is not set to '*' when the request's credentials mode is 'include'

I am currently working on establishing a connection using socket.io between Angular and a Node.js Server Within Angular, I have set up a new socket by importing socket.io-client and connecting it as follows: import * as io from 'socket.io-client& ...

SVG Mask not functioning properly with SVGs created in Illustrator (in all web browsers)

Alright, let's get to it - I've got a couple of SVGs here. The first one is a blue circle and the second one is a map of the United States. (Both of these were created in Illustrator) Here's what I want to do: I want the map to serve as a ...

Can you guide me on how to access an Angular route using a URL that includes query parameters?

Within my current development project, I have implemented a user profile route that dynamically navigates based on the user's _id. This means that when a user accesses the page, their _id is stored in localStorage and then used to query MongoDB for th ...

Challenges with Adjusting Background Opacity in CSS

My text has a white background with an opacity of .3, but it's affecting the foreground due to CSS repositioning. Even though the HTML is in a different division, I struggle with certain aspects of CSS and would appreciate guidance from those more exp ...

Error occurred during SCSS rendering process: [Internal Error: Unable to locate or read the specified file.]

When trying to create a website using scss, I encounter an error every time I save the scss file. Strangely, after saving it multiple times, the file will render properly. Although this issue is minor, it really bothers me. I have searched for a solution ...

JavaScript : Retrieve attributes from a JSON object

Situation : I have a JSON object with multiple properties and need to send only selected properties as a JSON string to the server. Approach : To exclude certain properties from the JSON string, I utilized the Object.defineProperty() method to set enumera ...

What is the best way to confirm the validity of an email address?

With jQuery Tag-It, I want to validate the tag value as a valid email address. How can I achieve this validation using tag-it? ...

Utilizing the Vue feature of dynamic route naming within a component's function

Currently, I am working on creating a dynamic view rendering using Vue and Laravel. However, I am facing difficulty in understanding how to pass the dynamic parameter to the component function. Router.map({ '/cms-admin/:page': { comp ...

Is there a way to have a border specifically on the top side?

Is there a way to have the border show up only on the top when hovering over it? Here's the current code I'm using: a:hover { border-top: 3px white; border-style: solid; } Even though this code is in place, the border still appears on ...

Intriguing flashing dark streak, reminiscent of a boundary within NextJS

I have recently encountered an unexpected issue with my full-width video header that worked perfectly on multiple pages before. Strangely, a thin black line has appeared around the bottom and right side of the div (.header) containing the video, even thoug ...

You are required to select one of the two radio buttons in order to proceed with the validation process

To prevent the user from proceeding to the next page, validation is necessary. They are required to select one of the radio buttons, etc. <div class=""> <div class="radiho" style="display: block"> <input type="checkbox" name="sp ...

Guide to customizing the Autocomplete jQuery plugin to mimic Google's result replacement feature

I have implemented the jQuery plugin Autocomplete like Google for two form fields - foo and bar (which is dependent on the value of foo): $(function() { $("#foo").autocomplete({ minLength: 3, limit: 5, source : [{ u ...

Troubleshooting: Dealing with ng-click and invalid functions

Prior to resolving the issue, I encountered a component (within an HTML template) containing a ng-click that was invoking a nonexistent function. Is there a method to enable a strict mode (similar to 'use strict' in JS) or something equivalent t ...

Why Does React Material-UI Switch Styling Keep Changing Sporadically?

Currently, I am trying to integrate a switch component from MUI into my code. Strangely enough, upon the initial page load, the switch appears exactly as it should - identical to the one displayed on the MUI site. However, upon reloading the page, it under ...