1

I am developing a layered column chart using ComboChart on Angular google charts. Although I've separated two series of bar charts in two different axis, being able to find a bar in front of the other, like needed, I can't change the width of one of the series only. I want a result like the amCharts Layered Column Chart:

Layered Column Chart example

Right now, the chart looks like:

Current chart - Angular google charts

Also, if there is a way to share the same y axis while keeping one bar in front of the other, instead of staking then, it would be great.

The code I've been using for options of the angular google chart:

    this.options =
    {  
      colors: ['#1E90FF', '#f39800'], 
      hAxis: {
        title: 'haxisTitle',
        type: 'category'
      },
      vAxis:{
        title: 'Value',
        minValue: 0,
        format: this.numberFormat
      },
      seriesType: 'bars',
      bar: {1: {groupWidth: "30"}},
      series: 
        {
          0: {
            targetAxisIndex: 0
          },
          1: {
            targetAxisIndex: 1,
          }
        },        
      vAxes: {
        0: {
          title: 'Altered Value',
          label:'Altered Value',
          viewWindow: {  // <-- set view window
            min: 0,
            max: this.maxValue + 0.1*this.maxValue, // Sets the maximun value of altered or real value to the window size (both axis)
          },
          format: this.numberFormat,
          type: 'bars'     
        },
        1: {
          title: 'Real Value',
          label:'Real Value',
          viewWindow: {  // <-- set view window
            min: 0,
            max: this.maxValue + 0.1*this.maxValue,
          },
          format: this.numberFormat,
          type: 'bars'
        }    
      },
      aggregationTarget: 'auto',
      stackSeries: true,
      isStacked : true,
      explorer: {
        actions: ['dragToZoom', 'rightClickToReset'],
        keepInBounds: true,
        maxZoomIn: 4.0
      }
    };
  }

The chart shows the data correctly, the only problem is the layout.

Some reference that might help:

Google Developers - Visualization: Combo Chart amCharts Layered Column chart Overlapped bars - Stack overflow quote - Here the result was a stacked bar chart (something I don't want)

gondev
  • 11
  • 2
  • there are no options to change the size of a specific series, google offers a [Diff chart](https://developers.google.com/chart/interactive/docs/gallery/diffchart#diff-bar-and-column-charts) to get a similar result, or you can try this [answer](https://stackoverflow.com/a/49132688/5090771)... – WhiteHat Jan 14 '22 at 13:34
  • Thanks for the reply @WhiteHat! I tried the answer option, but it did not work for me since I need the tooltips of the overlaped chart to be functional. I found out Diff chart is not supported with angular-google-charts. I think i might go with another library... – gondev Jan 15 '22 at 19:11

0 Answers0