To highlight one point in Violin chart PlotlyJS

Question

I am using Violin chart of PlotylyJS library, and it takes an array of elements and plots it on the chart. Is possible if I want to highlight one point with a different color from that array?

Like if my array is

demoViolin = [31.8, 63.5, 65, 59, 71, 72, 79, 68, 66, 89, 71, 67, 77]

I want to plot this on the graph but I want the point 65 to be highlighted with a different color.

hey did you ever figure out a solution for this? thanks – Aristides Mairena May 27 '21 at 17:28 — Aristides Mairena, May 27 '21 at 17:28
no, couldn't figure this out – Salomi Edward May 28 '21 at 04:10 — Salomi Edward, May 28 '21 at 04:10

jornathan · Accepted Answer · 2022-02-17T01:48:06.407

I hope this could be Insight of your issue.

You can use selectedpoints with selected for highlighting.

var data = [{  
    //https://plotly.com/javascript/reference/violin/#violin-selectedpoints
    selectedpoints: [2],
    selected : {
        marker :{
            color: 'rgb(255,0,0)'
        }
    },
    //jitter: 0, //If needed points align same x-axis
    type: 'violin',
    y: demoViolin, 
    points: 'all',  
    box: {
        visible: true
    },
    boxpoints: true,
    ...
}

Here is Demo.

Also, please remind boxplot support feature outlier(see Here).

To highlight one point in Violin chart PlotlyJS

1 Answers1