v2.4.43

VueUiXy & VueUiStackbar #139

• Add @selectTimeLabel emit

Use this emit to use the data at the given time label:

<VueUiStackbar
  :dataset="dataset"
  :config="config"
  @selectTimeLabel="selectTimeLabel"
/>

function selectTimeLabel(data) {
  console.log(data);
}

• Add #time-label scoped slot

Use this slot to customize time labels with your own svg text elements:

<VueUiStackbar :dataset="dataset" :config="config">
  <template #time-label="{ x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
    <g @click="() => selectTimeLabel({ absoluteIndex, content, /* or whatever you need for your custom click event */ })">                
      <text
        :x="x"
        :y="y"
        :font-size="fontSize"
        :text-anchor="textAnchor"
        :fill="fill"
      >
        {{ content }}
      </text>
      <text
        :x="x"
        :y="y + fontSize"
        :font-size="fontSize * 0.8"
        :text-anchor="textAnchor"
        fill="grey"
      >
        {{ content }}
      </text>
    </g>
  </template>
</VueUiStackbar>

An additional config attribute was also added for both components to show/hide time label in the tooltip:

• VueUiXy:

config.chart.tooltip.showTimeLabel: boolean; // default: true

• VueUiStackbar:

config.style.chart.tooltip.showTimeLabel: boolean; // default: true