How to show 2 colors for 1 legend item?

[DXC]

I am building a bar chart show actual vs target number. And in my actual number, I am using a conditional color if it is over the target then show yellow if not show blue here. 
After I added the conditional color on the "Actual sale" value, the legend item colors are all in grey. Is there a way to show this icon color as how it is on the values on left panel (blue + yellow color)? 

color wanted: 

[TriAnthony]

Hi @DXC,

Below is a script you can use to replace the grey box for the measure with conditional formatting with a two-tone box, one for each of the selected colors. If you need to reuse the script for another widget, make sure to update the line below with the correct measure name.

const measureName = "Actual Sale"

Example:

Script:

widget.on('ready', function(se,ev){

	// Define the measure name
	const measureName = "Actual Sale"

	// Find the metadata of the measure
	const measureMetadata = widget.metadata.panels[1].items.find((item) => {
		if (item.jaql && item.jaql.title.indexOf(measureName) !== -1) {
			return true
		}
	})
	
	// Define the gradient colors as variables
	const color1 = measureMetadata.format.color.conditions[0].color;
	const color2 = measureMetadata.format.color.conditions[1].color;

	// Find the text element for the measure
	const revenueText = Array.from(document.querySelectorAll("text")).find(
		(textElement) => textElement.textContent.trim() === measureName
	);

	if (revenueText) {
		// Locate the parent <g> group containing the text and rect
		const parentGroup = revenueText.closest("g");

		if (parentGroup) {
			// Find the associated <rect> element
			const rectElement = parentGroup.querySelector("rect.highcharts-point");

			if (rectElement) {
				// Create a <defs> element for the gradient
				const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
				const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
				gradient.setAttribute("id", "two-color-gradient");
				gradient.setAttribute("x1", "0%");
				gradient.setAttribute("y1", "0%");
				gradient.setAttribute("x2", "100%");
				gradient.setAttribute("y2", "0%");

				// Create gradient stops
				const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop1.setAttribute("offset", "50%");
				stop1.setAttribute("style", `stop-color: ${color1}; stop-opacity: 1`);

				const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
				stop2.setAttribute("offset", "50%");
				stop2.setAttribute("style", `stop-color: ${color2}; stop-opacity: 1`);

				// Append stops to the gradient
				gradient.appendChild(stop1);
				gradient.appendChild(stop2);
				defs.appendChild(gradient);

				// Insert the <defs> into the SVG root (if not already present)
				let svgRoot = rectElement.closest("svg");
				if (!svgRoot) {
					// Wrap the rect in a new SVG if one isn't present
					svgRoot = document.createElementNS("http://www.w3.org/2000/svg", "svg");
					svgRoot.setAttribute("width", "20");
					svgRoot.setAttribute("height", "20");
					rectElement.parentNode.replaceChild(svgRoot, rectElement);
					svgRoot.appendChild(rectElement);
				}
				svgRoot.insertBefore(defs, svgRoot.firstChild);

				// Apply the gradient to the rect
				rectElement.setAttribute("fill", "url(#two-color-gradient)");
			}
		}
	}

})