Search code examples
javascripthtmltypescriptlayoutgoogle-chat

Google Charts, Horizontal Bar chart Layout problem

I've implemented google charts in my angular project, all types of charts are working fine, but horizontal bar chart bars are overlaping with labels. not sure whats happening with it.

HTML

<div id="{{chartContainer}}" class="globalChart" [style.width.px]="chartWidth" [style.height.px]="chartHeight"></div>

TS

function drawChart() {
      const wrapper = new google.visualization.ChartWrapper({
        containerId: tempChartId ? tempChartId : '',
        chartType: tempChartType,
        dataTable: tempChartData,
        options: {
          legend: { position: 'none' },
          seriesType: tempChartType === 'ComboChart' ? tempSeriesType : '',
          series: { 1: { type: tempChartType === 'ComboChart' ? tempSeriesType2 : '' } },
          pieHole: tempChartType === 'PieChart' && tempDonutHoleSize === 0  ? 0.88 : tempDonutHoleSize,
          pieSliceText: 'none',
          chartArea: {
            'width': tempChartAreaW ? tempChartAreaW + '%' : '80%',
            'height': tempChartAreaH ? tempChartAreaH + '%' : '70%',
            'left': tempChartType === 'PieChart' ? '' : tempYAxisSpace ? tempYAxisSpace : 50,
            'bottom': tempSpaceForLabels,
            'top': tempSpaceForLabels ? 25 : '',
          },
          areaOpacity: 0.04,
          colors: tempColors,

          bar: {
            groupWidth: tempBarWidth ? tempBarWidth : 25
          },
          candlestick: {
            fallingColor: { strokeWidth: 0, fill: '#2c7be5' },
            risingColor: { strokeWidth: 0, fill: '#2c7be5' }
          },
          vAxis: {
            // textPosition:  'none',

            gridlines: {
              color: tempGridColor ? tempGridColor : '#f8f8f8',
              count: tempgradeLines ? tempgradeLines : 3
            },
            textStyle: {
              color: tempyYaxisFontColor ? tempyYaxisFontColor : '#a6adb3',
              fontSize: tempYaxisFontSize ? tempYaxisFontSize : 9,
              bold: true,
              opacity: tempyYaxisFontOpacity ? tempyYaxisFontOpacity : 0.8,
              marginTop: '50',
            },
            title: tempChartYTitle,
            titleTextStyle: {
              italic: false,
              color: tempychangeFontColorAxis ? tempychangeFontColorAxis : '#a6adb3',
              bold: false,
              fontSize: 10,
              marginBottom: 100,
            },
            ticks: tempyAixsValues,
            minValue: 0,
            format: '0'
          },

          hAxis: {
            baselineColor: '#fff',
            gridlines: {
              color: 'transparent'
          },
             textPosition:  tempHideXaxisLable ? 'none' : '',
            textStyle: {
              color: '#a6adb3',
              fontSize: 9,
              bold: true,
              opacity: 0.9,
              marginTop: '50',
            },
            title: tempChartXTitle,
            titleTextStyle: {
              italic: false,
              color: tempychangeFontColorAxis ? tempychangeFontColorAxis : '#a6adb3',
              fontSize: 10,
              bold: false,
            },
            axes: {
              x: {
                 0: {side: 'top'}
              }
           },
          },
          isStacked: tempColumnChartStack ? tempColumnChartStack : false,
          tooltip: {
            trigger: grand_parent.jeopardyGraphCheck ? 'none' : '',
            isHtml: true
          },
          // annotations: {alwaysOutside: false},
        },

      });

I've created common charts component for my whole project, so thats why TS file is a little bit complex.

Problem Screenshot enter image description here

Normal or Expected Behaviour enter image description here

Solution

  • I've add isStacked=true in Google chart options , and I solved the problem for now, may be there is any more good solution exists. but its fixed for me for now. Thanks :)