Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Legend display boolean not working #102

Open
merchantadvocate-dev opened this issue Mar 30, 2022 · 3 comments
Open

Legend display boolean not working #102

merchantadvocate-dev opened this issue Mar 30, 2022 · 3 comments
Labels
reproduction steps needed Need reproduction steps to further continue with issue resolution

Comments

@merchantadvocate-dev
Copy link

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
Copy link
Collaborator

victorgz commented May 6, 2022

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:

Thanks !

@victorgz victorgz added the reproduction steps needed Need reproduction steps to further continue with issue resolution label May 6, 2022
@merchantadvocate-dev
Copy link
Author

merchantadvocate-dev commented May 6, 2022 via email

@victorgz
Copy link
Collaborator

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:
image

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
reproduction steps needed Need reproduction steps to further continue with issue resolution
Projects
None yet
Development

No branches or pull requests

2 participants