title: How to draw ng2-charts horizontal bar chart with custom scales in Angular?
body: <p>I am trying a horizontal bar chart with ng2-charts as below to draw with custom scale i.e.</p>
  <p><a href="https://i.stack.imgur.com/vQp8h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vQp8h.png" alt="Desired-Output" /></a></p>
  <p>This is what I have achieved so far  where I am getting output as  <a href="https://i.stack.imgur.com/w0cMO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w0cMO.png" alt="Actual-Output" /></a></p>
  <p><strong>Code:</strong></p>
  <pre><code>  public barChartColors: any [] =[
      {
        backgroundColor:'#5081bd',
      },
      {
        backgroundColor:'rgba(80,129,189,255)',
      }
  ];
  
    public barChartOptions1: ChartOptions = {
      responsive: true,
      scales: {
        yAxes: [
         {
          display: true,
          scaleLabel: {
           display: true,
           labelString: &quot;&quot;,
           fontSize: 20
          },
         },
        ]
      }
    }
  
  
  
  public barChartType1: ChartType = &quot;horizontalBar&quot;;
  
  DesignHorizantalBarChart(chartdata: any) {
      
      let dataobj = {};
      let setData = [];
      let setLabels = [];
      let arr = [];
      chartdata.forEach((element, index) =&gt; {
  
        element.index = index;
  
        if (!element.isOpenText) {
          setLabels = [...element.responses];
          let average = ((element.average * element.responses.length) / 100);
  
  
          setData.push(average.toFixed(2));
          
          dataobj = {
            data: setData,
            label: element.reportTitle,
            stack: element.reportTitle,
          };
  
          arr.push(dataobj);
          this.barChartDataSets1.push(arr);
          this.barChartLabels1.push(setLabels);
  
          arr = [];
          setData = [];
          setLabels = [];
        }
      });
  
    }
  </code></pre>
  <p><strong>Input JSON data from function parameters:</strong></p>
  <pre><code>[
     {
        &quot;guid&quot;:&quot;bb3cbb02-c0e7-440c-bd44-5c2bc25a249c&quot;,
        &quot;questionTitle&quot;:&quot;Custom Question 2&quot;,
        &quot;reportTitle&quot;:&quot;first report&quot;,
        &quot;responses&quot;:[
           &quot;ans1&quot;,
           &quot;ans2&quot;
        ],
        &quot;openText&quot;:[
           
        ],
        &quot;isOpenText&quot;:false,
        &quot;result&quot;:null,
        &quot;average&quot;:66.66666666666666,
        &quot;sampleSize&quot;:3
     }
  ]
  </code></pre>
  <p><strong>Input Feed for chart after preparing data:</strong></p>
  <pre><code>barChartDataSets1 [[{&quot;data&quot;:[&quot;1.33&quot;],&quot;label&quot;:&quot;first report&quot;,&quot;stack&quot;:&quot;first report&quot;}]]
  generate-report.component.ts:290 barChartLabels1 [[&quot;ans1&quot;,&quot;ans2&quot;]]
  </code></pre>
  <p><strong>Template:</strong></p>
  <pre><code>                    &lt;canvas baseChart  height=&quot;20vh&quot; width=&quot;80vw&quot;
                          [colors]=&quot;barChartColors&quot; 
                          [datasets]=&quot;barChartDataSets1[customdata.index]&quot;
                          [labels]=&quot;barChartLabels1[customdata.index]&quot; 
                          [options]=&quot;barChartOptions1&quot; 
                          [chartType]=&quot;barChartType1&quot; 
                          (chartHover)=&quot;chartHovered($event)&quot; 
                          (chartClick)=&quot;chartClicked($event)&quot;&gt;
                      &lt;/canvas&gt;
  </code></pre>
  <p>I would like to flip the scales and shown in desired output image without flipping the data or something like that. How this can be achieved? Any help would be appreciated.</p>