title: How to mix series, data and xAxis category in Highcharts?
body: <p>I need to create a column chart that is able to mix series, data and xAxis. Perhaps the example below may be easier to understand my problem:</p>
  
  <p>I have a set of products that needs to be my xAxis category. Let's call them A, B, C and D.
  For each product, I have 2 values to be shown as column, values A1 and A2 for A, B1 and B2 for B, and so on.
  All the values on A1, B1, C1 and D1 must be called "hello" and the others A2, B2, C2 and D2 must be "world". "Hello" must be blue and "world" must be red.
  Also, when I mouseover each column, all of them have different values, but must always shows the according product.</p>
  
  <p>I need to create a JSON file structure that will be generated from a Java application.
  The image below may help the example as well.
  <img src="https://i.stack.imgur.com/ew20Y.png" alt="enter image description here">
  [Edit] As requested these are the two code I tested (JSON files):</p>
  
  <p>This is definitely the wrong way:</p>
  
  <pre><code>{      
      "series": [
          {
              "type": "column",
              "name": "A"
              "composition": {
                  "custom_tooltip": "My custom tooltip for A"
              },
              "data": [{
                  "name": "A1",
                  "color": "#777777",
                  "y": 37.225
              }, {
                  "name": "A2",
                  "color": "#0088cc",
                  "y": 31.013
              }]
          },
          {
              "type": "column",
              "name": "B"
              "composition": {
                  "custom_tooltip": "My custom tooltip for B"
              },
              "data": [{
                  "name": "B1",
                  "color": "#777777",
                  "y": 31.888
              }, {
                  "name": "B2",
                  "color": "#0088cc",
                  "y": 28.910
              }]
          },
          {
              "type": "column",
              "name": "C"
              "composition": {
                  "custom_tooltip": "My custom tooltip for C"
              },
              "data": [{
                  "name": "C1",
                  "color": "#777777",
                  "y": 49.101
              }, {
                  "name": "C2",
                  "color": "#0088cc",
                  "y": 41.001
              }]
          },
          {
              "type": "column",
              "name": "D"
              "composition": {
                  "custom_tooltip": "My custom tooltip for D"
              },
              "data": [{
                  "name": "D1",
                  "color": "#777777",
                  "y": 59.890
              }, {
                  "name": "D2",
                  "color": "#0088cc",
                  "y": 55.491
              }]
          }
      ]
  }
  </code></pre>
  
  <p>And I also have tried basic configuration for both column and bar.</p>
  
  <p>[Edit2] My problem was solved with examples provided by @jlbriggs. I updated my JSON file and will use the this.point.var functionality to display customised tooltips.</p>
  
  <p>For each "data" with "series" I'll add variables to create the tooltips.</p>
  
  <pre><code>{      
      "xAxis": {
          "categories": [
              "A",
              "B",
              "C",
              "D"
          ]
      },
  
      "series": [
          {
              "name": "Hello",
              "type": "column",
              "color": "#777777",
              "data": [
              {
                  "tooltip": "Yo, I'm a cool tooltip for A1",
                  "y": 37.225
              },
              {
                  "tooltip": "Yo, I'm a cool tooltip for B1",
                  "y": 42.542
              },
              {
                  "tooltip": "Yo, I'm a cool tooltip for C1",
                  "y": 49.093
              },
              {
                  "tooltip": "Yo, I'm a cool tooltip for D1",
                  "y": 58.391
              }
              ]
          },
          {
              "name": "World",
              "type": "column",
              "color": "#0088cc",
              "data": [
              {
                  "tooltip": "Yo, I'm a cool tooltip for A2",
                  "y": 37.225
              },
              {
                  "tooltip": "Yo, I'm a cool tooltip for B2",
                  "y": 42.542
              },
              {
                  "tooltip": "Yo, I'm a cool tooltip for C2",
                  "y": 49.093
              },
              {
                  "tooltip": "Yo, I'm a cool tooltip for D2",
                  "y": 58.391
              }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>The .js file will have:</p>
  
  <pre><code>tooltip: {
      formatter: function() {
          return this.point.tooltip;
      }
  },
  </code></pre>
  
  <p>Thanks,
  Eugenio</p>