Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph.

Check out my code on FIDDLE LINK.

I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the graph does not appear.

$(function () {
    var a, b, x, j;
    a = -9;
    b = -9;

    if (a > b) {
        x = a;
        j = b
    } else {
        x = b;
        j = a
    }


    alert("X is " + x);
    alert("Y is" + j);



    $('#container').highcharts({
        chart: {
            type: 'bar',
            backgroundColor: null
        },
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: false,
        },

        title: {
            text: ''
        },
        xAxis: {
            categories: ["", "", ""],
           
        },
        yAxis: {
            min: j - (j * 5 / 100),
            max: x + (x * 5 / 100),

           
            endOnTick: true,
            tickPixelInterval: 340,
            maxPadding: 0.25,
            title: {
                text: ''
            },
            labels: {

                formatter: function () {
                    if (j - (j * 5 / 100) > 1000000) {
                        return Highcharts.numberFormat((this.value) / 1000000, 0, '', ',') + 'M';
                    } else if (j - (j * 5 / 100) > 1000) {
                        return Highcharts.numberFormat((this.value) / 1000, 0, '', ',') + 'K';
                    } else {

                        return Highcharts.numberFormat((this.value), 0, '', ',');


                    }
                },
                x: 6
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: ' ',
            data: [a]
        },

        {
            name: ' ',
            data: [0, b]
        }, ]
    });
});

Answer №1

Check out a functional demo

To improve it, simply eliminate:

min: j-(j*5/100),
max: x+(x*5/100)

within the yAxis: { --- some options --- }

Experiment by setting one value as positive and the other as negative for both a and b.

I trust this will be beneficial.

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

exploring XML documents

With around 250,000 XML files, each named with a UUID, I am looking for the most effective way to perform a full text search on these files and identify the UUID of the matching ones. What would be the optimal approach for indexing them in a nodejs environ ...

Karma is reporting an error with TypeScript, saying it cannot locate the variable 'exports'

Currently, I am in the process of mastering how to write Unit Test cases for an angular project coded in Typescript. To facilitate this, I have opted for utilizing Karma and Mocha. Below lays out the structure of the application: Project/ ├── app/ ...

Having trouble with AJAX file uploading in CodeIgniter?

In my codeigniter admin panel, I am working with a table called games which includes an image that I need to upload using ajax. However, I am encountering an issue where the image is not getting uploaded and instead I receive an error stating "no file sele ...

Using Vue JS to showcase array data in a dropdown menu with Bootstrap-vue

Currently, I have an array of JSON data structured like this: loggers = [{ "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'], "level": "WARN", "logger": "com.test1", "status": "success" }, { ...

Struggling with getting my Vue-CLI app deployed on Heroku

After diligently following all the steps outlined in this tutorial: https://codeburst.io/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8 I encountered an error message when checking my app at: The error indicated: Method Not Allowed ...

The CSS display:block property isn't functioning as intended

I'm currently working on a contact form using CSS and HTML, but I'm having trouble getting the boxes to display properly in a 'block' form (display:block). HTML: <section class="body"> <form method="post" action="index.php ...

The POST request from the form is returning a null value

I am currently facing an issue with using post in Express and BodyParser to insert data from a form in an EJS file into MySQL. The data keeps returning null, indicating that it is not being parsed correctly from the form to the backend. Can anyone offer as ...

Database kendo ui web does not support the implementation of CRUD operations

I have been utilizing the Kendo grid to display employee data and enable create, update, and delete functionalities. While the read operation is functioning properly, I am facing issues with the remaining operations reflecting back to the database. Below ...

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors. Here are the style imports in my App.js: import &q ...

Enhance your HTML rendering with Vue.js directives

Check out this cool code example I created. It's a simple tabs system built using Vue.js. Every tab pulls its content from an array like this: var tabs = [ { title: "Pictures", content: "Pictures content" }, { title: "Music", c ...

Retrieving posts from a Facebook page by utilizing the FB API

Throughout the previous summer, I managed a website (not my own) that pulled in posts from its corresponding Facebook page and displayed them on a designated page. I utilized an application token for this process, but now it no longer functions due to the ...

Issue with ng-repeat causing HTML table data to not appear

Trying to create a Flask web app, I encountered an issue while attempting to display tabular data on my webpage using AngularJS. Despite using ng-repeat to iterate through the data, it doesn't seem to work and no errors appear in the console. Can anyo ...

update the value of a global variable within a jQuery function

Currently, I am facing an issue with a global variable in jQuery. Here is my code snippet: var namep = ''; $("#page2").bind('pageshow', function (event , data) { var perso = $(this).data("url").split("?")[1]; perso_name = perso. ...

The Parse-JS-SDK currently doesn't support using the objectId in the matchesKeyInQuery method

javascript "parse-server": "^2.6.3", "parse": "^1.10.0", In my database, there are three tables: Member, Circle, and MemberCircle. The Circle table has a pointer field called member, which indicates who created the circle. On the other hand, the Memb ...

Converting string patterns to regular expressions

I am utilizing mongodb to store data. My requirement is to save complete regular expressions as strings: { permissions: [{ resName: '/user[1-5]/ig', isRegex: true }] } Although I am aware of the existence of the module mongoose-rege ...

What is the method for implementing a dropdown box with select and non-select checkboxes, similar to the example shown in the image, using AngularJS?

https://i.sstatic.net/CTx8K.jpg I am seeking assistance in incorporating the image below into a dropdown menu using angularjs ...

Is there a way to access a component's props within the getServerSideProps() method?

Is there a way to pass parameters to a React component and then access the values of those parameters within the getServerSideProps function of the component? I am utilizing the next framework in React JS. <Menu name={menuName} /> In this example, ...

Angular2 bootstrapping of multiple components

My query pertains to the following issue raised on Stack Overflow: Error when bootstrapping multiple angular2 modules In my index.html, I have included the code snippet below: <app-header>Loading header...</app-header> <app-root>L ...

Turn off scrolling but allow dragging on iPhone

Is it possible to disable scrolling but still allow dragging on the <canvas> element in iPhone? Currently, when you drag the <canvas>, the entire page also scrolls, which is not the desired behavior. <meta name="viewport" content="wid ...

The scenario of two users simultaneously gaining control access in socket.io creating a race condition

There is a need to ensure that only one user at a time is notified for an available room. I am implementing a solution to prevent multiple users from being notified simultaneously for the same room. socket.on('Check', function (room) { io.in(r ...