JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<html>
    <body  >
        <div style="width:100%x; height:400px" id="map"></div>  
    </body>
</html>

JavaScript

//Stations layer 
var stations = []; // my  data of stations i want in a vector layer
var station1 = {
    position:new OpenLayers.Geometry.Point(-5000000,0),
    data: {
        bikes: 8,
        docks: 20
    }
}
var station2 = {
    position:new OpenLayers.Geometry.Point(500000,4000000),
    data: {
        bikes: 2,
        docks: 10
    }
}
stations.push( new OpenLayers.Feature.Vector(station1.position, station1.data));
stations.push( new OpenLayers.Feature.Vector(station2.position, station2.data));

//how to define a custom style to display BOTH labels of stations datas (bikes and docks) one on top, one on bottom of the green circle centered to the station position?
var context = {
    label : function(station){
        // docks or bikes , how ?
        return station.data.bikes 
    }  ,
    yOffset : function(station){
        // - for docks, + for bikes , how ?
        return  25
    }
}

var style = new OpenLayers.Style({
    pointRadius : 15,
    fillColor: '#32cd32',     
    label: '${label}',
    labelYOffset: "${yOffset}",
},{
    context:context
});

var stationsLayer = new OpenLayers.Layer.Vector('Stations' , {styleMap :new OpenLayers.StyleMap(style)} );
stationsLayer.addFeatures(stations);

var map = new OpenLayers.Map({
    div: "map",
    center : [0,0],
    zoom:2,
    layers: [new OpenLayers.Layer.OSM(),stationsLayer ],
    controls:[new OpenLayers.Control.Navigation(),new OpenLayers.Control.LayerSwitcher()]
});