Vue Charts.css

# Tooltips

Tooltips allow you to display additional information about the data, using little popup boxes, when hovering over the data.

# Add Tooltips

To add tooltips to your data, you can either use this wrapper's in-built tooltip generator, or expand it with your own logic and formatting.

# In-built Tooltips



 


<charts-css
    ...
    show-tooltips
/>
1
2
3
4

# Customize Tooltips

You will need to enable tooltips with the show-tooltips boolean prop and then code a handler for resolve-data-tooltip



 
 





 
 
 
 




<charts-css
    ...
    show-tooltips
    :resolve-data-tooltip="resolveDataTooltip"
/>

<script>
    export default {
        methods: {
            resolveDataTooltip(value, label, datasetName, rowIndex, colIndex, hasMultipleDatasets = false)
            {
                return value + ( value == 1 ? 'apple' : 'apples' );
            },
        },
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

← Legend →