Issues creating a Grouped Vertical Bar/Line Combo Chart - Custom inner SVG elements ignored

[burzum619]

Hello,

I am attempting to create a custom chart that combines a grouped vertical bar chart with a line chart overlayed on top of it. I've been using the following demo example of a custom "combo chart" as a starting point:

https://github.com/swimlane/ngx-charts/blob/master/demo/combo-chart https://swimlane.github.io/ngx-charts/#/ngx-charts/combo-chart

In practice, I already have the grouped bar chart working correctly. However, I'm having trouble adding the line chart on top of it.

In my combo-chart.component.ts, I have updated my inline template to use an ngx-charts-bar-vertical-2d instead of the ngx-charts-chart that the demo linked above uses. Unfortunately, it looks like the inner-SVG elements do not appear to be respected.

@Component({
  selector: 'combo-chart-component',
  template:  `
    <ngx-charts-bar-vertical-2d
      *ngIf="results && results.length > 0"
      [view]="[width + legendSpacing, height]"
      [legend]="legend"
      [activeEntries]="activeEntries"
      [results]="results"
      [groupPadding]="0"
      [gradient]="gradient"
      [scheme]="scheme"
      [xAxis]="xAxis" 
      [yAxis]="yAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [yAxisTickFormatting]="yAxisTickFormatting"
      (legendLabelClick)="onClick($event)"
      (legendLabelActivate)="onActivate($event)"
      (legendLabelDeactivate)="onDeactivate($event)"
      (select)="select">

      <svg:g [attr.transform]="transform" class="bar-chart chart">
          <svg:g ngx-charts-x-axis
          *ngIf="xAxis"
          [xScale]="xScale"
          [dims]="dims"
          [showLabel]="showXAxisLabel"
          [labelText]="xAxisLabel"
          [tickFormatting]="xAxisTickFormatting"
          (dimensionsChanged)="updateXAxisHeight($event)">
        </svg:g>
        <svg:g ngx-charts-y-axis
          *ngIf="yAxis"
          [yScale]="yScale"
          [dims]="dims"
          [yOrient]="yOrientLeft"
          [showGridLines]="showGridLines"
          [showLabel]="showYAxisLabel"
          [labelText]="yAxisLabel"
          [tickFormatting]="yAxisTickFormatting"
          (dimensionsChanged)="updateYAxisWidth($event)">
        </svg:g>
        <svg:g ngx-charts-y-axis
          *ngIf="yAxis"
          [yScale]="yScaleLine"
          [dims]="dims"
          [yOrient]="yOrientRight"
          [showGridLines]="showGridLines"
          [showLabel]="showRightYAxisLabel"
          [labelText]="yAxisLabelRight"
          [tickFormatting]="yRightAxisTickFormatting"
          (dimensionsChanged)="updateYAxisWidth($event)">
        </svg:g>
        <svg:g ngx-combo-charts-series-vertical
          [xScale]="xScale"
          [yScale]="yScale"
          [colors]="colors"
          [series]="lineChartSeries"
          [seriesLine]="lineChart"
          [dims]="dims"
          [gradient]="gradient"
          tooltipDisabled="true"
          [activeEntries]="activeEntries"
          (activate)="onActivate($event)"
          (deactivate)="onDeactivate($event)"
          (bandwidth)="updateLineWidth($event)"
          (select)="onClick($event)">
        </svg:g>
      </svg:g>
      <svg:g [attr.transform]="transform" class="line-chart chart">
        <svg:g [attr.clip-path]="clipPath">
          <svg:g *ngFor="let series of lineChart; trackBy:trackBy">
            <svg:g ngx-charts-line-series
              [xScale]="xScaleLine"
              [yScale]="yScaleLine"
              [colors]="colorsLine"
              [data]="series"
              [activeEntries]="activeEntries"
              [scaleType]="scaleType"
              [curve]="curve"
              [rangeFillOpacity]="rangeFillOpacity"
            />
          </svg:g>

          <svg:g ngx-charts-tooltip-area
            *ngIf="!tooltipDisabled"
            [dims]="dims"
            [xSet]="xSet"
            [xScale]="xScaleLine"
            [yScale]="yScaleLine"
            [results]="combinedSeries"
            [colors]="colorsLine"
            [tooltipDisabled]="tooltipDisabled"
            (hover)="updateHoveredVertical($event)"
          />

          <svg:g *ngFor="let series of lineChart">
            <svg:g ngx-charts-circle-series
              [xScale]="xScaleLine"
              [yScale]="yScaleLine"
              [colors]="colorsLine"
              [data]="series"
              [scaleType]="scaleType"
              [visibleValue]="hoveredVertical"
              [activeEntries]="activeEntries"
              [tooltipDisabled]="tooltipDisabled"
              (select)="onClick($event, series)"
              (activate)="onActivate($event)"
              (deactivate)="onDeactivate($event)"
            />
          </svg:g>
        </svg:g>
      </svg:g>
    </ngx-charts-bar-vertical-2d>
  `,
  styleUrls: ['./combo-chart.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ComboChartComponent extends BaseChartComponent {

When looking at the markup that is actually rendered, I do not see the line-chart <g> element anywhere - only the bar-chart. I also attempted to remove the <svg:g [attr.transform]="transform" class="bar-chart chart"> svg group from my template, just to see what would happen. the ngx-charts-bar-vertical-2d component still renders the bar-chart. It seems all the svg elements inside of the ngx-charts-bar-vertical-2d are being ignored.

I do not see any js/ts errors or warnings present. I briefly attempted to replace the ngx-charts-bar-vertical-2d with a ngx-charts-chart, and that seemed to render the line-chart and inner-elements (although my chart was broken due to the data not being in the right format for a normal bar chart). Is creating a custom grouped vertical chart simply not an option with the ngx-charts framework? Thanks in advanced for your help.

[burzum619]

Taking a further look at the source code for the grouped bar chart , it looks like the <svg:g> elements inside of the inline template are what's actually being rendered - and my custom svg elements (including my line chart) are being ignored. Is there any way to get around this behavior?

[PavelYaroshchyk]

@burzum619, have you had any luck with resolving your issue? I'm having a similar problem with creating a stacked bar/line combo chart.

[burzum619]

@PavelYaroshchyk No, unfortunately I have not had any luck with this.

[kinjalpgor]

@burzum619 have you had any luck with resolving your issue? I'm having a similar problem with creating a grouped vertical bar/line combo chart.