title: Highchart, bar chart with multiple series
body: <p>How can I display a bar chart with multiple series:</p>
  
  <p><a href="http://jsfiddle.net/qyd6w5tx/1/" rel="nofollow">http://jsfiddle.net/qyd6w5tx/1/</a></p>
  
  <pre><code>$(function () {
      $('#container').highcharts(
  
  
      {
          "chart": {
              "style": {
                  "fontFamily": "Arial, sans-serif"
              },
                  "alignTicks": false,
                  "marginRight": 20,
                  "height": 334
          },
              "tooltip": {
              "pointFormat": "&lt;span style=\"color:{series.color}\"&gt;●&lt;/span&gt; &lt;span style=\"{series.options.style.pct}\"&gt;({point.percentage:,.2f}%)&lt;/span&gt; &lt;b style=\"{series.options.style.abs}\"&gt;{point.value:,.2f}&lt;/b&gt;&lt;br/&gt;"
          },
              "xAxis": {
              "type": "category",
                  "reversed": false,
                  "labels": {}
          },
              "yAxis": [{
              "title": {
                  "text": null
              },
                  "index": 0
          }, {
              "title": {
                  "text": null
              },
                  "labels": {
                  "format": "{value}%"
              },
                  "index": 1,
                  "min": -0.39,
                  "max": 9.99
          }, {
              "title": {
                  "text": null
              },
                  "labels": {
                  "format": "{value}%"
              },
                  "opposite": true,
                  "index": 2
          }],
              "legend": {
              "borderWidth": 0,
                  "enabled": false
          },
              "plotOptions": {
              "bar": {
                  "dataLabels": {
                      "enabled": true,
                          "style": {
                          "textShadow": "none"
                      },
                          "allowOverlap": true
                  },
                      "minPointLength": 2
              },
  
          },
              "credits": {
              "enabled": false
          },
              "series": [{
              "name": "Group A",
                  "type": "bar",
                  "format": "pct",
                  "top_value": "",
                  "min_percent": "",
                  "style": {
                  "abs": "display: none"
              },
                  "data": [{
                  "name": "Test 01",
                      "value": 0.8,
                      "percentage": 0.8,
                      "y": 0.8
              }, {
                  "name": "Test 02",
                      "value": 2,
                      "percentage": 2,
                      "y": 2
              }, {
                  "name": "Test 03",
                      "value": -0.5,
                      "percentage": -0.5,
                      "y": -0.5
              }, {
                  "name": "Test 04",
                      "value": 2.33,
                      "percentage": 2.33,
                      "y": 2.33
              }],
                  "yAxis": 1
          }, {
              "name": "Group B",
                  "type": "bar",
                  "format": "pct",
                  "top_value": "",
                  "min_percent": "",
                  "style": {
                  "abs": "display: none"
              },
                  "data": [{
                  "name": "Test 05",
                      "value": 9,
                      "percentage": 9,
                      "y": 9
              }, {
                  "name": "Test 06",
                      "value": 9,
                      "percentage": 9,
                      "y": 9
              }, {
                  "name": "Test 07",
                      "value": 3,
                      "percentage": 3,
                      "y": 3
              }],
                  "yAxis": 1
          }],
              "title": {
              "text": "Test"
          }
      }
  
  
  
  
      );
  });
  </code></pre>
  
  <p>In this example I would like to display one after the other:</p>
  
  <ul>
  <li>Test 01 </li>
  <li>Test 02 </li>
  <li>Test 03 </li>
  <li>Test 04 </li>
  <li>Test 05 </li>
  <li>Test 06 </li>
  <li>Test 07</li>
  </ul>
  
  <p>And then have the Group A in blue and the Group B in red, and display a legend under the chart with:
   - Group A (in blue)
   - Group B (in red)</p>
  
  <p>I am bit confused with how to make this with highchart...</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Thanks to Rotan075 to understand my problem and to find a solution. <a href="http://jsfiddle.net/hw5s4ahm/" rel="nofollow">http://jsfiddle.net/hw5s4ahm/</a></p>
  
  <p>Actually I didn't specify that need to keep the same data structure for the series:</p>
  
  <pre><code>         "series": [{
              "name": "Group A",
                  "type": "bar",
                  "format": "pct",
                  "top_value": "",
                  "min_percent": "",
                  "style": {
                  "abs": "display: none"
              },
                  "data": [{
                  "name": "Test 01",
                      "value": 0.8,
                      "percentage": 0.8,
                      "y": 0.8
              }, {
                  "name": "Test 02",
                      "value": 2,
                      "percentage": 2,
                      "y": 2
              }, {
                  "name": "Test 03",
                      "value": -0.5,
                      "percentage": -0.5,
                      "y": -0.5
              }, {
                  "name": "Test 04",
                      "value": 2.33,
                      "percentage": 2.33,
                      "y": 2.33
              }],
                  "yAxis": 1
          }, {
              "name": "Group B",
                  "type": "bar",
                  "format": "pct",
                  "top_value": "",
                  "min_percent": "",
                  "style": {
                  "abs": "display: none"
              },
                  "data": [{
                  "name": "Test 05",
                      "value": 9,
                      "percentage": 9,
                      "y": 9
              }, {
                  "name": "Test 06",
                      "value": 9,
                      "percentage": 9,
                      "y": 9
              }, {
                  "name": "Test 07",
                      "value": 3,
                      "percentage": 3,
                      "y": 3
              }],
                  "yAxis": 1
          }]
  </code></pre>
  
  <p>The rest can change, but this data is generated by a third part level and has to stay generic. I thought it would be just a question of settings but it seem to be much more complicated.</p>