CODEWITHSUNDEEP
javascriptangularsvgionic3
Alif Jamaluddin
Alif Jamaluddin

Reputation: 518

Angular2 Renderer: Svg rect is rendered but not showing in page

I want to create a bar chart using SVG with rect as the bar.

The related code as follows:

barchart-one.html

   <svg #svgone width="400" height="250" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250">
    <g #abcd></g>
</svg>

barchart-one.ts

 import { Component, Renderer2, ViewChild, ElementRef } from '@angular/core';

    @Component({
    selector: 'barchart-one',
    templateUrl: 'barchart-one.html'
    })
    export class BarchartOneComponent {
    @ViewChild('abcd') 
    private abcd: ElementRef;  
    constructor(private renderer: Renderer2) {}

    ngAfterViewInit() {
        for (var i = 1; i < 8; i++) {
            let height = Math.floor(Math.random() * (140 - 110)) + 110;
            const rect = this.renderer.createElement('rect');
            this.renderer.setAttribute(rect, 'height', height);
            this.renderer.setAttribute(rect, 'rx', '6');
            this.renderer.setAttribute(rect, 'ry', '6');
            this.renderer.setAttribute(rect, 'width', '12');
            this.renderer.setAttribute(rect, 'x', (i*50)+20);
            this.renderer.setAttribute(rect, 'y', (220-height));
            this.renderer.appendChild(this.abcd.nativeElement, rect);
            console.log(rect);
        };
    }
    }

Result of svg render:

<g>


<rect height="126" rx="6" ry="6" width="12" x="70" y="94"></rect>
<rect height="122" rx="6" ry="6" width="12" x="120" y="98"></rect>
<rect height="124" rx="6" ry="6" width="12" x="170" y="96"></rect>
<rect height="116" rx="6" ry="6" width="12" x="220" y="104"></rect>
<rect height="139" rx="6" ry="6" width="12" x="270" y="81"></rect>
<rect height="123" rx="6" ry="6" width="12" x="320" y="97"></rect>
<rect height="137" rx="6" ry="6" width="12" x="370" y="83"></rect>
</g>

The expected result is not showing in page even though the code for rect is correctly rendered.

Upvotes: 0

Views: 1009

Answers (2)

Patiss
Patiss

Reputation: 187

This is old question, but, maybe someone will find it useful in the future. There is an Angular module called ngx-svg, which allows to create easily multiple SVG elements and plot them on the site. Also lot of different interactions with these elements are available.

Your html code would look like this - 

<svg-container containerId="barChart" height="500">
  <svg-rect height="126" width="12" color="#000" x="70" y="94"></svg-rect>
  <svg-rect height="122" width="12" color="#000" x="120" y="98"></svg-rect>
  <svg-rect height="124" width="12" color="#000" x="170" y="96"></svg-rect>
  <svg-rect height="116" width="12" color="#000" x="220" y="104"></svg-rect>
  <svg-rect height="139" width="12" color="#000" x="270" y="81"></svg-rect>
  <svg-rect height="123" width="12" color="#000" x="320" y="97"></svg-rect>
  <svg-rect height="137" width="12" color="#000" x="370" y="83"></svg-rect>
</svg-container>

The above code, would automatically create and plot your desired chart.

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124269

You cannot create SVG elements with createElement, you must use createElementNS and pass the SVG namespace i.e. http://www.w3.org/2000/svg as the first parameter.

this.renderer.createElementNS('http://www.w3.org/2000/svg', 'rect');

Upvotes: 2

Related Questions