I have a Plotly.JS donut chart that I want users to be able to hover over data and see the definition of each type of healthcare in addition to the label and data. For example, when they hover over Specialty Care, I would want it to look like this:
Specialty Care
42.9%
Specialty Care Definition
I thought I could add an array of definitions (see "desc:") and add it hoverinfo, but either you can't or I'm doing it wrong. My question is how would I get this to work so I can have it look like the bolded above?
Here's my codepen: https://codepen.io/tenebris_silentio/pen/OJNJxGX
<!DOCTYPE html>
<html lang="en">
<div id='myDiv'>
<script>
var ultimateColors = [
['rgb(0, 25, 51)', 'rgb(0, 76, 153)', 'rgb(51, 153, 255)', 'rgb(153, 204, 255)', 'rgb(51, 51, 255)', 'rgb(204, 255, 255)']
];
var data = [{
values: [4, 21, 8, 1, 1, 14],
labels: ['Primary Care', 'Specialty Care', 'Mental Health', 'Inpatient/Acute Care', 'Long-term Care', 'General Care/Not Specified'],
desc: ['Primary Care Definition', 'Specialty Care Definition', 'Mental Health Definition', 'Inpatient/Acute Care Definition', 'Long-term Care Definition', 'General Care/Not Specified Definition'],
domain: {column: 0},
name: 'Sources',
marker: {
colors: ultimateColors[0]
},
hoverinfo: 'label+percent+desc',
hole: .4,
type: 'pie'
}];
var layout = {
title: 'Access Projects by Care Type' + '<br>' + 'N = 49',
annotations: [
{
font: {
size: 17
},
showarrow: false,
text: '',
x: 0.5,
y: 0.5
},
],
height: 650,
width: 800,
showlegend: true,
grid: {rows: 1, columns: 1}
};
Plotly.newPlot('myDiv', data, layout);
</script>
Geez, don't you hate when the answer is so close it could hit you in the face? All I needed to do is add a text array and reference it. I just needed to fix the section in var data. In particular, I added the "text:" section and "textinfo" (to take out the newly added definitions from appearing inside the donut). Then I just added the text reference to hoverinfo. That was it!
var data = [{
values: [4, 21, 8, 1, 1, 14],
labels: ['Primary Care', 'Specialty Care', 'Mental Health', 'Inpatient/Acute Care',
'Long-term Care', 'General Care/Not Specified'],
desc: ['Primary Care Definition', 'Specialty Care Definition', 'Mental Health
Definition', 'Inpatient/Acute Care Definition', 'Long-term Care Definition', 'General
Care/Not Specified Definition'],
text: ['The project is focused on primary care.', 'The project is focused on specialty
care.', 'The project is focused on mental health', 'The project is focused on
inpatient/acute care', 'The project is focused on long-term care', 'The type of care
is not indicated or is not specific to one type'],
textinfo: 'none',
domain: {column: 0},
name: 'Sources',
marker: {
colors: ultimateColors[0]
},
hoverinfo: 'label+percent+desc+text',
hole: .4,
type: 'pie'
}];