How to align the horizontal title of the yAxis in HighCharts

I have two charts with different yAxis titles. I am trying to align the titles horizontally to the right side of the chart (on the left side of the Y line).

However, the alignment only seems to work vertically centered. I actually need the titles to be in the middle.

Adding text-align to the style property did not achieve the desired result.

yAxis: {
    "title": {
       "style": {
          "textAlign": "right"
       }
     }
}

http://jsfiddle.net/g7kUc/

I would appreciate any suggestions on how to resolve this issue.

javascripthighcharts

Answer №1

Guess what? You'll love this - there is no documented option for "textAlign" under the style property, but rather under the title property. Check out this example: http://jsfiddle.net/g7kUc/1/

    yAxis: {
        "title": {
            "text": "test",
            "textAlign": "right"
        }
    }

Answer №2

Here's a unique solution for customizing axis labels:

offset:25

offset:40

http://jsfiddle.net/CTPe9/

If the length of labels changes, calculate the offset based on the font and string length.

Alternatively, you can have more control over labels by:

 "labels": {
             "style": {
                 "fontWeight":"bold",
                "color": "#6D869F",
                "textAlign": "right"
            },
            "enabled": true,
            "align":"right",
            y:-60,
            formatter: function() {
                if (this.isFirst) {
                return "12345"; 
                } else {
                    return "";
                }
            }
        },

Check out this demonstration: http://jsfiddle.net/zNHhh/.

This method involves displaying only one label aligned to the right and adjusting its position using the 'y' parameter.

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

Guide on invoking an Angular 1.5 component with a button press

Having just started learning Typescript, I'm struggling to figure out how to call my Angular component "summaryReport" on a button click. Here's a snippet of my code: Let's say I have a button that should call my component when clicked with ...

javascriptjqueryangularjs

The link in the drop down select is not functioning in IE8/9. When trying to open the drop down select link, an

Could use some help with IE8 and 9 compatibility, can't seem to find a solution. This code works smoothly on Chrome, FF, and Safari. There are two dropdown menus, each with two links. Every dropdown menu has its own "Buy Now" button. Upon selecting ...

javascriptjqueryinternet-explorer-8internet-explorer-9window.open

Delay the v-alert display after an item is added to the array basket using setTimeout

here is my custom rightTableMenu template <template> <div> <h1 align="center">{{ title }}</h1> <v-alert type="info" icon="mdi-emoticon-sad" v-if="basketStatus"> Empty Basket, please add some to basket < ...

javascriptvue.jsvuetify.jssettimeout

Consolidating multiple inputs into a single saved value

How can I combine three input values into one input field using onchange event in JavaScript? <script type="text/javascript"> function updateInput($i){ $('updateval').val($i); } </script> <input type="text" onchange="updat ...

javascriptjquery

What is the method to invoke a function within a factory in angularjs by using a string parameter?

I have a complex logic that I want to encapsulate in an AngularJS factory for easy use with dependency injection. The challenge is that the logic is dynamic, so I don't know in advance what functions will be available. What I have is a string represen ...

javascriptangularjsangularjs-serviceangularjs-factory

Switch website address without redirecting via JavaScript

I am seeking information on how to update the URL without a full page reload, similar to the functionality seen on this website . When clicking on tabs, the URL changes seamlessly without refreshing the entire page. While some sources suggest that this m ...

javascriptjqueryajaxhttp-redirect

Tips for implementing autocomplete with tags in Jquery

I have a drop-down with autocomplete functionality, and I am attempting to add tags to the list. When I populate the availableTags array and run the project, everything works fine. File.JS var availableTags = []; $(document).ready(function(){ $(function() ...

javascriptjquery

Having trouble retrieving values from my EXPRESS / NodeJs response error message: [String: 'Error: Request resulted in an error code: 404'

I have been attempting to retrieve values from my express response error. When I use console.log on the error like so... app.use(function(err, req, res, next){ console.log(err) }); The content displayed in the console is as follows: [String: 'E ...

javascriptnode.jsexpress

View the picture directly on this page

Currently, I am in the process of creating a gallery and I would like the images to open on top of everything in their original size when clicked by the user. My expertise lies in HTML and CSS at the moment, but I am open to learning JavaScript and jQuery ...

javascriptjqueryhtmlcss

The issue of VueRouter malfunctioning in history mode within Wordpress

I have integrated Vue into my Wordpress theme, but I am facing an issue with the router when setting mode: 'history'. The site goes blank and even after trying to configure the .htaccess file, nothing seems to work. My project is located in the V ...

javascriptwordpress.htaccessvue.jsvue-router

What is the process for pulling out a specific JSON element based on a condition?

I am working with a JSON object that looks like this: "links" : [ { "rel" : "first", "href" : "http://localhost:8080/first" }, { "rel" : "self", "href" : "http://localhost:8080/self" }, { "rel" : "next", "href" : "http://loca ...

javascriptjson

Substitute the colon in JavaScript prior to submitting the form

I am currently working on a text input search field where I want to automatically add an escape backslash to any colon entered by the user. Below is the code snippet I have implemented so far: <form role="form" action="..." method="get"> <div ...

javascript

Utilizing JavaScript and PHP to dynamically load HTML content on a webpage

Below is the code snippet I'm working with: <?php if ($x == 1){ ?> <b>Some html...</b> <?php } else if ($x==2){ ?> <b> Other html...</b> <?php } ?> Now, I want to create two links (a ...

phpjavascriptjqueryhtml

Implementing automatic value setting for Material UI slider - a complete guide

I am working on developing a slider that can automatically update its displayed value at regular intervals. Similar to the playback timeline feature found on platforms like Spotify, Soundcloud, or YouTube. However, I still want the slider to be interactive ...

javascriptreactjsmaterial-ui

What is the best way to display a Bootstrap toggle?

I am facing an issue with a Bootstrap toggle in a Handlebars template. When the page initially loads, the toggle is visible, however, after re-templating the Handlebars template that contains the toggle, it disappears. Before Re-Template: Initial code : ...

javascriptjquerycsstemplatestwitter-bootstrap

Issue with Retrieving a particular table from SQL Server using mssql in javascript ('dbo.index')

I am currently experiencing an issue with trying to access a table named dbo.Index from SQL Server in my node js express application. Unfortunately, whenever I attempt to do so, the operation fails and returns no data. Below is the code snippet in questio ...

javascriptnode.jssql-serverexpressnode-mssql

Why doesn't the div click event trigger when the mouse hovers over an iframe?

My dilemma involves a div element with a click event. When the div is positioned over an iframe area (closer to the user than the iframe), the click event fails to trigger. However, if the div is located elsewhere and not above the iframe, the click event ...

javascriptjqueryhtmlcssiframe

Incorporate the feedback received from the user in the previous trial as a prompt for the next

I am currently working on developing an experiment using the JSPsych JavaScript package. The main goal of my experiment is for participants to input a letter in a survey-text trial, and then have that same letter presented back to them as a stimulus in the ...

javascriptjspsych

Unlocking the power of promises: How Node.js excels at handling

I'm facing a situation where my controller code is structured like this. const Users = require("../models/users"); class UserController() { getUserById(req, res) { const id = req.params.id; const users = new Users(); ...

javascriptnode.jsexpress

What is the proper way to encode URL parameters for a REST API request?

When working on a REST API call, I needed to create some URL parameters using Angularjs 1.4.2. To achieve this, I utilized a form to pass the parameters to a service function which handles building the parameters and making the $http.post call to the API. ...

javascriptangularjsjsonurl-parameters