Marc Rasmussen Marc Rasmussen - 13 days ago 5
Javascript Question

plotly create a vertical line to show average

So i am attempting create a horizontal bar chart that has a horizontal line showing average.

So far i have attempted the following:

First added my barChart series (it comes from the following array):

"series": [
{
"value": 100, "label": "F1"
},
{
"value": 25, "label": "F2"
},
{
"value": 30, "label": "Jedi Jeremiah 555"
},
{
"value": 40, "label": "F4"
},
{
"value": 55, "label": "F5"
},
{
"value": 60, "label": "F6"
},
{
"value": 71, "label": "F7"
},
{
"value": 15, "label": "F8"
},
{
"value": 88, "label": "F9"
},
{
"value": 90, "label": "F10"
}
]


Which converts to an array of the following objects:

{name: 'F1', orientation: "h", x: [100], y: ["F1"]}


Then afterwards i add the following series:

{
name: 'average organization',
type: 'scatter',
x: [60],
orientation: 'h'
}


This creates the following chart:

enter image description here

As you can see there is only a blue dot indicating the average which is not the result im looking for.

I know that there are shapes however i wish to have it as a part of the chart so that you can either select or deselect it.

Does anyone know how you might achieve this?

Answer

It would help if you would provide a jsFiddle or codePen or other example to execute it directly:-) I think the problem is, that you want to have a vertical line but set orientation: 'h' to the last "average-organisation"-object instead using orientation: 'v'.

I reproduced your example in a jsFiddle and add the desired behaviour: https://jsfiddle.net/vepycde0/

Hope it helps:-)

Edit: For hiding the "0" on yAxis use y: [""] as seen in that jsFiddle: https://jsfiddle.net/vepycde0/1/