How to draw ng2-charts horizontal bar chart with custom scales in Angular?

user_7109092 0
Viewed 1031

I am trying a horizontal bar chart with ng2-charts as below to draw with custom scale i.e.

Desired-Output

This is what I have achieved so far where I am getting output as Actual-Output

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: "",
         fontSize: 20
        },
       },
      ]
    }
  }



public barChartType1: ChartType = "horizontalBar";

DesignHorizantalBarChart(chartdata: any) {
    
    let dataobj = {};
    let setData = [];
    let setLabels = [];
    let arr = [];
    chartdata.forEach((element, index) => {

      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 = [];
      }
    });

  }

Input JSON data from function parameters:

[
   {
      "guid":"bb3cbb02-c0e7-440c-bd44-5c2bc25a249c",
      "questionTitle":"Custom Question 2",
      "reportTitle":"first report",
      "responses":[
         "ans1",
         "ans2"
      ],
      "openText":[
         
      ],
      "isOpenText":false,
      "result":null,
      "average":66.66666666666666,
      "sampleSize":3
   }
]

Input Feed for chart after preparing data:

barChartDataSets1 [[{"data":["1.33"],"label":"first report","stack":"first report"}]]
generate-report.component.ts:290 barChartLabels1 [["ans1","ans2"]]

Template:

                    <canvas baseChart  height="20vh" width="80vw"
                        [colors]="barChartColors" 
                        [datasets]="barChartDataSets1[customdata.index]"
                        [labels]="barChartLabels1[customdata.index]" 
                        [options]="barChartOptions1" 
                        [chartType]="barChartType1" 
                        (chartHover)="chartHovered($event)" 
                        (chartClick)="chartClicked($event)">
                    </canvas>

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.

ng2-charts angular bar-chart
2 Answers

Using this will do the job:

public barChartOptions1: ChartOptions = {
  responsive: true,
  scales: {
    x: {
      min: 0,
      max: 4
    }
  }
}

Also You can set only one of them and on both x axes and y axes.

user_114343730

As bar chart was not able to cater the problem so I stumbled upon this solution where I have changed the chart type from horizontalBar chart to line chart.

public lineChartOptions: ChartOptions = {
    responsive: true,
    legend: { display: false },
    scales: {
      yAxes: [
       {
        display: false,
        ticks: {
          beginAtZero: false
        },
        scaleLabel: {
          display: true,
          labelString: '',
          fontSize: 20,
         }
       },
      ]
    
    },
    
    elements: {
      point:{
          radius: 0,
          borderWidth: 50
      }
    },
  };

This solved my problem.

user_71090920
Related