`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset.

Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz

Here are my gradient setups and their positions:

var gradientFillPlanned = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillPlanned.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFillPlanned.addColorStop(1, "rgba(128, 182, 244, 0.0)");

var gradientFillActual = ctx.createLinearGradient(250.000, 0.000, 150.000, 500.000);
gradientFillActual.addColorStop(0, "rgba(244, 144, 128, 0.6)");
gradientFillActual.addColorStop(1, "rgba(244, 144, 128, 0.0)");

I'm looking for a solution to only display the 'top' dataset until the starting point of the bottom one. Is there a way to achieve this using CSS masks or any other technique?

Thank you!

javascriptcsschart.js

Answer №1

The reason for this issue lies in the use of transparency values like 0.6 within the rgba function. You can experiment with different values to see the impact.

var gradientFillCustom = ctx.createLinearGradient(200.0, 100.0, 300.0, 400.0);
gradientFillCustom.addColorStop(0, "rgba(120,230,140, 1)");
gradientFillCustom.addColorStop(1, "rgba(200,200,200, 1)");

Check out this CodePen example

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

Obtain document via Angular 2

Is it possible to use TypeScript to download an image that is already loaded? <div *ngIf="DisplayAttachmentImage" class="fixed-window-wrapper_dark"> <button class="btn btn-close-window" (wslClick)="HideAttachmentImage()"> & ...

javascripthtmlangulartypescriptdownload

mapStateToProps was invoked, however componentDidUpdate did not trigger

Working on fetching data for GameChart from an API and updating the Redux state. In my GameChart.jsx file, I have a chart that gets rendered when componentDidUpdate is called. However, there are times when changing the Redux state does not trigger componen ...

javascriptreactjsreduxreact-redux

Navigating to a different intent within the DialogFlow Messenger fulfillment can be done by utilizing the 'agent.setFollowupEvent(targetIntentEventName)' method

I am currently exploring ways to initiate another DialogFlow Intent (using its event) from a webhook server built with node.js. This will occur after gathering the user's email address, verifying their registration status by sending a POST API request ...

javascriptnode.jsdialogflow-esdialogflow-es-fulfillment

The Safari browser is unable to provide the country name in the geolocation response

My geolocation feature for displaying country names is functional in Chrome and Firefox, but not in Safari. How can I troubleshoot this issue? Javascript: $.get("http://freegeoip.net/json/", function (response) { $("#ip").html("IP: " + response.ip); ...

javascriptjquerygeolocationcountry-codes

What could be the reason behind the child component updating without triggering a re-render in Reactjs?

I am encountering an issue with my main component and child chart component. Even though the main component updates the state of the child chart component upon connecting to a websocket, the chart does not redraw as expected. Interestingly, when I click on ...

javascriptreactjschart.jsreact-chartjs

Issues in the d3.js chart

I'm facing an issue with some incorrect lines appearing in my d3.js chart. Strangely, the problem seems to disappear when I switch tabs on Chrome and return to the chart's tab. It's puzzling to figure out the root cause of this issue, so I ...

javascriptvue.jssvgd3.jscharts

How can I restrict website access to only specific IP addresses?

I am looking to restrict access to certain IP addresses on a website, but the issue is that dynamic IPs keep changing based on the source of internet connection. Is there a method to determine the static IP of the computer rather than relying on the dyna ...

javascriptjquerybrowsercross-browserip

Utilizing graphics within the Atom text editor

Hey, I have a bit of a silly question. I can't seem to figure out why these images aren't showing up on my Atom editor. Can anyone help me with this? <body> <div class="top-container"> <img src="images/clou ...

htmlcssimageatom-editor

Updating image source dynamically with Flask

I am currently developing a face detection application using Flask. I aim to have the detected faces displayed in real-time on the HTML page. For the JavaScript aspect, I am utilizing getUserMedia to live stream camera images from the client to the server ...

javascriptpythonhtmlflask

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

The internet browser encountered a JavaScript runtime error (0x800a138f) in which it was unable to retrieve property '0' due to it being either undefined or pointing to a

I'm encountering an issue with my javascript/jquery function that retrieves the selected dropdown value. Everything works fine in Chrome, but when I try to run my application in IE, it throws an error. $("#Application_AppCountries").change(function ( ...

javascriptjqueryhtmlasp.net-mvc

Create a full-page gradient background using CSS that spans the entire height of the

I need assistance with a website that features a gradient implemented through CSS like this: #grad { background: -webkit-linear-gradient(#87a0b4 80%, #6b88a1); background: -o-linear-gradient(#87a0b4 80%, #6b88a1); background: -moz-linear-gradi ...

htmlcssgradient

What advantages can be gained by opting for more precise module imports?

As an illustration, consider a scenario where I have an Angular 6 application and need to bring in MatIconModule from the @angular/material library. Two options could be: import { MatIconModule } from '@angular/material/icon'; Or import { Mat ...

javascriptangularwebpackangular-cliangular-cli-v6

Tips for halting click propagation in VueJS

My dilemma lies within a recursive list (tree) where each element contains a @click="sayHello(el.id)". The challenge arises due to the nested structure of the list, such as: list-element-0-01 ├──list-el-1-01 │ └──list-el-2-01 └──list ...

javascripthtmlvue.jsvuejs2

When using Node.js with Express and ssh2, my data structures remain intact without any resets when loading web pages

To display jobs sent by users to a cluster, the code below is used (simplified): var split = require('split'); var Client = require('ssh2').Client; var conn = new Client(); var globalRes; var table = [["Head_1","Head_2"]]; module.exp ...

javascriptnode.jsexpress

What is causing the Bootstrap accordion to not display content when clicked on?

As a beginner in web development, I am currently working on my very first website. One issue I'm facing is with incorporating an accordion-style card in my webpage. Although it allows me to click on different titles, the collapsed ones fail to expand ...

htmlcssbootstrap-4

Struggling to display a navigation menu on angular 1 with complex nested json structure

I have set up a navigation bar using JSON data fetched by an Angular service. Everything is working fine with my service and controller, but I am facing difficulty in displaying the nested JSON data in my view. Here is the JSON data: { "menu": [ ...

javascriptangularjsjsontwitter-bootstrap-3

Relocating JavaScript scripts to an external file on a webpage served by Node.js' Express

When using Express, I have a route that returns an HTML page like so: app.get('/', function(req, res){ return res.sendFile(path.resolve(__dirname + '/views/index.html')); }); This index.html file contains multiple scripts within t ...

javascriptnode.jsexpress

Interacting with PHP through JavaScript function calls

I am facing some frustration with my website due to an issue involving PHP. When I retrieve data from a PHP file, it returns a JSON list like this: {"Data":{"Recipes":{"Recipe_5":{"ID":"5","TITLE":"Spaghetti Bolognese"},"Recipe_7":{"ID":"7","TITLE":"Wurst ...

javascripthtmljson

The text on the menu is not adjusting properly for small screens

Check out the jsFiddle link. The issue arises when the Result screen is set to the width of a mobile's screen. Instead of wrapping the text, it gets replaced by dots and cannot be scrolled to view the full content. Here is the code snippet: <a hr ...

jquerycssjquery-mobileoverflow