I've used a plotly.js parcats chart to make a sequential sankey (eg https://github.com/EE2dev/sequence-explorer). Here are the example parcats that shows changes in grades between quizzes:
var trace1 = {
type: 'parcats',
hoveron: 'color',
dimensions: [
{
label: 'Quiz 1',
values: ['Black', 'Black', 'Black', 'Brown', 'Brown', 'Brown', 'Red', 'Brown'],
},
{
label: 'Quiz 2',
values: ['Brown', 'Brown', 'Brown', 'Brown', 'Brown', 'Blue', 'Blue', 'Blue'],
},
{
label: 'Quiz 3',
values: ['Female', 'Female', 'Female', 'Male', 'Female', 'Male', 'Male', 'Male'],
},
],
};
var data = [ trace1 ];
var layout = {width: 600};
Plotly.newPlot('myDiv', data, layout);
When I hover over a path the full path from 'Quiz 1' to 'Quiz 3' highlights but what I'd like is for only the path between 'Quiz 1' to 'Quiz 2' to highlight. I tried hover on but nothing changed.
This is the fiddle
var trace1 = {
type: 'parcats',
hoveron: 'color',
dimensions: [
{
label: 'Quiz 1',
values: ['Black', 'Black', 'Black', 'Brown', 'Brown', 'Brown', 'Red', 'Brown'],
},
{
label: 'Quiz 2',
values: ['Brown', 'Brown', 'Brown', 'Brown', 'Brown', 'Blue', 'Blue', 'Blue'],
},
{
label: 'Quiz 3',
values: ['Female', 'Female', 'Female', 'Male', 'Female', 'Male', 'Male', 'Male'],
},
],
};
var data = [ trace1 ];
var layout = {width: 600};
Plotly.newPlot('myDiv', data, layout);<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>Is there a way to customize the hover functionality?
from Customise hover of parcats plotly.js chart
No comments:
Post a Comment