使Chart.js ToolTip不同于数据

Question

I am new to front-end development and I am curious what is the best way to have the tooltip in Chart 2.0 and Angular-Charts Beta 1.0 different from the label being passed back?:

HTML:

<canvas id="panel1bar" class="chart-bar" height="229px"
                chart-series="[profile['detail']['freq-histogram'].series]"
                chart-labels="profile['detail']['freq-histogram']['short-labels']"
                chart-data="[profile['detail']['freq-histogram'].data]"
                chart-colours="['#008080']"
                chart-legend="false"/>

If only there was an option to set chart-tooltip = "profile['detail']['freq-histogram']['long-labels']"

I only ask this as I am getting a long and short label passed back to me and I want to display the full label on Hover in the tool tip

Answer 1

There should be a chart-options attribute for the canvas. You can add it like: chart-options="chartOptions" .

Then on your controller you can change the tooltip template by using this code:

$scope.chartOptions = {
     tooltipTemplate: "<%= value %>"
}

But i am not sure if it works properly in chartjs 2.0. For that you can check this issue here : https://github.com/chartjs/Chart.js/issues/2322

Answer 2

You could pass this to the attribute chart-options="options" :

$scope.options= {
    tooltips: {
        callbacks: {
            title: function(tooltipItem, data) {
                return $scope.profile['detail']['freq-histogram']['long-labels'][tooltipItem[0].index];
            }
        }
    }
};