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:

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:

Hi @merchantadvocate-devhttps://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:

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/releaseshttps://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 GitHubhttps://shared.outlook.inky.com/link?domain=github.com&t=h.eJxdkMFuwjAMhl8FZddB6tJ0gRMSN8SNw85O6jbZ0mRqXCSE9u5ruExwsz799mf7LuYpiP1KOOafvJdy8Oxms7FplBcMlPs0WTqjyfLsB8fRx-GTzNHhxKeL9DnPlCVU9dujXNpGirwGgF3btLrS4n0lvovgisFjZCbrYgppuK1HmqxbEHbXZJFJfmEIGA-v_LHMru6waXs01qpaVwrUVn1oagwqVW8VSGgV6GbhegOqWKlYY2Lf-2WKTzEf_o8rga4EnhGXX8DvH5BFWqo.MEUCIHTzwArNrN7HmpNiVl6GYGDDRtIwKWO3foUqlLsB8y45AiEAg4aVMGR8oUPAz9_g0in-Y3g6_0npbfxGzgr66gqLaHY, or unsubscribehttps://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?