Personalized bar graph description using Highcharts

Looking to create a unique stacked Highcharts bar chart with custom text within each bar, but currently only seeing the data number displayed by Highcharts.

Check out the fiddle here.

Here's the code snippet:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            },
            bar: {
                dataLabels: {
                enabled: true
              }
            }
        },
        series: [{
            name: 'John',
            data: [['test 1', 5], ['test 2', 3]]
        }, {
            name: 'Jane',
            data: [['test 3', 2], ['test 4', 2]]
        }]
    });
});

The goal is to show 'test 1', 'test 2' etc. within the bar chart (currently visible on the popover), rather than just displaying the data numbers like 5, 3, 2, and 2. Is there a way to achieve this?

Answer №1

Check out the interactive example here

Implement a custom formatter function:

 bar: {
            dataLabels: {            
        formatter: function(){
        return this.point.name.toUpperCase();
        },
            enabled: true
          }
        }

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 to successfully verifying the correct value in ReactJS unit tests

I recently designed a reactjs component with an onClick event that modifies text within the component. Here is the code snippet for the component: import React, {Component} from 'react' export default class SimpleComponent extends Component{ c ...

Analyzing and inserting elements into an array of objects

The following code aims to: 1) iterate through the two arrays, 2) if an item exists in both arrays, add its value to the value of the matching item in the first array, 3) if the item is found in arr2 but not in arr1, add the item to arr1. The code funct ...

Encountering a NaN result while attempting to incorporate a drop-down menu into a newly developed macro calculator

Before the calculator was functioning smoothly, but as soon as I included the activity level selection from the dropdown menu, things took a turn. The expected output is supposed to be the result of multiplying the user's chosen activity level by the ...

Why are double curly brackets used in the JSX syntax of React?

In the tutorial on react.js, a specific usage of double curly braces is highlighted: <span dangerouslySetInnerHTML={{ __html: rawMarkup }} /> Building on this, in the second tutorial titled "Thinking in react" found in React documentation: <sp ...

What is the most effective method for organizing an object by its values using multiple keys?

I'm interested in utilizing the sort method mentioned in the link but I am facing { "CYLINDER": 2986, "HYDRAULIC": 1421, "JACKS": 84, "INSTALLATION": 119, "REAR": 61, "JACK": 334, "TUBE": 1, "FEED": 114, "ASSEMBLY": 326, "DCS": 2 ...

transforming an array into JSON structure using node.js

Hello, I have a list of data that I need to convert into JSON format. Here is an example of how I want the data to look: [ { "slideName": "s0", "imageUrl": "https://s3.amazonaws.com/lifestyle345/testing/slides/cbaa5e650152a0332b494f0074985 ...

What is causing the discrepancy in functionality between these two HTML/CSS files with identical code?

In this codepen, you'll find the first example: Subpar Pen: https://codepen.io/anon/pen/jGpxrp Additionally, here is the code for the second example: Excellent Pen: https://codepen.io/anon/pen/QqBmWK?editors=1100 I'm puzzled why the buttons l ...

The directive call triggers the loading of data from MongoDB

I'm currently working on a small invoice demo application using Angular. The data is stored in a MongoDB and is called in a controller named invoiceCtrl. Here's how the controller looks: invCon.controller( 'invoiceCtrl', ['$http&a ...

What is more costly in terms of performance: toggling the visibility of a DOM node or adding/removing a DOM node?

When it comes to calling, which is the more costly operation? Displaying and hiding a DOM node Creating and deleting DOM nodes Let's assume we only have one or a few (less than 5) nodes that require manipulation, and the application is running on a ...

AssertionError [ERR_ASSERTION]: The value of undefined is not equal to 390 in the GitLab

I'm a bit confused about the AssertionError [ERR_ASSERTION]: undefined == 390 in Gitlab. What I need is: The sumSalaries(obj) function, which should take an object obj as a parameter where the field names correspond to the employee's name and t ...

How to dynamically change the border-top color of an <a> tag in a menu using a jQuery loop

I am interested in adding a colorful border-top to my menu using jQuery. I know this can be achieved with HTML by including style="border-top-color: red;", but I want to explore the jQuery method. Here is what I have attempted so far: var colors = [ ...

Displaying two div elements horizontally using Material-UI

Can the styled utility from mui be used to align 2 divs side by side? The documentation examples don't seem to cover this specific scenario. While answers on this and this address it, they don't relate to mui / material ui. I attempted the fol ...

React-native - Dropdownpicker - Error: Unable to retrieve label for selected choice

I'm encountering an issue with DropDownPicker in my react-native project during page load Here is the code snippet where I am using DropDownPicker: <DropDownPicker items={[ { la ...

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 ...

HTML checkbox utilizing JavaScript

<input type="checkbox" name="smoker"> Is there a way for JavaScript to determine whether the checkbox is checked or unchecked without making changes to the HTML code above? ...

Activate SVG graphics upon entering the window (scroll)

Can anyone assist me with a challenging issue? I have numerous SVG graphics on certain pages of my website that start playing when the page loads. However, since many of them are located below the fold, I would like them to only begin playing (and play onc ...

Enable the Chrome extension to interact with the RESTAPI

As I develop a Chrome extension and Rest API, my current focus is on their integration. However, I have some security concerns that need to be addressed. The purpose of the extension is to retrieve data from the API. This data is not personalized for any ...

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...

What steps should be taken to validate a condition prior to launching a NextJS application?

In my NextJS project (version 13.2.4), I usually start the app by running: npm run dev But there's a new requirement where I need to check for a specific condition before starting the app. If this condition is not met, the app should exit. The condi ...

What is the best way to showcase a component using FlatList?

Discovering the power of React Native combined with TypeScript and Redux Toolkit Hello! I'm currently facing an issue with rendering a list of messages using FlatList. Everything renders perfectly fine with ScrollView, but now I need to implement inf ...