Hey guys,

I didn't see any documentation on using the option object from the standard chart.js library. It looks like Chart.drawChart() (chart.js) uses "options: this._configService.getConfig()" on line 386. ConfigService being a refrence to ChartConfigService. I see ChartConfigService has the necessary object setup in the constructor so what is the intended way of setting this. My use case would be to show percentages on the y-axis. Sample below of chart.js setup.

Full example: https://jsfiddle.net/r71no58a/4/

options: { scales: { yAxes: [{ ticks: { min: 0, max: 25, callback: function(value){return value+ "%"} },
scaleLabel: { display: true, labelString: "Percentage" } }] } }

Who is the bug affecting?

All Supervisors

What is affected by this bug?

Unable to include any LWCC chart in a LWC.

When does this occur?

Every time I attempt to deploy my LWC containing LWCC markup: `

    <!-- card body -->
    <div class="slds-grid">
        <!-- sum of hours per hour block chart -->
        <div class="slds-col slds-size_1-of-1 slds-large-size_6-of-12">
            <!--<c-chart type="bar" responsive="true">
                <c-dataset labels={chartLabels}>
                    <c-data label="Sum of Hours Scheduled" detail={hours} borderwidth="1"></c-data>
                </c-dataset>
                <c-title text="Hours per Hour Block"></c-title>
                <c-legend position="bottom"></c-legend>
                <c-cartesian-axis axis="x"></c-cartesian-axis>
                <c-cartesian-axis axis="y"></c-cartesian-axis>
            </c-chart>-->
            <c-chart type="bar">
                <c-title text="TEST"></c-title>
                <c-legend position="bottom"></c-legend>
            </c-chart>
        </div>
        <!-- number of assignments per hour block chart -->
        <div class="slds-col slds-size_1-of-1 slds-large-size_6-of-12">
            
        </div>
    </div>

`

Where on the platform does it happen?

I'm attempting to deploy a component that will be shown on a Lightning App Page

How do we replicate the issue?

1. Install the LWCC package in a sandbox
2. Create a Lightning Web Component (LWC)
3. Add simple LWCC Markup to the LWC: <c-chart type="bar"> <c-title text="TEST"></c-title> <c-legend position="bottom"></c-legend> </c-chart>

Expected behavior (i.e. solution)

The component should deploy to the sandbox with the LWCC markup

Other Comments

I may be missing something very simple, but I am not sure what. Please advise.

What is affected by this bug?

Data Visualization - cannot display chart

When does this occur?

When compoent gets loaded.

We have this enabled in digital experience builder:

We have scripts for chart.js implemented inside staticresources.

Chart only works when locker is disabled.

Locker is enabled by default so this our issue might have important impact

I'm using horizontal bar chart with dynamic ticks-suggestedmax, which means that ticks-suggestedmax is calculated accordingly received data details. For the first time chart and cartesian-linear-axis were built correctly, after second time changing data: data details were updated but ticks-suggestedmax was not. For some reason it doesn't go for listenerHandlers function. Can you please have a look to this issue.

Change allows for proper separation of "main" logic from the "sample" logic.

This supports the ability for someone to fork/clone the repo and setup the project as an unlocked package without the need to also package the sample code

Description

General best practice suggests that sample logic should be separate from main/primary logic. This change achieves that and provides an easy approach to allow someone to package the codebase in an unlocked package.

Motivation and Context

How Has This Been Tested?

• Create a scratch org
• Push this code to a scratch org using command sfdx force:source:push
• If push is successful, then the test passes

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [X] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [X] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.

Bumps minimist from 1.2.5 to 1.2.6.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Hi,

I have this custom data provider that I use in a Lightning page just to test showing a pie chart with the lightning component and the apex custom data provider and I have an error: The apex class: public without sharing class AP18_TSCustomPieDataProvider extends lwcc.ChartDataProvider { public Object initParameter; public override void init(final Object initParameter) { } public override List<lwcc.ChartDataProvider.ChartData> getData() { final List<lwcc.ChartDataProvider.ChartData> chartDatas = new List<lwcc.ChartDataProvider.ChartData>(); lwcc.ChartDataProvider.ChartData aChartData = new lwcc.ChartDataProvider.ChartData(); aChartData.labels = DEMO_LABEL; aChartData.detail = DEMO_DATA; aChartData.bgColor = DEMO_COLOR; chartDatas.add(aChartData); return chartDatas; }

public static final List<String> DEMO_LABEL = new List<String>{'Test1','Test2'};
public static final List<Decimal> DEMO_DATA = new List<Decimal>{
        10,
        20
};
public static final String DEMO_COLOR = 'rgba(0,0,0,0.5);';

}

And the error message is: "Attempt to de-reference a null object"

Who is the bug affecting? = any user

What is affected by this bug? = pie chart rendering

When does this occur?= always

Where on the platform does it happen? = on the chart on the lightning page

How do we replicate the issue? = it happend always

Thanks,

Fix the case where ticks min/max is zero

Description

I supported the case for Number(v) || vwhen v is 0.

Motivation and Context

I was using the lwcc, and wanted to make the min value as 0, but then realized that it's not working, so I digged into the code and realized that this case is not handled

How Has This Been Tested?

Testsed on a chart

Screenshots (if appropriate):

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.

Who is the bug affecting?

What is affected by this bug?

When does this occur?

Where on the platform does it happen?

How do we replicate the issue?

Expected behavior (i.e. solution)

Other Comments

Who is the bug affecting?

All Supervisors

What is affected by this bug?

Analysis

When does this occur?

when try to add another axixs to the chart

As per documentation -- Axis ID The properties xaxisid and yaxisid from the Data component have to match the scale propertie id of the specific axis type. This is especially needed if multi-axes charts are used.

Creating Multiple Axes With cartesian axes, it is possible to create multiple X and Y axes. To

Where on the platform does it happen?

on any lwc component with chart

How do we replicate the issue?

just add two axis component with ids and map it to the data

Expected behavior (i.e. solution)

Multiple axis should have shown

Other Comments

Do you have a sample that works?

Who is the bug affecting?

So far just me, working on a new feature in a scratch org and needed a charting option.

What is affected by this bug?

Presentation of charts is diminished by only showing markers/lines/fills in greyscale.

When does this occur?

Created a new LWC and included c-chart examples from the sample gallery in lightning-layout-items . On viewing the app, the charts render, but none of the colors are present, everything is grey.

Where on the platform does it happen?

In my LWC app.

How do we replicate the issue?

If I add any chart to my LWC and view, no colors are used.

Expected behavior (i.e. solution)

The colors designated in the c-data backgroundcolor list get used in the chart

Other Comments

Here is the entirety of my LWC:

<template>
    <lightning-layout multiple-rows="false">
        <lightning-layout size="4">
            <div> put other cards here</div>
        </lightning-layout>
        <lightning-layout size="4">
            <c-chart type="doughnut" responsive="true">
                 <c-dataset labels='["OK", "WARNING", "CRITICAL", "UNKNOWN"]'>
                      <c-data label="# of Tomatoes" detail="[12, 19, 3, 5]" backgroundcolor='[
                           "rgba(14, 110, 206, 1)",
                           "rgba(45, 156, 237, 1)",
                           "rgba(104, 206, 238, 1)",
                           "rgba(150, 242, 238, 1)"
                          ]'></c-data>
                     </c-dataset>
                 <c-title text="Doughnut Chart"></c-title>
                 <c-legend position="left"></c-legend>
                 <c-arc-configuration bordercolor="rgba(7, 62, 146, 0.7)"></c-arc-configuration>
            </c-chart>
        </lightning-layout>
        <lightning-layout size="4">
        <c-chart type="bar" responsive="true" stylecss="position: relative; margin: auto;" events='["click"]'>
             <c-dataset labels='["Blue", "Orange", "Yellow", "Green", "Light Blue", "Purple"]'>
                  <c-data label="# of Votes" detail="[12, 19, 7, 9, 5, 15]" backgroundcolor='[
               "rgba(82, 183, 216, 0.2)",
               "rgba(225, 96, 50, 0.2)",
               "rgba(255, 176, 59, 0.2)",
               "rgba(84, 167, 123, 0.2)",
               "rgba(79, 210, 210, 0.2)",
               "rgba(226, 135, 178, 0.2)"
               ]' bordercolor='[
                "rgba(82, 183, 216, 1)",
                "rgba(225, 96, 50, 1)",
                "rgba(255, 176, 59, 1)",
                "rgba(84, 167, 123, 1)",
                "rgba(79, 210, 210, 1)",
                "rgba(226, 135, 178, 1)"
               ]' borderwidth="1"></c-data>
                 </c-dataset>
             <c-title text="Bar Chart"></c-title>
             <c-legend position="right"></c-legend>
             <c-animation duration="2000" easing="easeInBounce"> </c-animation>
             <c-cartesian-category-axis axis="x" position="top"></c-cartesian-category-axis>
        </c-chart>
    </lightning-layout>
    </lightning-layout>
</template>

Bumps json5 from 2.2.1 to 2.2.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I was considering using Google Chart API for a pie chart since they provide an option to display both absolute values and percentage of total and they display the value outside the pie. Is this possible to configure ChartJS to work like Google Charts to display both absolute values and percentage of total and they display the value outside the pie so that it is more visible?

Does it require development or it is possible to achieve with configuration only?

Who is the bug affecting?

Developer (me) currently

What is affected by this bug?

Custom background colours defined in Apex Custom Data Provider don't show up on doughnut chart

When does this occur?

On loading chart

Where on the platform does it happen?

Chart component from Managed Package

How do we replicate the issue?

Set a custom background colour property in the Custom Data Provider

Expected behavior (i.e. solution)

Custom background colours should be shown

Other Comments

I see this error in console:

aura_proddebug.js:61421 WARNING: SecureElement: [object HTMLStyleElement]{ key: {"namespace":"lwcc"} } does not allow setting the type attribute, ignoring!

possibly the method for injecting the style is no longer allowed?

Additionally I would like to use an array for this property but I'm not sure the syntax.

Here's my example code:

global inherited sharing class MyCustomChartDataProvider extends lwcc.ChartDataProvider {
  public override void init(Object initParameter) {}
  
  public override List<lwcc.ChartDataProvider.ChartData> getData() {
    List<lwcc.ChartDataProvider.ChartData> chartDataList = new List<lwcc.ChartDataProvider.ChartData>();
    lwcc.ChartDataProvider.ChartData data = new lwcc.ChartDataProvider.ChartData();
    data.detail = [95.0, 5.0];
    data.labels = ['Label 1','Label 2'];
    data.bgColor = '["rgb(100,100,100)","rgb(200,200,200)"]';
    chartDataList.add(data);
    return chartDataList;
  }
}

Who is the bug affecting?

Consumers of LightningWebChartJS repo individually with custom deploy of components.

What is affected by this bug?

Some of the Charts are broken and not rendered

When does this occur?

After enabling LWS(Lightning Web security) on the org.

Where on the platform does it happen?

Where c-chart LWC components are used.

How do we replicate the issue?

Enable setting Use Lightning Web Security for Lightning web components from Setup -> Session settings

Expected behavior (i.e. solution)

All Charts should work with LWS turned on.

Other Comments

Problem: sanitize method in utils lwc

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