How are Chartjs ticks calculated / divided?

[aykaramba]

Hi guys.

Chartjs is great and I am creating a horizontal bar graph centered in the middle with +/- values on either side of centered x-axis. As part of this chat I am creating ticks at specific intervals and labeling items, which is a lovely feature.

However, after doing more testing today, I did not realize that the ticks feature seems to actually do the following:

• It has a maximum division of 10 segments and no more. I thought this was arbitrary.
• I can set up to 10 division segments along the x axis BUT, Chartjs ignores my explicit instruction for 10 divisions and instead takes the horizontal chart size and subdivides it into either 6, 7, 8 or some other arbitrary number that seems to land on even number vertical ticks as it looks like it is trying to avoid odd number ticks.
• Ticks don't seem to actually be centered like bar charts can and they always start at the 0 leftmost x-axis segment. This would be okay if it could actually draw segments at arbitrary positions and not ignore my explicit desire for 10 segments regardless of size of the x-axis of the chart. If I could center ticks as well and use +/- that would be more intuitive I guess.

The above are not requests or complains, but simply head scratchers. I cannot begin to fathom the default behaviour, what it does what it does and how to make it work like I need it to. I have read as much of the documentation on ticks that I could find and googled to see if anyone else was able to get arbitrary placement of ticks, but only I seem to have the issue.

So, I suspect all of the above is as a result of my misunderstanding of how ticks work. Does anyone have any tips or suggestion on how to get ticks to actually subdivide the x-axis in as many arbitrary divisions as I want and have an absolute fixed subdivision so that I can place a label at x-axis value 8 for example and have it remain 8 regardless of what the x-axis min max values might be?

Here is the code I am working with, please feel free to be blunt and tell me I am a dummy. I am certain I am not undrestanding how ticks work. Code:

<div style="width:1050px"><canvas id="myChart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script>
  const ctx = document.getElementById('myChart');
  ctx.height=800;

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [

'Adaptability',
'Anxiety',
'Art Appreciation',
'Attention-Seeking',
'Authoritarianism',
'Charisma',
'Compassion',
'Conformity',
'Conservatism',
'Creativity',
'Easy-Goingness',
'Emotional Expressivness',
'Emotional Stability',
'Honesty',
'Humor',
'Impulsivity',
'Industry',
'Intellect',
'Introspection',
'Irritability',
'Order',
'Perfectionism',
'Self Control',
'Sensation-Seeking',
'Sociability',
'Trust',
'Well-Being',
      
      ],
      datasets: [{
        label: 'Conflict Types',
        data: [

// Adaptability
5,         
          
// Anxiety
5,         
          
// Art Appreciation
6,          
          
// Attention-Seeking
12.5,          
          
// Authoritarianism
6,          
          
// Charisma
7,          
          
// Compassion
8,          
          
// Conformity
9,          
          
// Conservatism
4,          
          
// Creativity
12.5,          
          
// Easy-Goingness
10,          
          
// Emotional Expressivness
-3,          
          
// Emotional Stability
-12.5,          
          
// Honesty
-10,
          
// Humor
-5,
          
// Impulsivity
-7,          
          
// Industry
-1,          
          
// Intellect
7,          

// Introspection
2,          
          
// Irritability
0,          
          
// Order
8,          
          
// Perfectionism
9,          
          
// Self Control
-3,          
          
// Sensation-Seeking
-9,          
          
// Sociability
-11,          
          
// Trust
12,          
          
// Well-Being
4,
        
        ],
          
        backgroundColor: [
'rgb(	6, 214, 160	,0.2	)',
'rgb(	227, 181, 5	,0.2	)',
'rgb(	47, 72, 88	,0.2	)',
'rgb(	246, 174, 45	,0.2	)',
'rgb(	0, 124, 190	,0.2	)',
'rgb(	0, 175, 84	,0.2	)',
'rgb(	2, 108, 124	,0.2	)',
'rgb(	255, 196, 61	,0.2	)',
'rgb(	255, 163, 175	,0.2	)',
'rgb(	184, 19, 101	,0.2	)',
'rgb(	102, 16, 242	,0.2	)',
'rgb(	249, 110, 70	,0.2	)',
'rgb(	5, 88, 100	,0.2	)',
'rgb(	209, 17, 73	,0.2	)',
'rgb(	84, 88, 99	,0.2	)',
'rgb(	241, 113, 5	,0.2	)',
'rgb(	97, 3, 69	,0.2	)',
'rgb(	242, 100, 25	,0.2	)',
'rgb(	230, 194, 41	,0.2	)',
'rgb(	106, 1, 54	,0.2	)',
'rgb(	239, 71, 111	,0.2	)',
'rgb(	0, 232, 252	,0.2	)',
'rgb(	149, 25, 12	,0.2	)',
'rgb(	251, 175, 0	,0.2	)',
'rgb(	27, 154, 170	,0.2	)',
'rgb(	249, 200, 70	,0.2	)',
'rgb(	6, 214, 161	,0.2	)',
        ],
          
    borderColor: [
'rgb(	6, 214, 160	)',
'rgb(	227, 181, 5	)',
'rgb(	47, 72, 88	)',
'rgb(	246, 174, 45	)',
'rgb(	0, 124, 190	)',
'rgb(	0, 175, 84	)',
'rgb(	2, 108, 124	)',
'rgb(	255, 196, 61	)',
'rgb(	255, 163, 175	)',
'rgb(	184, 19, 101	)',
'rgb(	102, 16, 242	)',
'rgb(	249, 110, 70	)',
'rgb(	5, 88, 100	)',
'rgb(	209, 17, 73	)',
'rgb(	84, 88, 99	)',
'rgb(	241, 113, 5	)',
'rgb(	97, 3, 69	)',
'rgb(	242, 100, 25	)',
'rgb(	230, 194, 41	)',
'rgb(	106, 1, 54	)',
'rgb(	239, 71, 111	)',
'rgb(	0, 232, 252	)',
'rgb(	149, 25, 12	)',
'rgb(	251, 175, 0	)',
'rgb(	27, 154, 170	)',
'rgb(	249, 200, 70	)',
'rgb(	6, 214, 161	)',
    ],
        borderWidth: 1
      }]
    },
     plugins: [ChartDataLabels],  
     options: {
                      plugins: {
                                                legend: {
                                                               display: false,
                                                             },
                                                 datalabels: {
                                                                    display: false,
                                                                    },
                                              },
                         maintainAspectRatio: false,
                         indexAxis: 'y',
                         scales: {
                                        x: {
                                               min: -15,
                                               max: 15,
                                               ticks: { 
                                                           callback: (value, index, values) => { 
                                                           console.log(value);
                                                             if(index === 0 ){ return "0"};
                                                             if(index === 1 ){ return "1"};
                                                             if(index === 2 ){ return "2"};
                                                             if(index === 3 ){ return "3"};
                                                             if(index === 4 ){ return "4"};
                                                             if(index === 5 ){ return "5"};
                                                             if(index === 6 ){ return "6"};
                                                             if(index === 7 ){ return "7"};
                                                             if(index === 8 ){ return "8"};
                                                             if(index === 9 ){ return "9"};
                                                             if(index === 10 ){ return "10"};
                                                                                             } 
                                                          },
                                                            
                                            }
                                     }
                      }
  });
</script>