Wijmo5 flexchart with Angular8 issues

Posted by: madhuchhanda_kar on 11 May 2020, 6:46 pm EST

Please login to follow topic

madhuchhanda_kar
- Post Options:
- Link
  Copy
Posted 11 May 2020, 6:46 pm EST
I am using wijmo 5 flexchart with Angular 8 and trying to create multiple fixed height sections showing barcharts with different values.

In the sample, there are two sections - one with many data, another with less data.

The issues I am facing :

The individual bars of “Many Data” chart are having very less individual heights compared to the ones in “Less Data” chart. All bars should be of equal height. To achieve the same, the height of the chart needs to be varied. To keep the chart of variable heights inside fixed height sections, scroll bar needs to be introduced inside the sections having overflow.

The “Date” Labels are not showing all dates.

X axis and Y axis lines are missing

How to fill the bars with color gradients?

The Code is in the link :

https://stackblitz.com/edit/angular-huwfn2

madhuchhanda_kar

Post Options:
Link
Copy

Posted 12 May 2020, 8:50 am EST

Code files :

app.component.ts

import { Component } from '@angular/core';

import * as wjcCore from 'wijmo/wijmo';
import * as wjcChart from 'wijmo/wijmo.chart';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
  public tooltipContent: any;

  public barChartData = {
  "Id": 1,
  "Condition": "User Count",
  "List": [
    {
      "Value": 138,
      "CreatedDate": "12-13-2019",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 129,
      "CreatedDate": "12-14-2019",
      "Color": "Green",
      "ColorCode": "#66FF66"
    },
    {
      "Value": 137,
      "CreatedDate": "12-15-2019",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 158,
      "CreatedDate": "12-16-2019",
      "Color": "Gray",
      "ColorCode": "#C0C0C0"
    },
    {
      "Value": 138,
      "CreatedDate": "01-06-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 138,
      "CreatedDate": "01-07-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 136,
      "CreatedDate": "01-08-2020",
      "Color": "Green",
      "ColorCode": "#66FF66"
    },
    {
      "Value": 125,
      "CreatedDate": "01-11-2020",
      "Color": "Blue",
      "ColorCode": "#66B2FF"
    },
    {
      "Value": 138,
      "CreatedDate": "01-12-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 129,
      "CreatedDate": "01-13-2020",
      "Color": "Green",
      "ColorCode": "#66FF66"
    },
    {
      "Value": 137,
      "CreatedDate": "01-14-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 158,
      "CreatedDate": "01-15-2020",
      "Color": "Gray",
      "ColorCode": "#C0C0C0"
    },
    {
      "Value": 138,
      "CreatedDate": "02-06-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 138,
      "CreatedDate": "02-07-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 136,
      "CreatedDate": "02-08-2020",
      "Color": "Green",
      "ColorCode": "#66FF66"
    },
    {
      "Value": 125,
      "CreatedDate": "02-11-2020",
      "Color": "Blue",
      "ColorCode": "#66B2FF"
    },
    {
      "Value": 138,
      "CreatedDate": "03-13-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 129,
      "CreatedDate": "03-14-2020",
      "Color": "Green",
      "ColorCode": "#66FF66"
    },
    {
      "Value": 137,
      "CreatedDate": "03-15-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 158,
      "CreatedDate": "03-16-2020",
      "Color": "Gray",
      "ColorCode": "#C0C0C0"
    },
    {
      "Value": 138,
      "CreatedDate": "04-06-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 138,
      "CreatedDate": "04-07-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 136,
      "CreatedDate": "04-08-2020",
      "Color": "Green",
      "ColorCode": "#66FF66"
    },
    {
      "Value": 125,
      "CreatedDate": "04-11-2020",
      "Color": "Blue",
      "ColorCode": "#66B2FF"
    }
  ],
  "Graph": "Bar",
  "Xaxis": "No. of users",
  "Yaxis": "Date",
  "Header": "Many Data"
}

public barChartData_2 = {
  "Id": 2,
  "Condition": "User Count 2",
  "List": [
    {
      "Value": 135,
      "CreatedDate": "12-12-2019",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
     {
      "Value": 138,
      "CreatedDate": "12-13-2019",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 129,
      "CreatedDate": "12-14-2019",
      "Color": "Green",
      "ColorCode": "#66FF66"
    },
    {
      "Value": 137,
      "CreatedDate": "12-15-2019",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 158,
      "CreatedDate": "12-16-2019",
      "Color": "Gray",
      "ColorCode": "#C0C0C0"
    },
    {
      "Value": 138,
      "CreatedDate": "01-06-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 138,
      "CreatedDate": "01-07-2020",
      "Color": "Orange",
      "ColorCode": "#FFCC99"
    },
    {
      "Value": 136,
      "CreatedDate": "01-08-2020",
      "Color": "Green",
      "ColorCode": "#66FF66"
    },
    {
      "Value": 125,
      "CreatedDate": "01-11-2020",
      "Color": "Blue",
      "ColorCode": "#66B2FF"
    }
  ],
  "Graph": "Bar",
  "Xaxis": "No. of users",
  "Yaxis": "Date",
  "Header": "Less Data"
};

  constructor(){}

  ngOnInit() {
    this.tooltipContent = '{seriesName} on {x} : <b>{y}</b>';
  }

  itemFormatter = function (engine, hitTestInfo, defaultFormat) {
    if (hitTestInfo.chartElement === wjcChart.ChartElement.SeriesSymbol) {
      // set the SVG fill and stroke based on the category's bgColor property
      engine.fill = hitTestInfo.item.ColorCode;
      engine.stroke = hitTestInfo.item.ColorCode;
      // engine.fill = this.colorGradient;
      // engine.stroke = this.colorGradient;
      defaultFormat();
    }
  };

  

}

app.component.html


	<div class="custom-bar-chart">

		<wj-flex-chart 
      [itemsSource]="barChartData.List" 
      [chartType]="barChartData.Graph"
			[bindingX]="'CreatedDate'" 
      [tooltipContent]="tooltipContent" 
      [itemFormatter]="itemFormatter"
      [header]="barChartData.Header">
			<wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend>
			<wj-flex-chart-axis wjProperty="axisX" [title]="barChartData.Xaxis"></wj-flex-chart-axis>
			<wj-flex-chart-axis wjProperty="axisY" [title]="barChartData.Yaxis"></wj-flex-chart-axis>
			<wj-flex-chart-series [name]="barChartData.Condition" [binding]="'Value'">
			</wj-flex-chart-series>
			<wj-flex-chart-plot-area [height]="'140px'" [width]="'500px'"></wj-flex-chart-plot-area>
		</wj-flex-chart>

	</div>

  <div class="custom-bar-chart">

		<wj-flex-chart 
      [itemsSource]="barChartData_2.List" 
      [chartType]="barChartData_2.Graph"
			[bindingX]="'CreatedDate'" 
      [tooltipContent]="tooltipContent" 
      [itemFormatter]="itemFormatter"
      [header]="barChartData_2.Header">
			<wj-flex-chart-legend [position]="'None'"></wj-flex-chart-legend>
			<wj-flex-chart-axis [wjProperty]="'axisX'" [title]="barChartData_2.Xaxis"></wj-flex-chart-axis>
			<wj-flex-chart-axis [wjProperty]="'axisY'" [title]="barChartData_2.Yaxis"></wj-flex-chart-axis>
			<wj-flex-chart-series [name]="barChartData_2.Condition" [binding]="'Value'">
			</wj-flex-chart-series>
			<wj-flex-chart-plot-area [height]="'140px'" [width]="'500px'"></wj-flex-chart-plot-area>
		</wj-flex-chart>

	</div>

app.component.css


.wj-tooltip{
    background-color:white;
    color:black;
}

.custom-bar-chart .wj-flexchart{
    height: 300px;
}

ashwin.saxena
- Post Options:
- Link
  Copy
Posted 13 May 2020, 1:25 am EST
Hi,

Sorry for the delayed response. I will answer each of query one by one.

FlexChart is designed in a way so that no scrollbars are added on the SVG elements. If you have not make the height of the bars same for both the charts, you will need to set the height of each chart accordingly.

All of the labels are not displayed because if all the labels will be displayed, the formatting of the y-axis will not be good. In your many data chart, imagine if we add all the labels according to the height, then how messed up the formatting will become. We can actually add the all the labels by using the minorUnit property of the Axis class but your data is does not have an equal unit between them.

That is why, we add tooltips so the data of the labels which are displayed, can also be viewed.

The axisLine property is used to display the X and Y axis lines, Just set it to true, and the lines will be displayed.

In Wijmo, we provide our own way to add gradients to the series. Refer to the doc link below for the same:

https://www.grapecity.com/wijmo/docs/Topics/Chart/Advanced/Styling-Series#using-gradient-colors

Please refer to the updated sample:

https://stackblitz.com/edit/angular-nask3h

Regards,

Ashwin

Please login to reply to thread

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

ComponentOne

Forums for all current editions of the ComponentOne .NET UI control product line, including ComponentOne Studio and ComponentOne Studio for Xamarin.
ActiveReports

Forums for all versions of ActiveReports and ActiveReports Server
Spread

Forums for all current versions of Spread .NET spreadsheets, SpreadJS JavaScript spreadsheets, and SpreadCOM spreadsheets.
Wijmo

Forums for all Wijmo products, including Wijmo Core, FinancialChart, FlexSheet, MultiRow, OLAP, and ReportViewer
- General Discussion
Document Solutions

Forums for all Document Solutions products, including Document Solutions for PDF, Word, Excel (.NET and Java), and Imaging.

Wijmo5 flexchart with Angular8 issues

Need extra support?

Forum Channels

ComponentOne

ActiveReports

Spread

Wijmo

Document Solutions