Area Chart not properly rendering the values/color

[Germie Fernandez]

Good day,

I am experiencing a weird render for the Area Chart, there are time when the area chart shows something like the image below, it is not fully displaying the color, or it failed to render it.
Example 1:
Example 2:

When the component unmounts and then I reopen it again, the chart was render successfully like this:

Example 1:

Example 2:

This is the sample html:

<e-series

                            v-if="dry.length > 0"

                            :dataSource="dry"

                            type="Area"

                            name="Road: Dry"

                            xName="chartDate"

                            yName="value"

                            yAxisName="yAxisRoadCondition"

                            tooltipMappingName="chartDate"

                            tooltipFormat="Road: <b>Dry</b>"

                        />

                        <e-series

                            v-if="wet.length > 0"

                            :dataSource="wet"

                            type="Area"

                            name="Road: Wet"

                            xName="chartDate"

                            yName="value"

                            yAxisName="yAxisRoadCondition"

                            tooltipMappingName="chartDate"

                            tooltipFormat="Road: <b>Wet</b>"

                        />

                        <e-series

                            v-if="slush.length > 0"

                            :dataSource="slush"

                            type="Area"

                            name="Road: Slush"

                            xName="chartDate"

                            yName="value"

                            yAxisName="yAxisRoadCondition"

                            tooltipMappingName="chartDate"

                            tooltipFormat="Road: <b>Slush</b>"

                        />

                        <e-series

                            v-if="loose.length > 0"

                            :dataSource="loose"

                            type="Area"

                            name="Road: Loose Snow"

                            xName="chartDate"

                            yName="value"

                            yAxisName="yAxisRoadCondition"

                            tooltipMappingName="chartDate"

                            tooltipFormat="Road: <b>Loose Snow</b>"

                        />

                        <e-series

                            v-if="mixed.length > 0"

                            :dataSource="mixed"

                            type="Area"

                            name="Road: Mixed Freezing Rain"

                            xName="chartDate"

                            yName="value"

                            yAxisName="yAxisRoadCondition"

                            tooltipMappingName="chartDate"

                            tooltipFormat="Road: <b>Mixed Freezing Rain</b>"

                        />

                        <e-series

                            v-if="packed.length > 0"

                            :dataSource="packed"

                            type="Area"

                            name="Road: Packed Snow"

                            xName="chartDate"

                            yName="value"

                            yAxisName="yAxisRoadCondition"

                            tooltipMappingName="chartDate"

                            tooltipFormat="Road: <b>Packed Snow</b>"

                        />

                        <e-series

                            v-if="black.length > 0"

                            :dataSource="black"

                            type="Area"

                            name="Road: Black Ice"

                            xName="chartDate"

                            yName="value"

                            yAxisName="yAxisRoadCondition"

                            tooltipMappingName="chartDate"

                            tooltipFormat="Road: <b>Black Ice</b>"

                        />

This is the sample data that I currently used.

{

    "dry": [{"chartDate":"Dec 07 9:43 AM","value":0.05}],

    "slush": [{"chartDate":"Dec 08 7:30 AM","value":0.05},{"chartDate":"Dec 08 7:45 AM","value":0.05},{"chartDate":"Dec 08 8:00 AM","value":0.05},{"chartDate":"Dec 08 8:15 AM","value":0.05},{"chartDate":"Dec 08 8:30 AM","value":0.05},{"chartDate":"Dec 08 8:45 AM","value":0.05},{"chartDate":"Dec 08 9:00 AM","value":0.05},{"chartDate":"Dec 08 9:15 AM","value":0.05},{"chartDate":"Dec 08 9:30 AM","value":0.05},{"chartDate":"Dec 08 12:15 PM","value":0.05},{"chartDate":"Dec 08 12:30 PM","value":0.05},{"chartDate":"Dec 08 12:45 PM","value":0.05},{"chartDate":"Dec 08 1:00 PM","value":0.05},{"chartDate":"Dec 08 1:15 PM","value":0.05},{"chartDate":"Dec 08 1:30 PM","value":0.05},{"chartDate":"Dec 08 1:45 PM","value":0.05},{"chartDate":"Dec 08 2:00 PM","value":0.05},{"chartDate":"Dec 08 3:30 PM","value":0.05},{"chartDate":"Dec 08 3:45 PM","value":0.05},{"chartDate":"Dec 08 4:00 PM","value":0.05},{"chartDate":"Dec 08 4:15 PM","value":0.05},{"chartDate":"Dec 08 4:30 PM","value":0.05},{"chartDate":"Dec 08 4:45 PM","value":0.05},{"chartDate":"Dec 08 5:00 PM","value":0.05},{"chartDate":"Dec 08 5:15 PM","value":0.05}],

    "loose": [{"chartDate":"Dec 08 11:45 AM","value":0.05},{"chartDate":"Dec 08 12:00 PM","value":0.05},{"chartDate":"Dec 08 2:15 PM","value":0.05},{"chartDate":"Dec 08 2:30 PM","value":0.05},{"chartDate":"Dec 08 2:45 PM","value":0.05},{"chartDate":"Dec 08 3:00 PM","value":0.05},{"chartDate":"Dec 08 3:15 PM","value":0.05},{"chartDate":"Dec 08 5:30 PM","value":0.05},{"chartDate":"Dec 08 5:45 PM","value":0.05},{"chartDate":"Dec 08 6:00 PM","value":0.05}],

    "black": [{"chartDate":"Dec 08 9:45 AM","value":0.05},{"chartDate":"Dec 08 10:00 AM","value":0.05},{"chartDate":"Dec 08 10:15 AM","value":0.05},{"chartDate":"Dec 08 10:30 AM","value":0.05},{"chartDate":"Dec 08 10:45 AM","value":0.05},{"chartDate":"Dec 08 11:00 AM","value":0.05},{"chartDate":"Dec 08 11:15 AM","value":0.05},{"chartDate":"Dec 08 11:30 AM","value":0.05},{"chartDate":"Dec 08 6:15 PM","value":0.05},{"chartDate":"Dec 08 6:30 PM","value":0.05},{"chartDate":"Dec 08 6:45 PM","value":0.05},{"chartDate":"Dec 08 7:00 PM","value":0.05},{"chartDate":"Dec 08 7:15 PM","value":0.05},{"chartDate":"Dec 08 7:30 PM","value":0.05},{"chartDate":"Dec 08 7:45 PM","value":0.05},{"chartDate":"Dec 08 8:00 PM","value":0.05},{"chartDate":"Dec 08 8:15 PM","value":0.05},{"chartDate":"Dec 08 8:30 PM","value":0.05},{"chartDate":"Dec 08 8:45 PM","value":0.05},{"chartDate":"Dec 08 9:00 PM","value":0.05},{"chartDate":"Dec 08 9:15 PM","value":0.05},{"chartDate":"Dec 08 9:30 PM","value":0.05},{"chartDate":"Dec 08 9:45 PM","value":0.05},{"chartDate":"Dec 08 10:00 PM","value":0.05},{"chartDate":"Dec 08 10:15 PM","value":0.05},{"chartDate":"Dec 08 10:30 PM","value":0.05},{"chartDate":"Dec 08 10:45 PM","value":0.05}]

}

[Swetha Babu]

Hi Germie,

Greetings from Syncfusion.

We have created an application to reproduce the reported scenario. But, we are unable to replicate the same. Please find the tested sample for the below stackblitz link.

Sample link: https://stackblitz.com/edit/angular-a3xvsv-jxjznr?file=app.component.html,app.component.ts

Screenshot:

Please modify the above sample to replicate the reported scenario and provide the below requested details.

1. ValueType of PrimaryXAxis
2. Data to render the chart
3. Package version

The above details will be helpful for us to analyze further and assist you better.

Regards,

Swetha