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

Launch the sidebar window using jQuery

I've been attempting to create something similar to this. However, I'm having trouble replicating it exactly. What I've attempted I've managed to create a replica, but the issue is that the buttons are fixed. Could setting the left ...

Cycle through the list and populate the table with the data

My attempt to clarify this explanation is my best, as articulating exactly what I am trying to achieve is quite challenging: Initially, I have a list of names: { "Items": [ { "Id": 0, "Name": "Robinson" }, ...

Don't forget to retain the checkboxes that were chosen in the

I am looking for a solution to a specific scenario. When I open a modal box and check some checkboxes, I want those same checkboxes to be selected the next time I open it. Below is an example of my code. Main Controller modal function function openModa ...

A guide on updating a boolean field in the database using ajax

Here is a piece of my html code: <form action="" method="post"> {% csrf_token %} {% if donate.is_taken == False %} <br> <button type="submit" class="btn" name="taken_or_not" ...

Popups generated on the fly without any triggers from links

I'm populating a listview with items from localStorage. When a user clicks on a list item, a corresponding popup should appear. I already have a working solution where the popups are displayed upon request. However, this time I am dynamically adding t ...

What is the best way to access the form button inside a div element?

Here is the code snippet for my form: <form accept-charset="utf-8" action="https:example.com" method="get" name="test"> <div class="classy"><input type="button" class="buttonE ...

Is there a way to include two functions within a single ng-click event?

Is it possible to incorporate two functions in a single ng-click event? Below is the code snippet: <button class="cButtonSpeichern" ng-click="saveUser()">Speichern</button> In addition, I would like to include this function as well. alert ...

Encountering difficulties while attempting to import a module in Next.js

My attempt to import the Zoom Web SDK module into my Next.js project encountered an error due to the undefined window object. Simply trying to import the websdk module resulted in this unexpected issue https://i.stack.imgur.com/NDRoC.png I am using Next ...

The error message regarding pdf.worker.min is stating that the use of 'import' and 'export' is limited to within module code and cannot be used outside of it

Upon attempting to deploy a build to Vercel, I encountered the following error message: Failed to compile. static/media/pdf.worker.min.50acc843.mjs from Terser x 'import', and 'export' cannot be used outside of module code ,-[18:1 ...

The three.js pointLight has been updated from version 67 to version 68

There appears to be a change in the interaction between a pointlight and a plane from version r.67 to r.68. I am currently studying three.js by following along with a book that is a year old. I have simplified the tutorial example to include just a plane, ...

Having trouble getting Javascript to reveal hidden elements based on their class

I am having some trouble making specific fields in a form appear based on the selection made from a dropdown menu. Below is a simplified snippet of my code, which should change the display from 'none' to 'block'. Can you help me figure ...

Update the JavaScript and CSS files following an AJAX request with $.get

I am encountering an issue where my global CSS and JS files contain all the necessary definitions, but when I load new HTML blocks via AJAX $.get, these new elements do not receive the correct CSS/JS definitions. Is there a convenient way to refresh the ...

When refreshing, the useEffect async function will not execute

Upon page load, the getImages function is intended to run only once. After refreshing the page, both tempQuestionImages and questionImages are empty. However, everything works perfectly after a hot reload. I am utilizing nextJs along with Firebase Cloud ...

Validating a particular value using Regex in React Formik

First, I need to ensure that the field is validated for any characters not included in this set: /[ùûüÿ€’“”«»–àâæçéèêëïîôœ]/. If a user enters a character outside of this set, I want Yup to trigger an error message. Secondly, I ...

What is the best way to create a button with this functionality?

In the form that I have created, it is opened in a bootstrap modal style. This form contains a button that, when clicked, triggers an alert box to appear. The code snippet used for this functionality is as follows: echo "<script>"; echo "alert(&apos ...

What is the best way to efficiently set up a scrolling text ticker for repeated use?

I am currently utilizing GreenSock/TweenMax for the creation of scrolling text, inspired by the design seen on this webpage: If you're interested in learning more about Greensock and its capabilities, take a look at their documentation here: While I ...

How can you effectively utilize Selenium to web scrape a webpage featuring collapsible fields?

Have you checked out this website - ? I'm currently working on extracting fixture data from it, such as competition names, team names, and dates. Although I have a scraping solution in place, the challenge lies in dealing with collapsible competition ...

Adding data to each span and div using JavaScript is a simple task that can be achieved easily

What is the best way to add information to each span and div element using JavaScript? $(document).on("click",".selection-state",function(){ stateid = $(this).attr("rel"); $("#my_tooltip").html(data); } e ...

Discover the new features of Next.js 13: Learn how to efficiently extract parameters from URLs using userParams, and seamlessly pre-render components at build time

Currently, I am diving into the latest version of next.js 13.4 and have set up a page with the route /notes/[note]. To extract the note parameter from the URL, I am utilizing import { useParams } from 'next/navigation'. In addition to this, I wa ...

`The height attribute of the textarea element is not being accurately adjusted`

When I tried to match the width(178px) and height(178px) of my table to the width and height of a text area upon clicking a button, I encountered an issue. While setting the width works perfectly fine, the height is being set to only 17px. It seems like ...