Add Labelset/Label in BokehJs with one of the axis Categorical

Community Support
1

Hi guys, I’m trying the add labelset/label in BokehJs plot with one of the axis categorical. I know label allows only numeric coordinates but using LabelSet it is feasible to label with categorical axis.

I tried adding LabelSet but it seemed not to throw any syntactical error. But, I could not see desired output in the plot. (using 3.1.0 BokehJs version)

Minimal, Reproducible Example -


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-3.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-3.1.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-3.1.0.min.js"></script>

<script>
//The order of CSS and JS imports above is important.

// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
    data: {
	marks: [66, 17, 72, 98, 54, 82],
    roll_no: [0, 1, 2, 3, 4, 5],
    names: ['Joey', 'Chandler', 'Monica',
    'Phoebe', 'Rachel', 'Ross']
	}
	});

var xdr = ['Joey', 'Chandler', 'Monica',
    'Phoebe', 'Rachel', 'Ross'];

var ydr = new Bokeh.Range1d({
            start: 0,
            end: 100
});

// Creating an empty figure
const p = Bokeh.Plotting.figure({
    height: 400,
    width: 600,
	x_range: xdr,
	y_range: ydr
});

// Labelling the X-Axis
p.xaxis.axis_label = 'Student_Names'
 
// Labelling the Y-Axis
p.yaxis.axis_label = 'Marks'

// Using LabelSet, we are labelling each of the
//points with names created in source
p.circle({ field: "names" },
        { field: "marks" },
        {
            source: source,
            size: 12
        });

// Using LabelSet, we are labelling each of the
// points with names created in source
var labels = new Bokeh.LabelSet( {x: 'names', y: 'marks', text: 'roll_no',
                  x_offset: 5, y_offset: 5, source: source});
 
//Adding that label to our figure
p.add_layout(labels);

//Showing the above plot
const plt = Bokeh.Plotting;

plt.show(p);


</script>
</head>

<body>
   
</body>

</html>

plot
plot976×625 20.8 KB

2

I don’t use BokehJS directly much (or at all really) but offhand I’d suggest you try specifying

{ field: "names" }, { field: "marks" },

the same as you did for circle. The "field’ is what tells Bokeh to reference a CDS column for the data.

3

Tried as suggested.That throws error as
mentioned below

Uncaught Error: unknown property LabelSet.field.

Is there a way of adding a numerical x-axis (additional one) opposite to categorical axis or assign some hidden numeric value to each categorical values with which we can at least apply Label logic?

4

Your tried like x: {field: …}? Please share the actual code you tried so there is no speculation or misunderstandings.

5

This is how I tried (hope this is how you wanted to try)…same as done for circle plot…

var labels = new Bokeh.LabelSet( { field: "names" },
        { field: "marks" }, { text: 'roll_no',
                  x_offset: 5, y_offset: 5, source: source});
7

Oh Nice…this actually worked…Much thanks :slight_smile:

var labels = new Bokeh.LabelSet( { x : { field: "names" },
       y: { field: "marks" },  text: {field :'roll_no' },
                  x_offset: 5, y_offset: 5, source: source} );

Screenshot 2023-09-27 143006
Screenshot 2023-09-27 143006978×655 25.1 KB

1 Like
8

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.