Vue Chart RangeBar

[Joel]

Hello , i have an issue with converting the milliseconds to human readable date,

I cannot find the solution for vue, but I have found multiple solutions for jquery.

What am i doing wrong ?

Chart.m-4.p-5( @seriesclick="onSeriesClick" :style="{ height: getChartHeight() }" )

  ChartTooltip(:render="'tooltipRender'" background="#fff" color="#000")

    template(v-slot:tooltipRender="{ props }")

      .d-flex.align-items-center.flex-column.tooltip-content

        h6.font-weight-bold.text-center.tooltip-category-title {{ props.point.category }}

        .d-flex.align-items-center

          span {{ $t('home.rangeBarChart.date.start') }} :

          span.font-weight-bold.ml-1 {{ labelContentFrom(props.point)}}

        .d-flex.align-items-center

          span {{ $t('home.rangeBarChart.date.end') }} :

          span.font-weight-bold.ml-1 {{ labelContentTo(props.point)}}

  ChartTitle( v-if="chartTitle && chartTitle !== ''"  :text="$t('home.rangeBarChart.'+ chartTitle + '.title' )"  align='left' color='#475467' :font="'600 16px Inter'")

  ChartSeries

    ChartSeriesItem(:type="'rangeBar'", :data-items="myDataItemsComputed"  :category-field="'phase'" :font="'600 14px Inter '" :color="barItemColor"  :baseUnit="'months'" )

      ChartSeriesLabels

        ChartSeriesLabelsFrom(:content="labelContentFrom")

        ChartSeriesLabelsTo(:content="labelContentTo")

  ChartValueAxis

    ChartValueAxisItem(

    :major-grid-lines='{visible: false }'

    :valueAxis="valueAxisComputed" 

    :fromField="'min'" 

    :toField="'max'"

    :font="'600 14px Inter '"

    )

 

 

I noticed in the jquery example, the have this : labels: {
            template: "#= kendo.toString(new Date(value), 'HH:mm') #"
          }

i have tried adding this code :

labels: {

            template: `<div>{{ new Date(#= value #).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' }) }}</div>`

          }

 

 

it does not work, any suggestions would be greatly appreciated. Thank you

[Joel]

I have resolved my question