Tips for maintaining rounded bar corners in chartJs when filtering data

I created a JSFiddle with rounded chartJs bar corners: https://www.jsfiddle.net/gcb1dyou. The issue arises when the legend is clicked to filter data, causing the rounded corners to disappear as shown in the image below: https://i.sstatic.net/8NOMa.png

When I click the orange label, you can see that the rounded borders disappear on the yellow bar.

var lastVisible = 0;
for (var findLast = 0, findLastTo = this._chart.data.datasets.length; findLast < findLastTo; findLast++) {
if (!this._chart.getDatasetMeta(findLast).hidden) {
  lastVisible = findLast;
  if (this._chart.data.datasets[findLastTo - 1].data[this._index] == 0) {
    lastVisible -= 1;
  }
}

} I attempted to add another if statement to make lastVisible equal to findLast-1 when the data is hidden (legend clicked) and the previous index is null, but it didn't work

else{
          if(this._chart.data.datasets[findLastTo - 1].data[this._index] == 0){
            lastVisible=findLastTo-2;
          }
        }

How can I resolve this issue? I look forward to hearing your solutions.

javascriptchart.js

Answer №1

To achieve rounded corners when not hidden (filtered), you simply need to include a condition to add rounded corners when filtered, assuming zeros are not displayed.

You can implement it like this:

if (!this._chart.getDatasetMeta(findLast).hidden) {
    lastVisible = findLast;
    if (this._chart.data.datasets[findLastTo - 1].data[this._index] == 0) {
        lastVisible -= 1;
    }
} else {
    if (this._chart.data.datasets[findLast].data[this._index] == 0) {
        lastVisible = findLast;
        lastVisible -= 1;
    }
}

For the updated code, check out the following JSFiddle link: https://jsfiddle.net/xopr36g5/

Answer №2

After careful consideration, I managed to solve the issue by dynamically calculating the depth of the dataset. I am grateful for all the helpful answers provided.

 var lastVisible;
  var datasetsLength = this._chart.data.datasets.length;
  this._chart.data.datasets.map((e,index)=>{
    lastVisible=datasetsLength-1;
    // Determining the depth of datasets and finding a non-zero value
    for(var i=lastVisible;i>0;i--){
    if(!this._chart.getDatasetMeta(i).hidden){
      if(this._chart.data.datasets[i].data[this._index] != 0){
        lastVisible = i;
        break;
      }
    }
    } 
  })

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

Sending ASP.NET Components to JavaScript Functions

I've set up a text box and label in the following way: <asp:TextBox ID="MyTextBox" runat="server"/> <asp:Label ID="MyLabel" runat="server"/> Additionally, I've created a JavaScript function like this: function checkLength(myTex ...

c#javascriptasp.net

Is it possible to reference the prior value of a computed Angular signal in any way?

Is it possible to dynamically add new values from signal A to the existing values in signal B, similar to how the scan operator works in RxJS? I am looking for something along the lines of signalB = computed((value) => [...value, signalA()]). Any sugg ...

javascriptangulartypescriptrxjssignals

Having trouble converting data back to JSON format after using JSON.parse in an ejs file with node and express

I'm retrieving data from an external API on my server, then attempting to pass that data to an ejs file using JSON.stringify(data), and trying to read the data in the ejs file by parsing it with JSON.parse(data). However, I am encountering issues wher ...

javascriptjsonstringexpressejs

Have you ever encountered issues with Promises.all not functioning properly within your vuex store?

I'm currently experiencing an unusual problem. In my Vue project, I have a Vuex store that is divided into different modules. I am trying to utilize Promise.all() to simultaneously execute two independent async Vuex actions in order to benefit from th ...

javascriptvue.jsvuexes6-promisevuex-modules

Creating a hierarchical JSON structure using a database query in JavaScript

Currently, I am in the process of building a nested JSON object by parsing a query string obtained from an SQL database. This constructed JSON object will then be utilized by Angular to display data in the user interface using angular2-query-builder. The ...

javascriptjsonnestedjavascript-objectsquery-string

When does the React state update warning occur on an unmounted component?

When is the appropriate time to verify if a component has been mounted? I frequently encounter a warning in the title when using setState calls. To avoid this warning, I have started declaring a variable and initializing it to true in componentDidMount, t ...

javascriptreactjsreact-nativereact-hooks

How to properly format JSON responses in Node.js or Express

I came across a question on Proper way to return JSON using node or Express and copied it for reference. I am looking for the response in a specific format. This is the sample format for the response API: { "success":true, "code":200, "message":"Ok", "da ...

javascriptnode.jsmongodbexpress

Having trouble understanding why my JavaScript for loop is looping only once

I'm having trouble getting my for loop to output each character of a string argument one at a time. However, when I test the code, it only displays the first character and then stops. I'm not sure what is causing it to only loop through once. Be ...

javascriptfor-loop

Double injection of Redux-saga

I've encountered a strange issue with my redux-saga - it's being called twice instead of just once. Here is the action that triggers the saga: export function createRequest (data) { return { type: CREATE_REQUEST, payload: {data} }; ...

javascriptreactjsactionredux-saga

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

I am defining an enumeration called ApiFunctions with values like "HIDE", "SET_READ_ONLY", and "DESCRIPTION". Also, I have a type ValueOfApiFunction that should include all values of ApiFunctions. Additionally, I have a logic that listens for messages on ...

javascripttypescriptcompiler-errorslogic

Is there a way to simulate the parameters of a method callback from an external dependency in Nodejs

Imagine a scenario where I have the following structure: lib/modules/module1.js var m2 = require('module2'); module.exports = function(){ return { // ... get: function(cb){ m2.someMethod(params, function(error, ...

javascriptnode.jsunit-testingmocking

Server-side Data Fetching with Nuxt.js

Is there a method to exclusively retrieve data from an API on the server-side in NuxtJS due to me needing to include my API_TOKEN in the request headers? Sample Code: <template> <div> <h1>Data obtained using asyncData</h1> ...

javascriptvue.jsauthenticationnuxt.js

Leveraging callback functions for dynamically updating a JSON structure

Recently, I've been working on a db_functions.js file that includes several functions designed to interact with a database. Here's an excerpt from the script: function getUsers(client, fn){ //var directors = {}; client.keys('*' ...

javascriptjsonnode.jsasynchronous

Tips for initiating a browser file download using JavaScript, ensuring that the download is only carried out if the web service responds with

For a project I am working on, I need to create JavaScript code that will be triggered by clicking on an <a> element. This code will then make a GET request to a web service that I am currently in the process of coding. Once the service returns a fil ...

javascriptjqueryajaxweb-servicesget

Implementing a soft transition to intl-tel-input plugin

This tel-input plugin was developed by Jack O'Connor. You can find the plugin here: https://github.com/Bluefieldscom/intl-tel-input I have observed that the flags take approximately one second to download, and I would like to enhance this process wi ...

javascriptjqueryfadeinintl-tel-input

Button Hover Effect: Transition with Style

I am trying to implement a one-second transition from the default color scheme to the hover color for a Button element in Material UI. I am using the transitions.create(props, options) method as described in this article: https://medium.com/@octaviocoria/c ...

javascriptcssreactjsmaterial-ui

Issue with Bootstrap Carousel Interval Setting not Functioning as Expected

I recently added Twitter Bootstrap-Carousel to a website with the intention of using it to navigate through different sections of a module. However, I'm encountering an issue where setting the interval to false does not work as expected. When I set an ...

javascriptjqueryhtmltwitter-bootstrap

Do two Express JS applications run on separate threads?

Running two express apps on different ports raises the question of whether they assign themselves to different cores, knowing that express typically runs on a single thread. The cluster module, however, replicates the express app and allows them to utiliz ...

javascriptnode.jsexpress

What causes variables and functions to behave differently when it comes to hoisting?

I've recently been delving into some documentation and have noticed some inconsistencies in hoisting patterns within JavaScript. Consider the following examples: When it comes to functions, function abc(){ console.log("worked") } abc(); OUTPUT : ...

javascripthoisting

Scrolling behavior in two columns with sticky positioning

Both columns have varying heights, with the left sometimes higher than the right. I want them to start scrolling down simultaneously, but when the shorter column's content ends, it should stick to the bottom of the viewport and "wait" until the taller ...

javascripthtmlcssviewportsticky