"Enhance the visualization of your data with Apexcharts by accurately coloring the columns

When attempting to color the graphic using an array, only one color is applied to all three columns, despite declaring a different color for each column.

options: {
  chart: {
    type: 'bar',
    id: 'chart',
   },
   colors: ['#3366ff','#66ff66','#ff0000'],
     dataLabels: {
      enabled: false
     },
    series: [],
     title: {
       text: 'PRAZOS OS',
      },
     bar: {
      columnWidth: '50%',
      endingShape: 'rounded' 
     },

Data

this.$axios.get("/Operacional/GetRelatorio").then(res => { 
this.prazos = res.data
this.$refs.chart1.updateSeries([{
     name: 'PRAZOS OS',
     data: [this.prazos.noPrazo, this.prazos.emDia, this.prazos.atrasadas ],
    }])
})

how it looks

enter image description here

Even though I specified three colors in the code array, only one color is being applied to all three columns.

javascriptvue.jsquasar-framework

Answer №1

To get the desired effect, ensure you adjust the distributed: true setting within bar under plotOptions in your configuration.

Here's how:

plotOptions: {
    bar: {
        distributed: true
    }
}

Referenced from Custom DataLabels Bar examples.

You can learn more about the distributed attribute in the documentation.

distributed: Boolean
Setting this option makes the bars discrete, with each value representing one bar per series.

For instance:

var options = {
  chart: {
    type: 'bar',
    id: 'chart',
  },
  colors: ['#3366ff', '#66ff66', '#ff0000'],
  dataLabels: {
    enabled: false
  },
  series: [{
    data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
  }],
  title: {
    text: 'PRAZOS OS',
  },
  bar: {
    columnWidth: '50%',
    endingShape: 'rounded'
  },
  plotOptions: {
    bar: {
      distributed: true
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

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

Consistent manipulation of the DOM through the Drag/Touchmove event

Seeking to incorporate Mobile Components through native Javascript and AngularJS. During my work on developing a Pull To Refresh directive for AngularJS, I utilized the touchmove event on a UL list. The goal was to pull a concealed div over a list with cu ...

javascriptcsshtmlangularjs

Identify when the user intends to open the link in a new window or tab

I am developing an AJAX application where all links on the page are JavaScript links (href="javascript:void(blahblah)"). Some of these links open small webpages in an iframe within a positioned div element that can be moved around. While this design looks ...

javascriptajaxhtmlcanvas

Missing Personal toolbar button on Forge Viewer interface

After completing the tutorial for learning Autodesk Forge, I successfully linked my BIM 360 account to the Forge Viewer. My next goal is to add extensions and have a button on the toolbar that directs to these extensions. However, when following the exten ...

javascriptautodesk-forgeautodesk-viewerviewerforge

Custom Email Template for Inviting Msgraph Users

I'm currently exploring the possibility of creating an email template for the MS Graph API. I am inviting users to join my Azure platform, but the default email they receive is not very visually appealing. public async sendUserInvite(body: {email: < ...

javascripttypescriptnext.jsmicrosoft-graph-api

Is it possible to extract only the time from a date and time using angular-moment library?

I am trying to display only the time from a date. My code looks like this: $scope.sample_time = "September 14th 2017, 1:00:00 pm"; What I want in my view is to show just the time, for example 1:00 pm. I attempted to use angular-moment, with something li ...

javascriptangularjsmomentjsangular-moment

First Impressions of Datatables

Is there a way to display a specific range of rows with Datatables initially? For example, showing rows 100-105 only. Does anyone know if this is achievable using the options available? ...

javascriptjquerydatatables

I am noticing that my popover is causing my page to shift when I click it. It is expanding the width of my page more than I would

Upon clicking the user id popover on my page, it expands the page width instead of adjusting within the page boundaries. This is the issue: https://i.stack.imgur.com/EqaMo.png There's a small white space present that I want to eliminate. When the po ...

javascriptcssreactjsmaterial-uipopover

Sliding Toggle: Panel Revealed with Button Slide

Currently, I am working on implementing a jquery slide tab feature. The functionality is working fine on button click. However, I want the button to stick with the panel and slide along with it. At the moment, the button remains fixed while the panel slide ...

javascriptjqueryhtmlcss

Transforming various date formats into the en-US format of mm/dd/yyyy hh:mm:ss can be accomplished through JavaScript

When encountering a date format in en-GB or European style (mm.dd.yyyy), it should be converted to the en-US format (mm/dd/yyyy). If the date is not already in en-US format, then it needs to be converted accordingly. ...

javascripttypescript

What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hid ...

javascripthtmlcsslightboxlightbox2

Is there a way to modify the appearance of a particular element in ng-repeat?

On my website, I am using ng-repeat to display various dish postings. I want to trigger a modal to open when I click on a dish, showing the specific data for that dish. To achieve this, I'm assigning each dish a modal div with a unique ID (dish-$index ...

javascriptangularjsangularjs-ng-repeat

npm: generate new script directive

When I start up my NodeJs (ES6) project, I usually enter the following command in the console: ./node_modules/babel/bin/babel-node.js index.js However, I wanted to streamline this process by adding the command to the scripts section of my package.json fi ...

javascriptnode.jsnpm

Angular Bootstrap-Select: Displaying options even after selection

There seems to be a bug in the angular bootstrap select demo section. After selecting an option, the dropdown continues to display options instead of hiding them. This issue does not occur when the ng-model attribute is omitted. You can view an EXAMPLE he ...

javascriptangularjstwitter-bootstrap-3bootstrap-selectangular-bootstrap

What causes tests to fail with an error message SyntaxError: Unexpected token {?

Hey there! I'm encountering an issue with webpack 5 and babel while trying to run tests that were previously written. Despite following the jest documentation for configuration, I haven't been able to find a solution after exploring various forum ...

javascriptvue.jsunit-testingjestjs

Retrieving the row id of a selected item using Quasar Framework's data tables

I am looking for a way to remove a row from a quasar-framework datatable. My goal is to pass the id of the selected row(s) to a delete function, which will then use axios to request the deletion of data with these id(s). However, I am unsure of how to pr ...

vue.jsvuejs2quasar-framework

Is there a way to modify the state of my spans by utilizing onMouseHover functionality?

I am currently updating the state of my span by using document.getElementById('heart').innerHTML = 'favorite'; Do you have a more efficient method for achieving this? If so, please share your solution with me. Below is my code snippet. ...

javascriptreactjsfunctionarrow-functions

Can you explain the functionality of $on.constructor in AngularJS?

Recently, I attempted an XSS challenge on the PortSwigger labs website. You can find the challenge here. This is my solution to the XSS challenge: {{$on.constructor('alert(1)')()}} However, since I have no prior experience with AngularJS, I&apo ...

javascripthtmlangularjsframeworksxss

Text centered on hover for figure caption

Check out this fiddle http://jsfiddle.net/sLdhsbou/ where I am trying to center the "x" that appears on hover perfectly no matter what size the image is. Also, why does the transition not occur when moving the mouse outside of the figure, unlike when movi ...

javascriptcss

Issues arise when attempting to enforce type-safety in TypeScript while using the JSON.parse

Is it possible that type-safety is compromised in TypeScript when dealing with JSON parsing? I should be triggering an error, but I'm not: interface Person { name: string } const person: Person = somePossibleFalsey ? JSON.parse(db.person) : undefi ...

javascriptjsontypescripttype-safety

Can the value of a variable be passed as seen in the JavaScript code snippet?

I'm wondering if I'm on the right track with generating random colors when a button is clicked. Here's my code: randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); // --- more code --- changeHeaderColor() { con ...

javascriptreactjs