Angular-highcharts used to create a stacked bar chart display

const dataArray = [{ name: "LTNS", id: 1, percentage: 60, price: 900000 },
        { name: "NPCS", id: 2, percentage: 30, price: 342000 },
        { name: "MARCOS", id: 3, percentage: 10, price: 600000 }]

To create a stacked bar chart in Angular using angular-highchart with the data specified above, the resulting chart should resemble the one shown in the following image:

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

The version of angular-highchart being used is 7.2.0.

Despite searching through various resources, I have not found any that match the exact requirements stated above.

javascriptangulartypescripthighchartsangular-highcharts

Answer №1

One way to approach this problem is by following these steps:

const data = [{
    name: "LTNS",
    id: 1,
    percentage: 60,
    price: 900000
  },
  {
    name: "NPCS",
    id: 2,
    percentage: 30,
    price: 342000
  },
  {
    name: "MARCOS",
    id: 3,
    percentage: 10,
    price: 600000
  }
].reverse();

data.forEach(item => {
  item.values = [item.percentage]
})

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  plotOptions: {
    bar: {
      stacking: 'normal',
            groupPadding: 0.2
    }
  },
  series: data
});

To see a demo, visit: https://jsfiddle.net/BlackLabel/d9xrgeka/

If you encounter any difficulties with additional functionalities, feel free to ask detailed questions.

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

Step-by-Step Guide: Building a Reusable Component for Angular Material Data Table in Angular 5

I have multiple components that display data in a tabular format. I am looking to refactor the code into a reusable data table component so that other components can utilize it instead of duplicating the table in each component. However, I am unsure how ...

angularangular5

Attempting to align CSS with JavaScript for seamless integration

Seeking guidance on how to convert CSS from a stylesheet into inline styles directly within an HTML document using JavaScript. The search results I've found so far have been somewhat irrelevant to what I'm looking for. To clarify, I am looking f ...

javascripthtmlcss

Combining all CSS into a unified file in Next.js with the help of mini-css-extract-plugin

While working with Nextjs and using Sass for styling, I noticed that in production mode, multiple CSS files are being loaded sequentially. I aim to optimize this by loading only one CSS file. After researching, I came across the MiniCssExtractPlugin which ...

javascriptreactjsnext.jsfrontendmini-css-extract-plugin

Navigating through the additional plugins in WebDriver

After installing a plugin in Chrome, the next step is to access it through webdriver. Here's how you can do it: File addonpath = new File("path of .crx file"); ChromeOptions chrome = new ChromeOptions(); chrome.addExtensions(addonpath); WebDriver dri ...

javascriptseleniumselenium-webdriverwebdriverselenium-chromedriver

The existence of an array within a grid maintained as a property of a single item

I'm facing an issue with displaying array instances in a grid connected to a store with a model. The type property is set to 'auto' for the array in the model instance. How can I adjust the settings to show all the array instances correctly ...

javascriptarraysextjssencha-architect

Issue: Having trouble making the frontend work properly due to difficulty in accessing the 'state' property which is undefined

Encountering an issue while attempting to input data from a web application into the database. Having trouble understanding the root cause of the problem. The error occurs when the database insert button is triggered. The following snippets of code showcas ...

javascriptreactjs

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

javascripttypescriptvue.js

Aggregate SQL data using JSON arrays

I am currently developing a webpage designed for educators, showcasing students' test performance results. To visually represent the data, I am incorporating the Highcharts JavaScript library. At this stage, I have a PHP script utilizing PDO to gene ...

phpmysqljsonpdohighcharts

Sending state information through props in a Vuex environment

One of the challenges I am facing is how to make a reusable component that can display data from the store. My idea is to pass the name of the store module and property name through props, as shown below: <thingy module="module1" section=" ...

javascriptvue.jsvue-componentvuexvue-props

The Angular directive was unable to reach the controller located higher up in the DOM hierarchy

template <section id="content" ng-controller="ReservationController as resvnCtrl" > <form role="form" name="resvnCtrl.form"> <div data-date-picker> </div> ...

javascriptangularjs

Video Autoplay within an image carousel - A seamless integration

I need assistance embedding a YouTube video as the fourth item in a slideshow on my website, www.serenitygardenrooms.com. The slideshow should play the first three images and then autoplay the video before moving on to the next image. However, the code sni ...

javascriptjquerycssyoutubeslideshow

I need guidance on integrating the LoginComponent in Angular 6

I am currently working on a project using Angular 6 and I am encountering some difficulties with routing. I have successfully created the entire 'Admin' section with the following structure: <div class="wrapper"> <div class="sidebar ...

angulartypescript

Tips on adding up polygon values in mapbox

After providing detailed information about my issue, I was criticized for seeking help, so I will be more general in my explanation. I am trying to calculate the sum of values for each location within a polygon drawn on Mapbox. I have the code to insert th ...

javascriptmapboxpolygonmapbox-gl-jsmapbox-gl

Working with scrollIntoView in useEffect (Encountering an error trying to access 'scrollIntoView' property of null)

Starting from scratch, I'm working on setting up my webpage and crafting some code. function BasicDetails() { React.useEffect(()=>{ scrollView(); }, []); function scrollView() { document.getElementById('main-root& ...

javascriptreactjsreact-hooks

Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box? The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value. I decided to use Bootstrap for som ...

javascripthtmlcss

The smooth scrolling effect I had programmed suddenly came to a halt

I have a simple jQuery script that allows for smooth navigation through a website using animated scrolling. jQuery(".main_menu li a").click(function() { var href = jQuery(this).attr('href'); if(jQuery(this).html() == 'Home') ...

javascriptjqueryhtmlcssscroll

Exploring the Scope of HTTP Requests

Is it possible to have the variable `pass_or_fail` assigned within the `.then` clause and have that assignment reflected outside of the `.then` clause? this.$http.post('http://localhost:3000/signup?username='+this.username+'&password=&a ...

javascripthttpvue.js

Styling text using SVG in HTML

I'm trying to underline a text element in SVG using the text-decoration attribute, but I'm running into an issue with the color of the line not changing. Here is the code snippet I am working with: <svg id="svg" viewBox="0 0 300 ...

javascripthtmlcsssvgtext-decorations

Using AngularJS to show content based on a callback function

I'm a beginner in angular and it seems like I might be overlooking something. For the registration form, I need users to provide their location. Depending on whether they allow/support navigator.geolocation, I want to display a drop-down menu for cho ...

javascriptangularjs

Table data is being displayed from form data in another file using only JavaScript

I am trying to figure out how to use local storage to store form data in one HTML file and display it in a table on another HTML file. The form data should be stored in the columns of the table but on a separate page. Can anyone provide assistance with thi ...

javascripthtml