minor #2707 [StimulusBundle] Docs, replace chart examples by hello to avoid confusion with the ChartJS component (welcoMattic)

This PR was merged into the 2.x branch.

Discussion
----------

[StimulusBundle] Docs, replace `chart` examples by `hello` to avoid confusion with the ChartJS component

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Docs?         | yes <!-- required for new features -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

As ChartJS component exists, the examples using `chart` as controller identifier are confusing. ChartJS component does not expect `name` and `data` as values, but `view`.

Examples has been updated with a dead simple `hello world` style, which can not be confusing.

Commits
-------

77ee62e Replace `chart` examples by `hello` to avoid confusion with the ChartJS component

Author: Kocal

src/StimulusBundle/doc/index.rst

@@ -174,15 +174,15 @@ For example:
 
 .. code-block:: html+twig
 
-    <div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }) }}>
+    <div {{ stimulus_controller('hello', { 'name': 'World', 'data': [1, 2, 3, 4] }) }}>
         Hello
     </div>
 
     <!-- would render -->
     <div
-       data-controller="chart"
-       data-chart-name-value="Likes"
-       data-chart-data-value="&#x5B;1,2,3,4&#x5D;"
+       data-controller="hello"
+       data-hello-name-value="World"
+       data-hello-data-value="&#x5B;1,2,3,4&#x5D;"
     >
        Hello
     </div>
@@ -191,49 +191,49 @@ If you want to set CSS classes:
 
 .. code-block:: html+twig
 
-    <div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }, { 'loading': 'spinner' }) }}>
+    <div {{ stimulus_controller('hello', { 'name': 'World', 'data': [1, 2, 3, 4] }, { 'loading': 'spinner' }) }}>
         Hello
     </div>
 
     <!-- would render -->
     <div
-       data-controller="chart"
-       data-chart-name-value="Likes"
-       data-chart-data-value="&#x5B;1,2,3,4&#x5D;"
-       data-chart-loading-class="spinner"
+       data-controller="hello"
+       data-hello-name-value="World"
+       data-hello-data-value="&#x5B;1,2,3,4&#x5D;"
+       data-hello-loading-class="spinner"
     >
        Hello
     </div>
 
     <!-- or without values -->
-    <div {{ stimulus_controller('chart', controllerClasses = { 'loading': 'spinner' }) }}>
+    <div {{ stimulus_controller('hello', controllerClasses: { 'loading': 'spinner' }) }}>
         Hello
     </div>
 
 And with outlets:
 
 .. code-block:: html+twig
 
-    <div {{ stimulus_controller('chart',
-            { 'name': 'Likes', 'data': [1, 2, 3, 4] },
+    <div {{ stimulus_controller('hello',
+            { 'name': 'World', 'data': [1, 2, 3, 4] },
             { 'loading': 'spinner' },
             { 'other': '.target' } ) }}>
         Hello
     </div>
 
     <!-- would render -->
     <div
-       data-controller="chart"
-       data-chart-name-value="Likes"
-       data-chart-data-value="&#x5B;1,2,3,4&#x5D;"
-       data-chart-loading-class="spinner"
-       data-chart-other-outlet=".target"
+       data-controller="hello"
+       data-hello-name-value="World"
+       data-hello-data-value="&#x5B;1,2,3,4&#x5D;"
+       data-hello-loading-class="spinner"
+       data-hello-other-outlet=".target"
     >
        Hello
     </div>
 
     <!-- or without values/classes -->
-    <div {{ stimulus_controller('chart', controllerOutlets = { 'other': '.target' }) }}>
+    <div {{ stimulus_controller('hello', controllerOutlets: { 'other': '.target' }) }}>
         Hello
     </div>
 
@@ -246,20 +246,20 @@ there's also a ``stimulus_controller`` filter:
 
 .. code-block:: html+twig
 
-    <div {{ stimulus_controller('chart', { 'name': 'Likes' })|stimulus_controller('other-controller') }}>
+    <div {{ stimulus_controller('hello', { 'name': 'World' })|stimulus_controller('other-controller') }}>
         Hello
     </div>
 
     <!-- would render -->
-    <div data-controller="chart other-controller" data-chart-name-value="Likes">
+    <div data-controller="hello other-controller" data-hello-name-value="World">
         Hello
     </div>
 
 You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:
 
 .. code-block:: twig
 
-    {{ form_start(form, { attr: stimulus_controller('chart', { 'name': 'Likes' }).toArray() }) }}
+    {{ form_start(form, { attr: stimulus_controller('hello', { 'name': 'World' }).toArray() }) }}
 
 stimulus_action
 ~~~~~~~~~~~~~~~