how to customize chart labels

[sombriks]

i am making use of prefix and suffix but i still present the percentage.

is there a way to present another value (i have the absolute value, would like to present it instead of the percentage) in lables?

using VueUiSparkbar.

this library is awesome.

thanks for any guidance.

[sombriks]

Ok i got a workaround:

const receitaDespesaTotalPeriodo = computed(() => {
  const total = dashboardState.store.dashboard.receitaDespesaTotalPeriodo
    .reduce((acc, e) => {
      acc += e.value
      return acc
    }, 0)
  return dashboardState.store.dashboard.receitaDespesaTotalPeriodo.map(r => ({
    ...r,
    name: `${r.label} ${prepareMoney(r.value)}`,
    value: 100 * r.value / total,
  }))
})

and styles.labels.value.show=false in config.

[graphieros]

Hey:)

I'm glad you found a workaround.

However there is a way to make it work natively:

1. config

• set style.layout.independant: true (it's the default)
• set style.layout.percentage: false
• set style.layout.target to your total (your whole config object should be a computed property), so bars are drawn as value / target

2. dataset

• You can pass directly your values and use prefix | suffix

Here is an example:

<script setup>
    import { computed } from "vue";
    import { VueUiSparkbar } from "vue-data-ui";
    import "vue-data-ui/style.css"

    const config = computed(() => {
        return {
     "style": {
    "backgroundColor": "#FFFFFF",
    "fontFamily": "inherit",
    "layout": {
      "independant": true,
      "percentage": false,
      "target": 1050
    },
    "gutter": {
      "backgroundColor": "#e1e5e8",
      "opacity": 100
    },
    "bar": {
      "gradient": {
        "show": true,
        "intensity": 40,
        "underlayerColor": "#FFFFFF"
      }
    },
    "gap": 4,
    "animation": {
      "show": true,
      "animationFrames": 60
    },
    "labels": {
      "fontSize": 16,
      "name": {
        "position": "top",
        "width": "100%",
        "color": "#1A1A1A",
        "bold": true
      },
      "value": {
        "show": true,
        "bold": true
      }
    }
  }
}
    })

    const dataset = computed(() => {
        return [
  {
    "name": "KPI 1",
    "value": 600,
    "color": "#6376DD",
    "prefix": "$",
    "suffix": "",
    "rounding": 1
  },
  {
    "name": "KPI 2",
    "value": 450,
    "color": "#42d392",
    "prefix": "$",
    "suffix": "",
    "rounding": 1
  }
]
    })

</script>

<template>
    <div style="width:600px">
        <VueUiSparkbar :config="config" :dataset="dataset" />
    </div>
</template>

Cheers

[sombriks]

Hey, thanks a lot for that, will use that way, it simplifies many of my dashboard computed values!

[sombriks]

And id got gorgeous! Thanks again for the guidance!

const receitaDespesaBarConfig = computed(() => {
  const total = dashboardState.store.dashboard.receitaDespesaTotalPeriodo
    .reduce((acc, e) => {
      acc += e.value
      return acc
    }, 0)
  return {
    style: {
      ...sparkBarConfig.style,
      layout: {
        ...sparkBarConfig.style.layout,
        independant: true,
        percentage: false,
        target: total
      }
    }
  }
})

const receitaDespesaTotalPeriodo = computed(() => {
  return dashboardState.store.dashboard.receitaDespesaTotalPeriodo.map(r => ({
    ...r,
    name: r.label,
    prefix: "R$ "
  }))
})

[graphieros]

You're welcome ! That's neat indeed.

The docs should probably have examples of such use cases, as it is not intuitive to toggle these config options to achieve this kind of result.

Thanks for using the lib, and for reaching out:)