How to check in beforeInit() if a bar is horizontal in a plugin

[Udemology]

Is there a way to check in beforeInit if a bar is horizontal in a plugin?
I want to only activate the plugin if the conditions are met, which is type: 'bar' and indexAxis: 'y'.

beforeInit() recognizes the chart type: chart.config.type !== 'bar' but when I add a second condition chart.config.options.indexAxis !== 'y' it ignores the last condition.

I guess it needs to load all the details beforehand, because it does recognizes it on beforeDatasetsDraw().
However, by doing that I get the console.warn loaded twice due to how beforeDatasetsDraw() works.

Any suggestions? Thank you in advance.

beforeInit: (chart) => {
        console.log(chart)
        if (chart.config.type !== 'bar' && chart.config.options.indexAxis !== 'y') {
          console.warn('This plugin is only compatible with horizontal floating bar charts.');
          return;
        }
      },

[Udemology]

Sorry I just realize I made such a rookie mistake.
I manage to solve this on my own with hoisting and === instead of !==

[stockiNail]

@Udemology if I may jump in this discussion, as far as I understood, your plugin should work only with horizontal bar controllers.

I don't know if you want to have a generic plugin which can manage all cases where you can have an horizontal bar controllers.
I'm writing that because the test you described, you can miss:

1. combined charts (line/bar) where the type is 'line' but you plugin maybe would work on bar controller as well
2. the indexAxis option could be set at dataset level (not only on chart options).

[Udemology]

Hi @stockiNail, thank you for your comment. You are pointing out many things I haven`t considered. In essence it must only be on horizontal bar chart. On vertical it will not work, I probably need to build a different structure for that. I would love to explore this but currently this territory is completely out of my comfort zone.

I do know it will not support combo chart bar/line chart. As it is so depended on the bar chart data chart.getDatasets[0].data[0].width.

Main reason I am trying to create a plugin based on the design of this thread: #11221 (reply in thread)

Do you maybe have a simple sample of horizontal bar controllers? Or any source that would be easy to understand.
I have tried to understand the official documentation of creating controller/new charts and scales but it is way above my level of understanding.

In essence the code below is how I have structured it now.

    let value = 0; 
    const colors = {
      id: 'colors',
      afterInit: (chart) => {
        if (chart.config.type === 'bar' && chart.config.options.indexAxis === 'y') {
          value = 1;
        } else {
          console.warn('This plugin is only compatible with horizontal floating bar charts.');
        }
      },
      beforeDatasetsDraw(chart, args, plugins) {
        if(value === 0){
          return;
        }
        // if value would be 1 it should start drawing the gradient background effect
        all the code of the plugin to draw the effect
      }
   }

[stockiNail]

Main reason I am trying to create a plugin based on the design of this thread: #11221 (reply in thread)

Ah, now I understand! It's specific plugin so ignore my comment!

Do you maybe have a simple sample of horizontal bar controllers? Or any source that would be easy to understand.
I have tried to understand the official documentation of creating controller/new charts and scales but it is way above my level of understanding.

I have a sample but it's in java... I think I have something in javascript somewhere... Let me take time to find it.

[stockiNail]

@Udemology have a look to this codepen: https://codepen.io/stockinail/pen/qBJaoBL

I have create a horizontal bar controller, which extends bar one setting indexAxis to 'y' by default.
Then I have added the code you shared here and as you can see the plugin doesn't recognize it. ;)

Let me know what you think

[stockiNail]

FYI I've added the afterUpdate hook (that in my opinion could be better than the init one) where to test the dataset controller at dataset 0, if it's a bar controller or not.
Furthermore, having the test in afterUpdate hook, we could access to chart.options (instead of the config). This is helpful if indexAxis is set in the defaults.
But of course, for the use case you are addressing, this is just a "nice to have".

[Udemology]

@stockiNail Thank you so much. You have showed me some very interesting stuff that is completely new to me. I will be studying this more in-depth. I truly appreciate it. This will be a nice deep dive for me. Again thank you so much.