Chartjs ticks creates a strange table

I want to create a BarChart on y-Axis with Chart.js.
Now I want to change the value to stepsize 1, but it creates a strange chart, where the key on x and y is the name.
Can you tell me why?

It should look like this with stepsize 1:
First

But if I set the ticks, it looks like this:
second

Greetings
Jannik

Data:    
[
{
    "name": "Finanzdienstleistungen, Finanzprodukte ...",
    "id": 1,
    "value": 80
},
{
    "name": "Urheberrechtsverletzungen und Wettbewerbs...",
    "id": 2,
    "value": 0
},
{
    "name": "Produktsicherheit und -konformität",
    "id": 3,
    "value": 0
},
{
    "name": "Verkehrssicherheit und Umweltschutz",
    "id": 4,
    "value": 0
},
]

const ctx = document.getElementById('myChart');
const data = JSON.parse(document.getElementById('data-statistic').textContent);
let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Incidents',
      data: data,
      indexAxis: 'y',
      backgroundColor: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)'
      ],
      borderWidth: 1,
    }]
  },
  options:{
    parsing: {
      yAxisKey: 'name',
      xAxisKey: 'value'
    },
    scales: {
      x: {
         ticks: {
            type: 'value',
            stepSize: 1
         }
      }
   },
  }
});````

>Solution :

The problem is not related to stepSize but you want to have a horizontal bar but you didn’t configure indexAxis option. Without that, is a "vertical" bar and X scale is a category and not numeric one, as you need.

Add indexAxis option as following:

  options:{
    indexAxis: 'y',
    parsing: {
      yAxisKey: 'name',
      xAxisKey: 'value'
    },
    ...