The progress bar in vis.js is displaying inaccurate values

I am currently facing an issue with implementing the progress bar. The problem is that the progress bar always shows around 55% regardless of the value being set.

  var items = new vis.DataSet([
{id: 0, group: 0, content: 'item 0',value: 0.0, start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
{id: 1, group: 0, content: 'item 1',value: 0.2, start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
{id: 2, group: 1, content: 'item 2',value: 0.3, start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
{id: 3, group: 1, content: 'item 3',value: 0.4, start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
{id: 4, group: 1, content: 'item 4',value: 0.65, start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
{id: 5, group: 2, content: 'item 5',value: 0.8, start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}

]);

.progress-wrapper {
  background: white;
  width: 100%;
  height: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.progress {
  height: 100%;
  width: 60%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #63ed63;
}

.progress-label {
  position: absolute;
  z-index: 1;
}

Here is a demonstration on jsfiddle

Answer №1

When specifying the width as 60%, it will display at that percentage:

.progress {
  width: 60%;
}

If you want the progress bar to match the value in the label, you need to specify it in the HTML of your template:

visibleFrameTemplate: function(item) {
  if (item.visibleFramTemplate) {
    return item.visibleFramTemplate;
  }
  var percentage = item.value * 100 + '%';
  return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
}

The key part is setting the style for the width here: style="width:' + percentage + '".

This example in vis.js may not be very clear, but I have reported a bug to improve it: https://github.com/almende/vis/issues/2827

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

Is it possible to update the CSS file of an external SVG file in real-time?

Is there a way for an SVG image to reference another CSS file? A webpage contains an SVG file. A button allows users to switch between classic colors and high contrast mode on the entire webpage, including the SVG image. Attempt w.css (white backgrou ...

Footer mysteriously appears on top of the container

Trying my hand at practicing HTML by creating a small webpage, but struggling with why the Footer is aligning itself under the Header instead of the container I set up. It seems like a small detail that I might have missed, but I've hit a wall and ca ...

Tips for utilizing innerHeight for a div during both window loading and resizing tasks?

I'm currently working on calculating the top/bottom padding of a div (.content) based on its height, and updating it upon loading and resizing the window. The goal is to have it centered nicely next to another div (.character) positioned beside it. I ...

Unable to adjust layout when code is functioning alongside background-color

I'm looking to dynamically change the position of an item on my webpage when it is clicked. Is there a way I can achieve this without relying on id names? I currently have a code snippet that successfully changes the background color, but for some rea ...

Creating a custom arrow design for a select input field using CSS

I'm currently developing a website (using Wordpress with a custom theme) and I want to incorporate an up/down arrow in the select input field using CSS. The HTML code I have for creating the up/down arrow in the select input field is as follows: < ...

Adjust the element colors within a Vue loop with dynamic changes

Hey there! I'm currently working on achieving a unique design inspiration that involves colorful badges grouped together. Here's a visual reference: https://i.sstatic.net/5LDBh.png In the image, you can see these badges grouped in pairs, but the ...

"One specific div in Safari is having trouble with the external stylesheet, while the other divs are functioning properly- any

I'm facing a puzzling issue that has me stumped. I'm working on a website and have a simple footer with a link at the bottom: <div id="sitefooter"> <a href="#">This is the link</a> </div> My stylesheet includes styling f ...

smoothly hide the dropdown menu when a link is clicked with a transition effect

I am struggling with two bugs in my dropdown menu that I can't seem to fix. The navigation links on my homepage take users to different sections of the page instantly when clicked. However, the issue arises when the dropdown menu does not close after ...

The first JSF page is not affected by the style sheet

I am facing an issue where the style sheet does not apply on my initial JSF page. The problem occurs when I have an index.jsp which forwards to my first JSF page. <html> <head></head> <body> <jsp:forward page="./start.js ...

Highlighting rows using jQuery upon selecting checkboxes

I attempted to emphasize a row in a table using jQuery when the checkbox is checked. This is the jQuery code I used for this purpose: $(":checkbox").change(function() { $(this).closest("tr").toggleClass("highlight", this.checked); }); However, it see ...

Expand the background image to cover the entire page

I am facing a challenge in extending the body background gradient to cover the entire page, regardless of the amount of content present. When I apply the following CSS code, it results in a white page for longer content: http://jsfiddle.net/AE6dr/1/ htm ...

Guide to creating a vertical handler that can be resized

Did you know that you can resize tables in http://www.jsfiddle.net? I'm curious about how to resize just the "Vertical Handler". Could someone share the source code with me? If possible, please provide an example on http://www.jsfiddle.net. ...

Comparing CSS Variables to CSS Modules' @value functionality

Could you clarify the difference between the css function var(--red) and @value red from css modules for me? CSS Modules Example: @value red from "./color.m.css"; .background { background-color: red; } CSS Var() Example: @import "./color.m.css"; ...

Issue with CSS positioning: Struggling to place images outside a div with floating properties

Here is what I need to design along with the code I have written, HTML: <div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'> <img className='bg-transparent w-20 h-28 absolute md:top-40 md:lef ...

Assistance needed in keeping an image with absolute positioning CSS fixed to the top left corner of the browser

Looking for some CSS help as a beginner here! I've been trying to position a transparent PNG image over a centered table, but it seems stuck in the upper left corner of the browser. Absolute positioning should give me freedom to move it around, right? ...

Bootstrap mobile menu logo design

Currently, I am working on a bootstrap template where I have created a div class containing a logo. However, I have noticed that when I resize the Chrome window, the logo overlaps with the mobile menu. Here is the mobile version of my site: https://i.sst ...

What is the best way to reposition my boxes to sit below the diamond DIV instead of behind it?

I've been learning HTML5 and CSS, but I'm encountering an issue where the divs are appearing behind other divs. My goal is to have diamonds separated by boxes, with the boxes displayed below the diamonds. Clicking on a diamond should jump to the ...

Modify the c3 axis labels using CSS

I've been using the c3 package in R, which serves as a wrapper for the C3 javascript charting library created by Masayuki Tanaka. One issue I encountered is that my c3 chart was cutting off the last date on the x-axis. After inspecting it in Chrome I ...

One of my Bootstrap modals is able to scroll while the other remains non-scrollable when I open them simultaneously

I trigger the first modal using JavaScript and open other modals sequentially. While the first modal and some of the subsequent ones work properly, there is an issue with the second and third modals. The problem is that the scroll bar goes to the backgroun ...

WordPress Ignoring PHP Generated Elements When Processing Divs

Whenever I attempt to utilize the get_date function, it seems to disregard all div elements and instead places itself right after the header, at the beginning of the <div class="entry-content">. <div class="entry-content"> May 16, ...