[Chartjs]-Highlight area programmatically – Chart.js

by

3👍

✅

Just loop through the doughnut segments, match based on label and swap / restore the fill color.

function highlight(label) {
    myDoughnutChart.segments.forEach(function (segment, i) {
        if (segment.label == label) {
            if (segment.fillColor == segment.highlightColor)
                segment.restore(["fillColor"]);
            else
                segment.fillColor = segment.highlightColor;
            myDoughnutChart.render();                    
        }
    })
}

Fiddle – http://jsfiddle.net/35of1Lzg/

I’ve disabled tooltips and the tooltip highlight by setting tooltipEvents = [], but if you want them back you can always remove it from the options, but then hover / mouseout and the button click will do the same thing.

To popup the tooltip too when highlighting use this

function highlight(label) {
    myDoughnutChart.segments.forEach(function (segment) {
        if (segment.label == label) {
            if (segment.fillColor == segment.highlightColor)
                segment.restore(["fillColor"]);
            else 
                segment.fillColor = segment.highlightColor;

            myDoughnutChart.render()
        }
    })

    var activeSegements = [];
    myDoughnutChart.segments.forEach(function (segment) {
        if (segment.fillColor === segment.highlightColor) {
            activeSegements.push(segment)
        }
    });

    myDoughnutChart.showTooltip(activeSegements, true)
}

http://jsfiddle.net/jdr5381e/

0👍

FYI the fiddles are no longer working, you’ll need to replace the links to the Chart.min.js
I used these to get them working: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js

Leave a comment