Vue 3 Sparkline Component doesn't show line

[Paul Livingstone]

Hi,

I am using the Synfusion Ej2 Vue Charts version 22. Although I'm not getting any issues in the console, the actual line doesn't show on the spark line component.

import {

SparklineComponent as EjsSparkline,

SparklineTooltip,

DateTime

} from '@syncfusion/ej2-vue-charts';

...

const datasets = ref<{

label: string;

data: { x: number; xval: Date; yval: number }[];

}>({

label: 'Label',

data: [

{

x: 0,

xval: new Date('2024/01/01'),

yval: 5000

},

{

x: 1,

xval: new Date(),

yval: 8000

}

]

});

const sparkline = [SparklineTooltip, DateTime];

provide('sparkline', sparkline);

Then in the template I have the following code:

<div

v-show="datasets?.data.length"

>

<EjsSparkline

id="sparkline"

ref="planSparkLine"

:data-source="datasets?.data"

type="Line"

x-name="xval"

y-name="yval"

:tooltip-settings="{

visible: true,

format: '${xval} : ${yval}'

}"

value-type="DateTime"

fill="#3C78EF"

height="218px"

:line-width="5"

format="n"

/>

</div>

The tooltip works with the correct values and hovers over at the correct points, but the line itself does not show.

I have followed the documentation, but is there anything I am missing.

File is also attached.

Attachment: PlanSparkLine.vue_36804f2b.zip

[Swetha Babu]

Hi Paul,

We are validating the reported scenario and update you with further details within two business day(25/3/24).

[Paul Livingstone]

Hi Swetha,

There has been no update on this in more than two business days.

Is there an update?

[Nishanthi Panner Selvam]

Paul,

Sorry for the delay,

We have ensured your reported scenario by creating sparkline sample in vue 3. Sparkline rendered properly as per behavior. Additionally, we suggest you to declare the template as per the below code-snippet.

Code-snippet:

<template>

  <ejs-sparkline id="sparkline" :lineWidth='lineWidth' :dataSource='dataSource' :valueType='valueType' :height='height'  :xName='xName' :yName='yName' :type='type' :tooltipSettings='tooltipSettings'></ejs-sparkline>

</template>

Screenshot:

Kindly revert us if you have any concerns.

Regards,

Nishanthi

Attachment: Spark_e02bb27a.zip