We Keep Coding

Plotly JavaScript: Customize y ticks or labels on y axis

Iam using Plotly.js https://plotly.com/javascript/. I am trying to develop a chart where I want to add a small image on each ticks on the y axis. For reference please see the image given below.
Notice the small gray discs on y axis (next to the texts "Red", "Green" and "Blue"). I am trying to achieve something like this. However on the reference document, I couldn't find anything that does this.
How can I achieve that?
[UPDATE]
After implementing the answer as suggested by #Ruben, and further making some updates, I get this little tip of the x-axis extended to the left to the negative side (ref. the screenshot of this extended tip below)

If it's really only about the dots, I've hacked together something that inserts this unicode shape as a solid, black circle at every bar using annotations. Then you can colour it if you want.
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
var layout = {
annotations: data[0].y.map((v, i) => ({
x: -0.75,
y: i,
xref: 'x',
yref: 'y',
text: "⬤",
showarrow: false,
font: {
size: 14,
color: ['red', 'blue', 'green'][i % 3]
}
}))
};
Plotly.newPlot('myDiv', data, layout);
<script src='https://cdn.plot.ly/plotly-latest.js'></script>
<div id='myDiv'></div>
Edit: now using changed labels:
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
data[0].y = data[0].y.map((v, i) => {
const color = ['red', 'blue', 'green'][i % 3];
return `${v} <span style="color: ${color};">⬤</span>`
})
var layout = {
xaxis: {
showline: true,
},
margin: {
l: 100,
}
};
Plotly.newPlot('myDiv', data, layout);
<script src='https://cdn.plot.ly/plotly-latest.js'></script>
<div id='myDiv'></div>

plotly.js scatter marker size in axes

I'm trying to create a scatter plot that will have marker size relative to the axis units.
As I see in the docs, the marker size is in pixels which is not very helpful.
I use this example:
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [1, 6, 3, 6, 1],
mode: 'markers',
type: 'scatter',
name: 'Team A',
text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
marker: { size: 12 } // here I need different marker per (x,y)
};
var data = [ trace1];
var layout = {
xaxis: {
range: [ 0.75, 5.25 ]
},
yaxis: {
range: [0, 8]
},
title:'Data Labels Hover'
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
I've tried sizeref for the marker, not sure how it works though.

Drawing a small vertical line on top of chart using High charts by specifying end coordinates

I am new to High Charts for drawing charts. My requirement is to draw a small vertical line on top of already drawn chart by specifying end coordinates. I can easily draw one using the JqPlot plugin and the image is given below.
The options I have used in JqPlot is
canvasOverlay: {
show: true,
objects: [
{line: {
name: 'stack-overflow',
lineWidth: 6,
start: [8, 0.5],
stop:[8, 0.7],
color: 'rgb(100, 55, 124)',
shadow: false
}}
]
}
On some research I have found that I can use plotLines in High charts
Stackoverflow Post
I have tried this option but it draws a full length red vertical line and I don't see any option to restrict the length of the line.
The code I have used is given below
xAxis: {
min: 0,
max: 35,
tickInterval: 5,
title: {text: "Time"},
plotLines: [{
color: 'red',
width: 5,
value: 5.5
}]
}
UPDATE:
JSFiddle link is given below
JSFIddle
Am I missing something or do I need to try some other options

You could use the Highcharts renderer option
function (chart) {
var lineStartXposition2 = lineStartXposition + chart.plotLeft + 10,
lineStartYposition2 = lineStartYposition + chart.plotTop + 10,
lineEndXposition2 = lineEndXposition + chart.plotLeft + 10,
lineEndYposition2 = lineEndYposition + chart.plotTop + 10;
chart.renderer.path(['M', positionX, positionY, 'L', positionX, positionEnd])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
});
Update 3 : New fiddle using point coordinates and variables
Fiddle

I hope the following link will help you
chart.addSeries({
name: 'Line Marker Values',
type:'scatter',
marker: {
symbol:'hline',
lineWidth:2,
lineColor:'rgba(253,0,154,0.9)',
radius:12
},
data: [32,35,37,28,42,35,27]
});
click here

You can use appropriately configured scatter series for this.
var chart = Highcharts.chart('container', {
series: [{
data: [1, 3, 4, 5, 1]
}, {
tooltip: {
pointFormat: null // don't dispaly tooltip
},
states: {
hover: {
enabled: false
}
},
type: 'scatter', // points don't need to be sorted
lineWidth: 3,
marker: {
enabled: false
},
showInLegend: false,
data: [
[2, 3], [2, 5]
]
}]
});
Live demo: http://jsfiddle.net/kkulig/gab2ow7f/

Is it possible to overlay a marker on top of a plotly.js box plot?

Suppose I'm using the simple box plot example in plotly's documentation:
var data = [
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
type: 'box'
}
];
Plotly.newPlot('myDiv', data);
I want to overlay a marker on top of the underlying data scatter plot that's to the left of the box plot. This marker would have its own hover text and everything. This is how I envision this looking:
Is there a way to do this in plotly? I've looked all over for an example of this, and I can't find anything that looks relevant. Thanks!

If you are plotting your points on top of the box plot (pointpos = 0) you can add another trace with an x value which is identical to your boxplot name, trace 0 in this case.
If you are plotting your points next to your boxplot, it becomes a lot more tricky because the scatter points do not have defined x-values on the axis.
You could your new point manually but then the hover info is still in the old position.
var data = [{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: 0,
type: 'box'
},
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: 1.8,
type: 'box'
},
{
x: ['trace 0'],
y: [18],
name: 'My special marker',
text: 'Some really interesting hover info',
marker: {
size: 20
}
},
{
x: ['trace 1'],
y: [18],
name: 'Another special marker',
text: 'Some really interesting hover info',
marker: {
size: 20
}
}
];
Plotly.newPlot('myDiv', data);
var boxPoint = document.getElementsByClassName('trace boxes')[1].getElementsByClassName('point')[0];
var point = document.getElementsByClassName('scatterlayer')[0].getElementsByClassName('point')[1];
var y = point.attributes['transform'].value.split(',')[1];
var x = boxPoint.attributes['transform'].value.split(',')[0];
point.setAttribute('transform', x + ', ' + y);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

Is it possible to have two Y Axis in a highstock chart from highcharts one on the left and another on the right?

Is it possible to have 2 yAxis in a highstock chart from highcharts one on the left and another on the right ?
Thanks

A very simple example:
First you have to create your new yAxis and set it's position.
{
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true
}
Then, when you create your serie you in what yAxis it will be placed.
{
type: 'column',
name: 'Other',
data: otherData,
yAxis: 2,
dataGrouping: {
units: groupingUnits
}
}
You can see it working here.