title: Angular Highcharts dynamic x-axis not working
body: <blockquote>
    <p>How to generate the dynamic x-axis and how to render in the charts,</p>
  </blockquote>
  
  <p><strong>Package.json</strong></p>
  
  <blockquote>
    <p>Version used</p>
  </blockquote>
  
  <pre><code>enter code here"angular-highcharts": "5.2.12"
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <blockquote>
    <p>importing highchart module in app module</p>
  </blockquote>
  
  <pre><code>import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
  providers: [
      {
        provide: HIGHCHARTS_MODULES,
        useFactory: highchartsModules
      },
  
    ]
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <blockquote>
    <p>Creating dynamic x-axis by json,but x-axis showing empty.</p>
  </blockquote>
  
  <pre><code>        import { Chart,Highcharts } from 'angular-highcharts';
      public adherenceData = new Chart({
          chart: {
            type: 'column'
          },
          title: {
            text: ''
          },
          credits: {
            enabled: false
          },
          xAxis: {
            labels:{
              enabled:false
            },
            categories: [],
            crosshair: true
          },
          yAxis: {
            min: 0,
            title: {
              text: 'Percentage'
            }
          },
          legend:{
            enabled:false
          },
          plotOptions: {
            column: {
              pointPadding: 0.2,
              borderWidth: 0
            },
            series:{
              dataLabels: {
                  enabled: true,
                  rotation: 0,
                  color: '#000000',
                  align: 'right',
                  format: '{point.y:.1f}', // one decimal
                  y: 0, // 10 pixels down from the top
                  x: 0,
                  style: {
                      fontSize: '12px'
                  }
              }
            },
          },
          series: []
        }
        );
      let cArr=[]
      response.payload.forEach((e,i)=&gt;{
  crArr.push(e.username)
                this.adherenceData.addSerie({'name': e.username,'data':[e.visitAdherence]} , true,{
                  duration: 2000,
                  easing: 'easeOutBounce'
                })
  </code></pre>
  
  <blockquote>
    <p>In CArr the values for x-axis are pushed and passing to x-axis
    category</p>
  </blockquote>
  
  <pre><code>    this.adherenceData.options.xAxis[0].categories = cArr;
         this.adherenceData.ref.redraw();
  })
  </code></pre>
  
  <blockquote>
    <p>In result img x-axis showing empty</p>
  </blockquote>
  
  <p><strong>Result:</strong> <img src="https://i.stack.imgur.com/gcOLH.png" alt="img"></p>