What is the best way to arrange labels in stacked bar charts using jqPlot?

I'm having trouble aligning the labels within the stacked bar chart. Is there a way to center them within each bar? In the image below, most labels seem to be centered, but there is one that is at the bottom. I've tried adding margins in the CSS, but it doesn't work. Adjusting the x/ypadding in the pointLabel option only moves the labels horizontally, not vertically.

var s1 = [31, 10, 20, 44],
                s2 = [15, 4, 7, 16],
                ticks = ['May', 'June', 'July', 'August'];

            $.jqplot('graph_pnl2', [s1, s2], {
                stackSeries: true,
                seriesColors:['#73C774', '#C7754C'],

                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {fillToZero: true},
                    pointLabels: { show: true, location: 'e', xpadding: 25, ypadding: 25},
                },

                legend: {
                    show: false,
                    placement: 'insideGrid'
                },
                axes: {

                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    },
                    yaxis: {
                        pad: 0,
                        tickOptions: {formatString: '%d'}
                    }
                }
            });

Answer №1

Did you happen to notice the absence of the 10 value column in the second stacked column? It seems like there might be a property being used incorrectly. I suspect it's the "pad: 0" on the yaxis property. It may be best to remove it or comment it out.

        yaxis: {
            //pad: 0,
            tickOptions: {formatString: '%d'}
        }

Check out the code on JSFiddle here.

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 the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

The jQuery AJAX function executing twice upon click

I've encountered an issue while attempting to make two Ajax calls on a single page using jQuery. The first Ajax call executes successfully and generates the desired results. However, the second Ajax call is meant to be triggered by clicking a button b ...

Find those lone nodes in the DOM and bid them adieu! The lingering DOM nodes causing memory leaks

Is there a way to efficiently identify and remove all orphan nodes from the DOM in order to prevent memory leaks? I am facing issues with orphaned nodes in my large application, which contains numerous controls that are not attached to the document and ar ...

Divide data into an HTML table and merge it with header information

My HTML form contains an interactive HTML table where users can add/delete rows. I am sending this data to a Google Sheet and need to store the row information with corresponding header details. Each time a user submits the form, a new row is added to the ...

Struggling with sending mail using javascript and ajax?

Having trouble sending emails through my website using AJAX. It seems like the data is not being utilized or sent properly. I managed to get it working some time ago, but haven't checked on it since and now it has stopped functioning for some unknown ...

Patterned background with a gradual increase

Having trouble with a CSS challenge. I'm trying to create a black bar that displays every X pixels, incrementing by 10px each time it appears. For example, the first bar would appear at 100px, the second at 110px, and so on. I've been experimen ...

Emulating a form submission using a jQuery AJAX request

I am working with a block of code that defines div elements as well as their click callbacks. In order to prevent repetition in my code, I am looking to reuse it. Currently, the callbacks are utilizing $.post calls to interact with the server, but on this ...

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

Rendering JSON Data in JavaScript using Table Pagination

Currently, I am working on rendering JSON data from a URL onto a table. My challenge is to display only 10 rows per page and I'm seeking guidance on how to achieve this. Below is the code snippet that I am using for rendering the data: const url = " ...

What is the best way to set the width of a nextjs Image using CSS styles

Do you think it's more beneficial to use 'next/image' rather than the traditional img tag? If so, why? I am trying to display an image by specifying width and height in styles using a class called 'img', like this... <img class ...

Challenges with altering the height of a div through animation

HTML <div class="blok1" ></div> <div class="blok2"></div> <div class="blok3"></div> CSS .blok1 { background-color: green; border-bottom-left-radius:15px; border-bottom-right-radius:15px; h ...

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

Implementing Dynamic CSS Styles in AngularJS

Essentially, I am facing a challenge on my page where a control needs to toggle two different elements with two distinct CSS classes upon being clicked. While I have successfully managed to toggle one of the controls, the other remains unchanged. Here is ...

More efficient methods for handling dates in JavaScript

I need help with a form that requires the user to input both a start date and an end date. I then need to calculate the status of these dates for display on the UI: If the dates are in the past, the status should be "DONE" If the dates are in the future, ...

Revamp the website's design

I am looking to revamp the color theme of my website with just a click of a button. Can someone provide me with a link to a reference website where I can get some inspiration? ...

Navigate the page by scrolling the absolute positioned div

Is it possible to make the fancybox modal scroll with the page using fancybox 2? I want it to move along with the content rather than being fixed in the center with a max-height restriction. How can I achieve this? $('.fancybox-open').fancybox({ ...

When a child is added to a parent in Angular UI Tree, it automatically appears in all parent nodes as well

I've been experimenting with the drag and drop feature of Angular UI Tree, and I've encountered a puzzling issue. The JSON data is fetched from my services. Upon receiving it in my controller, I need to format it correctly by adding an empty arra ...

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

Choose the elements that do not possess a specific class as their ancestor

I'm facing an issue with my HTML code. Here's what it looks like: <div class="asd"> <audio src="..."> </div> <audio src="..."> <audio src="..."> <audio src="..."> My goal is to select all of the audio el ...

Navigate the conversation within the dialog without affecting the content below

Is it possible to have a dialog with scrollable content on top of a page that is also scrollable, but when trying to scroll inside the dialog using the mouse wheel, only the dialog body scrolls and not the page below it? What approach can be used to accom ...