Highcharts: Limiting the yAxis values to a maximum of two decimal places

Here is the code for my graph, which retrieves data from a PHP page and adds some series:

$('#grafico_1').highcharts({

chart: {
    type: 'line',
    zoomType: 'xy',
    animation : false,
    events: {
    selection: function(event) {

        if(event.resetSelection){

            setTimeout(function(e){

                var chart = $('#grafico_1').highcharts();
                var extreme = chart.yAxis[0].getExtremes();

                var mio_min = parseFloat(proprieta_temperatura_aperto[34]);
                var mio_max = parseFloat(proprieta_temperatura_aperto[35]);

                if(extreme.dataMin < mio_min){
                    mio_min = extreme.dataMin;
                }
                if(extreme.dataMax > mio_max){
                    mio_max = extreme.dataMax;
                }

                chart.yAxis[0].setExtremes(mio_min,mio_max);

                $("#temperatura_min_max_rilevato").html("Min "+extreme.dataMin+"°C - Max "+extreme.dataMax+"°C");
                //console.log("zoom - ");

            }, 10);
        }else{

            setTimeout(function(e){
                var chart = $('#grafico_1').highcharts();
                var extreme = chart.yAxis[0].getExtremes();
                $("#temperatura_min_max_rilevato").html("Min "+extreme.dataMin+"°C - Max "+extreme.dataMax+"°C");
                //console.log("zoom + "+JSON.stringify(extreme));
            }, 50);

        }

    }
},
},

credits : {
   enabled : false
},

title: {
    text: 'Today\'s Graph'
},

xAxis: {
    type: 'datetime',
    title: {
        text: false
    }
},

yAxis: [
   {
        title: {
            text: false
        },
        labels: {
        format: '{value}°C',
    },
        max : parseFloat(proprieta_temperatura_aperto[35]),
        min: parseFloat(proprieta_temperatura_aperto[34]),
    },
    {
        title: {
            text: false
        },
        min: 0,
        max : 1,
        ceiling:1,
        floor : 0,
        opposite: true,
        tickInterval: 1,
        labels: {
            formatter: function() {
                if (this.value == 0 || this.value == 1){
                    return this.value;
                }else{
                    return null;
                }
            }
        }
    }
],

tooltip: {

    formatter: function() {

        var s = '<b>Data</b> '+Highcharts.dateFormat('%H:%M:%S', this.x) + '<br><b>Temperature</b> ' + this.y + '°C<br/>';

        $.each(this.points, function(i, point) {

            if(point.series.name != "Temperature"){
                s += '<b>' + point.series.name +'</b> : '+ point.y + '<br>';
            }

        });

        return s;
    },
    shared: true,
    backgroundColor: '#FCFFC5'
},

plotOptions: {
   line : {
       turboThreshold: 0,
    },
    series: {
        animation: false,
        marker: {
           enabled: false
        }
    }
},

series: []

});

The issue arises when zooming in on the graphs, causing y-axis values to display with more than two decimal places. I would like to limit the maximum number of decimal places to two.

I believe I need to adjust the format field in the yAxis section:

yAxis: [
    {
    labels: {
       format: '{value}°C',
         },

However, I am unsure how to make this change.

Answer №1

It is recommended to format the value as {value:.2f}, following the guidelines provided at this link

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

Discovering nested routes in Ember.js through search functionality

I am currently working on implementing a search functionality within a nested route that shares a model. Below is an example of my code: The "Products" and "Search" functionalities return a JSON response. Router Market.Router.map -> @resource &a ...

Choose the currently active md-tab within the md-dialog's md-tab-group

I need to create a dynamic md-dialog with an md-tab-group that has two tabs. The md-dialog should open based on the button clicked, displaying the corresponding tab content. The initial template where the md-dialog is triggered: <button md-button class ...

Tips for adding an array to an array of objects with AngularJs

I'm facing an issue with the array structure in my code. Here's what I currently have: $scope.arrayList=[{FirstName:"",LastName:""}]; $scope.Address=[{address:"",PhoneNumber:""}]; What I want to achieve is to push the $scope.Address array into ...

How can I ensure that the scripts returned in HTML via AJAX are executed when using $.load()?

I have been trying to make an AJAX call and receive a partialView which contains some script that needs to be executed. I did some research and learned about the "eval" method, but then discovered that the $.load() method should handle this for me. Howeve ...

Assign the Firebase token to the JavaScript cookie value

Can a cookie store a token value? In my setup with js-cookie, Firebase auth/firestore, and Next.js, I am setting my cookie within the handleUser function like this: const handleUser = async (rawUser) => { if (rawUser) { const user = await fo ...

Error: The variable usersWithSecrets has not been declared and therefore is not defined within the current scope. This issue

Despite my best efforts, I keep encountering the same error repeatedly: ReferenceError: D:\Secrets - Starting Code\views\submit.ejs:8 6| <h1 class="display-3">Secrets</h1> 7| >> 8| <%usersWith ...

Is there a way to display a PHP error message while submitting the form asynchronously?

Utilizing phpMailer in combination with AJAX to send emails. The objective is to send the email and then showcase any error messages from submit.php on contact.php Currently, every submission displays "Message sent" even if it was not actually sent. Con ...

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...

The React OnClick and onTouchStart event handlers are functioning properly on a desktop browser's mobile simulator, but they are not responsive when

I added a basic button tag to my next.js main page.js file that triggers an alert when clicked. Surprisingly, the onClick function is functional on desktop browsers but fails to work on any mobile browser. "use client"; export default function P ...

Encase an asynchronous function inside a promise

I am currently developing a straightforward web application that manages requests and interacts with a SQL database using Express and Sequelize. My issue arises when I attempt to call an async function on an object, as the this part of the object becomes u ...

Exploring the depths of Master-Detail functionality with Ionic and Angular, unlocking nested

Hey there! I'm currently working on a project using Ionic and Angular, where users can view events and see all the attending participants along with their information. To achieve this, I implemented a master-detail pattern within another master-detail ...

Creating a sticky menu in a column using affix with a CSS bootstrap list-group

My goal is to develop a sticky menu utilizing CSS Bootstrap affix and the list-group menu. I have successfully implemented most of it, except for one issue when the user scrolls down. Upon scrolling down, the menu expands to fill the entire width of the ...

Is there a way in JavaScript or jQuery to display text from an array and switch to the next piece of text in the array with the click of a button?

I currently have an array containing 13 items, all of which are text. To display the text from the array, I am using: document.write(arrayname["0"]); However, I would like to implement a functionality where users can click a button to fade out the curren ...

Incorporate communication between the front-end and backend

I encountered an error while attempting to import the getUser function in my backend code. The actual function is located in the frontend at ../utils/auth. How can I successfully import between front-end and backend? Or might there be another issue at pla ...

Is there a way to verify if an email is already registered within a MERN stack application

I am in the process of creating a registration form and need to verify if an email already exists within the system. Below is the React code snippet showcasing the structure for better understanding. In the schema, emails are defined as unique. AuthContr ...

Struggling with showcasing Trips in my React Native project and looking for guidance on the best approach to implement it beautifully

API: app.get('/trip', async (req, res) => { try { const employeeId = req.query.user; const empId = new ObjectID(employeeId); // Retrieving Fleet associated with the driver's ID const fleet = await Fleet.findOne({ a ...

Issue with Vuetify carousel not resizing to fit the entire width and height

I am looking to create a carousel that spans the entire width and height of a viewport in my Vue.js 2 project using Vuetify. Below is the code I have so far: <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500, ...

Proper techniques for testing an AngularJS Controller Function

Recently, we integrated jasmine tests into our AngularJS project and I have a query: We are looking to write tests for this controller function: $scope.deleteClick = function () { $scope.processing = true; peopleNotesSrv.deleteNote($scope ...

Retrieve a specific key value from a dictionary within a Flask function by employing JavaScript

I'm currently working on a feature where a user can input something in a search field, and upon submitting, the script should send a request to a Flask function using JavaScript. The response data should then be loaded accordingly. However, I've ...

I'm experiencing trouble with Shopify as it appears to be failing to execute

I have been attempting to incorporate a tracking pixel into my project. Thus far, I have tested the code in various environments, both with and without wrapping it in a function and deploying it using window.onload. If you would like to see the implementa ...