Creating tick lines around a solid gauge in Highcharts is a simple process that can enhance the

I am currently working with Highcharts and have a lot of dependencies on it, so I cannot use other plugins.

$(function () {

    var gaugeOptions = {

        'chart': {
            'type': 'solidgauge'
        },

        'title': null,

        'tooltip': {
            'enabled': false
        },

        'pane': {
            'center': ['50%', '50%'],
            'size': '100px',
            'startAngle': 0,
            'endAngle': 360,
            'background': {
                'backgroundColor': '#EEE',
                'innerRadius': '90%',
                'outerRadius': '100%',
                'borderWidth': 0
            }
        },

        'yAxis': {
            'min': 0,
            'max': 100,
            'labels': {
                'enabled': false
            },

            'lineWidth': 0,
            'minorTickInterval': null,
            'tickPixelInterval': 400,
            'tickWidth': 0
        },

        'plotOptions': {
            'solidgauge': {
                'innerRadius': '90%'
            }
        },

        'series': [{
            'name': 'Speed',
            'data': [50],
            'dataLabels': {
                'enabled': true,
                useHTML: true,
                format: '<div ><span style="font-size:15px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
                   '<span style="font-size:08px;color:Black">%</span> <br/><br/></div>',
                borderWidth: 0

            }

        }]
    };
    debugger;

    $('#Chart2').highcharts(gaugeOptions);

});



$(function () {

    var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '50%'],
            size: '40%',
            startAngle: 0,
            endAngle: 360,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                enabled: false
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: -20,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };

    // The speed gauge
    $('#sampleChart').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 200,
            title: {

            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Speed',
            data: [80],
            dataLabels: {
                format: '<div ><span style="font-size:15px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
                   '<span style="font-size:12px;color:Black">%</span></div>',
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    }));



});

http://jsfiddle.net/mmhukqtz/

This is the chart that I am using. I would like to place ticks on the upper side of the circle similar to this image: https://i.sstatic.net/JRV3G.png

And also like this:

https://i.sstatic.net/WLfAp.png

Thanks for your help!

javascriptjqueryhtmlcsshighcharts

Answer №1

To achieve the desired outcome, it is important to create a separate pane and axis while setting the axis offset property. This value can be positive for ticks outside the pane or negative for ticks inside the pane.

Below are the configurations for the pane:

pane: [{
  size: '40%',
  center: ['50%', '50%'],
  background: {
    innerRadius: '60%',
    outerRadius: '100%'
  }
}, {
  size: '40%',
  background: null
}]

And here is the configuration for the axis:

yAxis: [{
  min: 0,
  max: 200,
  tickWidth: 0,
  minorTickInterval: null,
  labels: {
    enabled: false
  },
  stops: [
    [0.1, '#55BF3B'], // green
    [0.5, '#DDDF0D'], // yellow
    [0.9, '#DF5353'] // red
  ]
}, {
  linkedTo: 0,
  pane: 1,
  offset: 20,
  tickInterval: 10,
  minorTickInterval: null,
  lineWidth: 0,
  labels: {
    enabled: false
  }
}],

For ticks outside the pane, refer to this example: http://jsfiddle.net/key8v7mn/ If you prefer ticks inside the pane, check out this link: http://jsfiddle.net/key8v7mn/1/

Answer №2

Here is a helpful code snippet for your yAxis:

  tickLength: 5,
  tickWidth: 4,
  tickColor: 'black',
  tickPosition: 'outside',
  minorTickLength: 0,
  tickInterval: 1,

The tickInterval property will do the trick.

Check out the updated demo here: http://jsfiddle.net/8ydmc9cq/

If you set tickPosition: "inside", the ticks will appear inside. If you use tickPosition: "outside", the ticks will be positioned outside.

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

How come I am experiencing difficulty modifying the background color of ion-header using a CSS class selector within my Ionic Vue component?

Recently, I began my journey with ionic vue and started incorporating CSS with the components. I added styles in the same file like this: <style scoped> .abc { background-color: blue; } </style> I attempted to apply these style ...

cssvue.jsionic-frameworkionic-vue

Building a Dynamic Search Feature with jQuery, C#, and SQL Server Integration

Trying to implement jQuery autocomplete on dynamically generated textboxes for the first time. ASMX page code is generating results as expected, but facing issues with JavaScript autocomplete functionality. Even after debugging, the script does not call th ...

jqueryasp.netajaxdynamicasp.net-3.5

Implement Babel with node.js 6.9

It puzzles me why some folks opt to use Babel for their Node.js projects. I personally utilize node 6.9 and have no issues writing ES6 code - from default arguments in functions to arrow functions, rest parameters, and spread syntax. Do you think Babel is ...

javascriptnode.jsexpressbabeljs

Server not receiving variables from AJAX requests (All AJAX)

Recently, I made some changes in my js files and ajax-php files. Surprisingly, all AJAX functions were working perfectly on localhost but not on the server. After debugging, it was discovered that although the ajax call was successful and there were no 40 ...

javascriptphpjqueryajax.htaccess

Guide on Generating SAS Token for Azure Table Storage in a jQuery Application

I am currently working on a jQuery web application that requires read-only access to an Azure Table Storage, fetching one record at a time by passing in the PartitionKey and RowKey. To simplify my code, I have integrated the Azure Storage JavaScript Client ...

javascriptazureaccess-token

Three-dimensional.js and components of the design

Looking for advice on how to manipulate individual parts of a 3D model in Three.js. My model is made up of various components that I need to control separately. Any tips or suggestions would be greatly appreciated. Thank you! ...

jsonhtmlthree.jswebgl

What is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

javascripthtmlcss

Utilizing AXIOS and .NET 5 Web API for Managing Access and Refresh Tokens

In my React application using Redux, we are utilizing Axios to interact with our Web API. To ensure security, we have implemented JWT access tokens along with refresh tokens. The server side token generation for our Web API is based on this code: https:/ ...

javascriptreactjsaxios

Using MithrilJS to dynamically pass variables to a configuration object when invoking the m() function

I am currently facing an issue while trying to implement the jQuery FooTable plugin in my mithril app. In my component, I have a config call that looks like this: view: function(ctrl, args) { return m("table#globalConfigTable", {config: executeFooTable} ...

jquerymithril.js

What is the best way to combine multiple arrays in JavaScript?

I am working with multiple arrays: var array1 = [a,b,c]; var array2 = [c,d]; var array3 = [e,f]; I need to combine these arrays into one merged array, with the desired output as follows: result = [ace, acf, ade, adf, bce, bdf, bde, bdf, cce, ccf, cde ...

javascriptarrays

Is it possible to consolidate all HTML button functionality into a single jQuery function?

Currently, I'm in the process of developing a price calculator that adjusts the price based on the selected button. However, I'm seeking a solution where I can achieve this functionality with just one function instead of cluttering the code with ...

jqueryhtml

Adding an eventListener to the display style of a div in React: A step-by-step guide

I'm currently working on implementing a functionality in React where a Highcharts chart automatically resizes to fit its parent element whenever the parent div is shown. Unlike other libraries, Highcharts doesn't support automatic resizing when t ...

javascriptreactjstypescripthighcharts

Identify the browser dimensions and implement CSS styling for all screen resolutions

I am currently facing an issue with a function that I have created to apply CSS changes to a menu based on browser resizing and different resolutions. The problem lies in the fact that my function does not seem to be correctly interpreted by the browser. W ...

javascriptjqueryhtmlcss

Changing the source of a jQuery autocomplete dynamically without the need for conditional statements

Inputs: "Room number", "Name". The Autocomplete feature of the second input field is dynamically changing based on the value of the first input field. Is there a way to simplify my lengthy "if-else" conditions into a shorter and more automatic script? W ...

jqueryinputautocomplete

disappearing the link in a window.open popup

I have a situation where I am opening a window with the code window.open("mytest.aspx");. The issue arises when the user closes that pop-up window - I need to have the link on the parent page hidden. In essence, how can I hide the anchor link on the parent ...

c#javascriptasp.net

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

javascripthtmlnpmpaginationhandlebars.js

Acquire key for object generated post push operation (using Angular with Firebase)

I'm running into some difficulties grasping the ins and outs of utilizing Firebase. I crafted a function to upload some data into my firebase database. My main concern is obtaining the Key that is generated after I successfully push the data into the ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2

Employing live labels on a Morris Bar Chart

I'm using the Morris Bar Chart to showcase the sales of different products. To enhance user experience, I want to display dynamic labels when hovering over the bars. The data is being fetched through PHP. array('product' => $row['pr ...

javascriptphpjquerymorris.js

Explore registrations by year and month

I am currently working on coding where a record needs to be displayed based on the date (Month, Year), for instance: 12-2022. However, with the current code I have, I am unable to achieve this. Can anyone offer some guidance on what steps I should take? ...

phphtmlcsssqldate

Waiting for onAuthStateChanged in Supabase to prevent flickering when using useEffect: What's the right way to ensure the request has finished?

I have successfully implemented authentication and even included a loading state to display a loader until the state changes. However, I am experiencing flickering upon reload, which only seems to happen with Supabase. Previously, when using the Firebase v ...

javascriptreactjsreact-nativesupabase