Legend display boolean not working

[merchantadvocate-dev]

Who is the bug affecting?

All users

What is affected by this bug?

Chart legend display

When does this occur?

n/a

Where on the platform does it happen?

n/a

How do we replicate the issue?

Build a chart and try to hide the legend.

Expected behavior (i.e. solution)

Legend should not appear

Other Comments

[victorgz]

Hi @merchantadvocate-dev, thanks for contacting us.

I'm trying to reproduce the error but it works for me:

<template>
	<lightning-button onclick={toggle} label="Toggle visibility"></lightning-button>

	<c-chart type="pie" responsive="true">
		<c-dataset labels='["OK", "WARNING", "CRITICAL", "UNKNOWN"]'>
			<c-data label="# of Items" detail="[12, 19, 3, 5]"></c-data>
		</c-dataset>
		<c-title text="Pie Chart"></c-title>
		<c-legend position="right" display={isVisible}></c-legend>
	</c-chart>
</template>

import { LightningElement } from 'lwc';

export default class TestChart extends LightningElement {
	isVisible = false;

	toggle(){
		this.isVisible = !this.isVisible;
	}
}

We need more information to analyze the problem:

• Which version of the solution are you using? Releases: https://github.com/SalesforceLabs/LightningWebChartJS/releases
• Can you please share with the code of your chart?

Thanks !

[merchantadvocate-dev]

Hello Victor, Thank you for getting back to me 😊 I am using 1.6.0 version of the code. My project is a client Dashboard. I have multiple instances of c-chart called from a parent container. That parent calls Apex, of which a wrapper is returned with the datasets required to populate the charts. The code for the chart in question is as follows: <c-chart type="line" responsive="true" maintainaspectratio="false" height="275px" > <c-dataset labels={cl}> <c-data label="Net Effective Rate" detail={crd} fill="false" backgroundcolor={color1}></c-data> </c-dataset> <c-title text="Net Effective Rate" fontsize="16" fontfamily="Verdana, Arial, Calribi"></c-title> <c-legend display={isVisible}></c-legend> <c-cartesian-linear-axis ticks-suggestedmax = "4" ticks-maxtickslimit = "4" ticks-stepsize = "0.4"> </c-cartesian-linear-axis> </c-chart> I had display=”false”, but updated it according to your example, and still no luck in suppressing the legend display. JS Code: // Legend Hide isVisible = false; ***@***.*** Hope this helps. Best, Jeff From: Victor Garcia Zarco ***@***.***> Date: Friday, May 6, 2022 at 9:52 AM To: SalesforceLabs/LightningWebChartJS ***@***.***> Cc: Jeffrey Allan ***@***.***>, Mention ***@***.***> Subject: Re: [SalesforceLabs/LightningWebChartJS] Legend display boolean not working (Issue #102) Hi @merchantadvocate-dev, thanks for contacting us. I'm trying to reproduce the error but it works for me: <template><lightning-buttononclick={toggle}label="Toggle visibility">&l Caution: External ***@***.******@***.***>) First-Time Sender Details<https://protection.inkyphishfence.com/details?id=dmFsaWFudHRlY2hub2xvZ3ktbWVyY2hhbnRhZHZvY2F0ZS9qYWxsYW5AbWVyY2hhbnRhZHZvY2F0ZS5jb20vOTJkYTQ2ZmFiY2M1MjgwNTE1MzU3OGU0YmE1NTIzNTEvMTY1MTg0NTE1OC4xNQ==#key=69c1852a0b0fabb0fbd698451ba03e6b> Report This Email<https://protection.inkyphishfence.com/report?id=dmFsaWFudHRlY2hub2xvZ3ktbWVyY2hhbnRhZHZvY2F0ZS9qYWxsYW5AbWVyY2hhbnRhZHZvY2F0ZS5jb20vOTJkYTQ2ZmFiY2M1MjgwNTE1MzU3OGU0YmE1NTIzNTEvMTY1MTg0NTE1OC4xNQ==#key=69c1852a0b0fabb0fbd698451ba03e6b> FAQ<https://getskout.com/emailprotectionfaq/> Skout Email Protection<https://getskout.com/emailprotection/> Hi @merchantadvocate-dev<https://shared.outlook.inky.com/link?domain=github.com&t=h.eJxdj0EOgjAQRa9CuhZqgcHKiqsMbaHV0hoYSIzx7lI3Rrbvv_w_82Lr7FmbMUv0WFrOR0d27QsVJz6ZWVkMhHqLCsnk2mzslLF78jf0bs_IKBuij-MzP-r8ht5j6I78230tNdbNgL1SUMozCKjgIk3dI0BZgeCiASHrnctCQFo1aTVEcoPbW1wMS_e7NQk6Cf-I0mvi_QE5sUqh.MEYCIQDgW6XG-IaszxqI-_wVZXUi6wm28QOWSBxOTrGMfp8JHQIhAKciga4fge68C3fAYzcUd8sINtX2x-kWKHUnHy5-G9Z0>, thanks for contacting us. I'm trying to reproduce the error but it works for me: <template> <lightning-button onclick={toggle} label="Toggle visibility"></lightning-button> <c-chart type="pie" responsive="true"> <c-dataset labels='["OK", "WARNING", "CRITICAL", "UNKNOWN"]'> <c-data label="# of Items" detail="[12, 19, 3, 5]"></c-data> </c-dataset> <c-title text="Pie Chart"></c-title> <c-legend position="right" display={isVisible}></c-legend> </c-chart> </template> import { LightningElement } from 'lwc'; export default class TestChart extends LightningElement { isVisible = false; toggle(){ this.isVisible = !this.isVisible; } } We need more information to analyze the problem: * Which version of the solution are you using? Releases: https://github.com/SalesforceLabs/LightningWebChartJS/releases<https://shared.outlook.inky.com/link?domain=github.com&t=h.eJxdj8EOATEURX9FukZ1zGNYSezEzsL6tfNmWqqV9pGI-HdTG2F7cnJP7lPckhfrkbDM17yWsndsb3pq4kUe0FPuYjK0R53l3vWWgwv9kfTWYuLdQSbyhJmyGI_Euczc0TsMzGRsiD72j8mFkrEDwvYeDTLJE3qPYfPPP8lV1WK96FAbA1UzAwVzWDZUawSo5qCkWoBq6oE3UwWlSqUaIrvODSsuhrz5XihCW4RfxOWxer0BMdFTKA.MEYCIQCft1HaVtKTgxFTxLq7T-ujR0PgUwOekazmFgQQLdWF_wIhAJYgkv6-OfGG0g3Uj5_8xh7qwU7Y5y1Lf5f5CnHzvgKJ> * Can you please share with the code of your chart? Thanks ! — Reply to this email directly, view it on GitHub<https://shared.outlook.inky.com/link?domain=github.com&t=h.eJxdkMFuwjAMhl8FZddB6tJ0gRMSN8SNw85O6jbZ0mRqXCSE9u5ruExwsz799mf7LuYpiP1KOOafvJdy8Oxms7FplBcMlPs0WTqjyfLsB8fRx-GTzNHhxKeL9DnPlCVU9dujXNpGirwGgF3btLrS4n0lvovgisFjZCbrYgppuK1HmqxbEHbXZJFJfmEIGA-v_LHMru6waXs01qpaVwrUVn1oagwqVW8VSGgV6GbhegOqWKlYY2Lf-2WKTzEf_o8rga4EnhGXX8DvH5BFWqo.MEUCIHTzwArNrN7HmpNiVl6GYGDDRtIwKWO3foUqlLsB8y45AiEAg4aVMGR8oUPAz9_g0in-Y3g6_0npbfxGzgr66gqLaHY>, or unsubscribe<https://shared.outlook.inky.com/link?domain=github.com&t=h.eJxdkFFPwjAUhf8K6bNQW3Zx8sRGosHoAhlMfLztCq2W1mwtiTH-d1deDL5-Ocl3zvkmsbNkPiI6hM9-TunRBB3FRPoTdT6Yg5EYjHc9ja6PopedEWqMMWhabPavT_tiu3vkdVFuVyWHulk_N6vdmpdFtawe6heol1A1bxtyMyIfSXNGa9CFoKR23vrj1_ikOqkHhO3ZDy5F39FadIv__FLpnreYzQ4opASe3wKDKdzlKhMIwKfAKJsBy7OB5xMGyaqS9WrJ4m9iCrQpcI1CeoT9_AIEiVur.MEYCIQD5eap9NkYJKoLerTpuaP_JEfb3NqgjAJMllOztxuAVnwIhAOw7-veXakDUC4rQr3G_YT6KmLHOZn755aJ_ZplbwudN>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[victorgz]

Hello @merchantadvocate-dev ,

I'm trying to reproduce the error but everything is working for me... I've tried with a parent component (testChart) and two instances of the child component (childChart)

testChart

<template>
	<h1>First Instance</h1>
	<c-child-chart></c-child-chart>

	<h1>Second Instance</h1>
	<c-child-chart></c-child-chart>
</template>

childChart

Based on the configuration you provided in your last example:

<template>
<div class="slds-card">
	<c-chart type="line" responsive="true" maintainaspectratio="false" height="275px" >
		<c-dataset labels={labels}>
			<c-data label="Net Effective Rate" detail={details} fill="false" backgroundcolor="rgba(119, 185, 242, 0.2)"></c-data>
		</c-dataset>
		<c-title text="Net Effective Rate" fontsize="16" fontfamily="Verdana, Arial, Calribi"></c-title>
		<c-legend display={isVisible}></c-legend>
		<c-cartesian-linear-axis
			ticks-suggestedmax = "4"
			ticks-maxtickslimit = "4"
			ticks-stepsize = "0.4">
		</c-cartesian-linear-axis>
	</c-chart>
</div>
</template>

import { LightningElement } from 'lwc';

export default class ChildChart extends LightningElement {

	labels = ["January", "February", "March", "April", "May", "June", "July"];
	details = Array.from({length: 7}, () => Math.floor(Math.random() * 50));

	isVisible = false;
}

The result shows me the two instances of the chart with no legend:

Some more questions:

• Can you please give a try to the code above?
• Where are you trying to use the component? In a Lightning Page? Experience Cloud site?
• Do you have LWS (Lightning Web Security) enabled in your org?