Add layout Grid and Minor Grid

Hi I was not able to find example on how to add desired number of grid, minor grid
similar to this example (bokeh/stocks.ts at branch-2.4 · bokeh/bokeh · GitHub)

    // Add axis and grid
    const xaxis = new Bokeh.DatetimeAxis({axis_line_color: null, axis_label: "time"})
    const yaxis = new Bokeh.LinearAxis({axis_line_color: null, axis_label: "price"})
    plot.add_layout(xaxis, "below")
    plot.add_layout(yaxis, "left")
    plot.add_layout(new Bokeh.Grid({ticker: xaxis.ticker, dimension: 0}))
    plot.add_layout(new Bokeh.Grid({ticker: yaxis.ticker, dimension: 1})) 

something like,

plot.add_layout(new Bokeh.Grid({ticker: xaxis.ticker, desired_num_ticks: 10}))  

also looking for the method to set grid colors in JS

plot.add_layout(new Bokeh.Grid({ticker: xaxis.ticker, color: "Red"}))  

Thanks

You can define a ticker in the Grid.ticker property, but doing so will no longer align the grid with the axis ticks. I would suggest updating the ticker property on the axis object itself so that the grid lines align with the ticks. You can change the color/alpha/width of the grid lines with the properties below.

The below code has not been tested completely, but I think it will get you in the right direction.

const yaxis = new Bokeh.LinearAxis({
  axis_line_color: null,
  axis_label: "price",
});
yaxis.ticker = new Bokeh.BasicTicker({
  desired_num_ticks: 30,
  num_minor_ticks: 5,
});
const yGrid = new Bokeh.Grid({
  ticker: yaxis.ticker,
  dimension: 1,
  grid_line_alpha: 0.3,
  grid_line_color: 'red',
  grid_line_width: 4,
});
plot.add_layout(yGrid);

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