Include a new ranged bar chart

[ricardosaracino]

would be nice if you had a ranged bar chart these are fairly common, i have to use a separate 3rd party library to accommodate this

pictured is a high charts columnrange chart

[kdinev]

@ricardosaracino Is this the chart you're looking for? https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/column-chart#angular-range-column-chart

[ricardosaracino]

@kdinev this kind of chart is exactly what need but i need the axis flipped horizonal, can this accomplish it?

this is my mock

[kdinev]

@ricardosaracino Sorry that it took me a while to get back to this question. @gmurray81 would you be able to point us in the right direction?

[gmurray81]

@ricardosaracino you can do this with various shape series, but it isn't very turnkey, but I believe we have a sample somewhete, or another option is you can actually do this with two bar charts, one colored and white to create the negative space for the range bottom.

I'd say we are very interested in adding this as a first class series though, since all the bits and pieces are already there for horizontal series due to bar charts, so I think we'll add support for this quite soon.

[gmurray81]

It's technically possible btw to rotate the chart and counter rotate the labels to get this look from a range column chart also, but I wouldn't necessarily recommend that on web since think the CSS rotate would likely disrupt the tooltips. Let me show you a simple sample for how you can do this with todays stuff, but as I said, I think we'll add first class support for this.

[ricardosaracino]

thanks for the recommends, im not looking for a hacky solution. im using highcharts for now. i will replace highcharts in the future when you support it as im not looking to bloat the project for single highchart.

[gmurray81]

here's a sample of how you can do this today:

<igx-data-chart
      name="chart"
      #chart
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      [legend]="legend"
    >
      <igx-category-y-axis
        name="yAxis"
        #yAxis
        label="month"
        majorStroke="#666"
        tickLength="0"
        majorStrokeThickness=".5"
        overlap="1"
        interval="1"
        [dataSource]="temperatureRangeData"
      >
      </igx-category-y-axis>
      <igx-numeric-x-axis
        name="xAxis"
        #xAxis
        title="Temperature (in Celsius)"
        majorStroke="transparent"
        titleLeftMargin="10"
      >
      </igx-numeric-x-axis>
      <igx-bar-series
        name="RangeBarSeries1"
        #rangeBarSeries1
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        outline="white"
        title="Los Angeles - High"
        valueMemberPath="highLA"
        [dataSource]="temperatureRangeData"
      >
      </igx-bar-series>
      <igx-bar-series
        name="RangeBarSeries2"
        brush="white"
        outline="white"
        #rangeBarSeries2
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        title="Los Angeles - Low"
        valueMemberPath="lowLA"
        [dataSource]="temperatureRangeData"
      >
      </igx-bar-series>
      <igx-data-tool-tip-layer
        name="dataToolTipLayer"
        summaryType="None"
        #dataToolTipLayer
      >
      </igx-data-tool-tip-layer>
    </igx-data-chart>

hope that is useful, and yeah, as I said, I think we are interested in adding a igx-range-bar-series to mirror igx-range-column-series since this request comes up from time to time.

[gmurray81]

for the per item coloring, there are several approaches. One is to use a different series layered over top that has data for the items you want colored in a particular way. It would have NaN values for the other categories. Another way is to use assigningCategoryStyle event to modify the colors dynamically during the render. The advantage of the former approach is that it would automatically show up in a legend.

[gmurray81]

here's how you could dynamically color some of the items:

public assigningCategoryStyle(ev: {
    sender: IgxCategorySeriesComponent;
    args: IgxAssigningCategoryStyleEventArgs;
  }) {
    var items = ev.args.getItems(ev.args.startIndex, ev.args.endIndex);
    var item = items && items.length && items[0];
    if (item.highLA > 35) {
      ev.args.fill = "red";
    }
  }

 <igx-bar-series
        name="RangeBarSeries1"
        #rangeBarSeries1
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        outline="white"
        title="Los Angeles - High"
        isCustomCategoryStyleAllowed="true"
        (assigningCategoryStyle)="this.assigningCategoryStyle($event)"
        valueMemberPath="highLA"
        [dataSource]="temperatureRangeData"
      >
      </igx-bar-series>

[gmurray81]

this shows how using a separate series for the differently colored items allows it to automatically show in the legend and tooltips:

<igx-data-chart
      name="chart"
      #chart
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      [legend]="legend"
    >
      <igx-category-y-axis
        name="yAxis"
        #yAxis
        label="month"
        majorStroke="#666"
        tickLength="0"
        majorStrokeThickness=".5"
        overlap="1"
        interval="1"
        [dataSource]="temperatureRangeData"
      >
      </igx-category-y-axis>
      <igx-numeric-x-axis
        name="xAxis"
        #xAxis
        title="Temperature (in Celsius)"
        majorStroke="transparent"
        titleLeftMargin="10"
      >
      </igx-numeric-x-axis>
      <igx-bar-series
        name="RangeBarSeries1"
        #rangeBarSeries1
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        outline="white"
        title="Los Angeles - High"
        valueMemberPath="highLA"
        [dataSource]="temperatureRangeData"
      >
      </igx-bar-series>
      <igx-bar-series
        name="RangeBarSeries3"
        #rangeBarSeries3
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        brush="red"
        outline="white"
        title="Los Angeles - Out of Band"
        valueMemberPath="highLARed"
        [dataSource]="temperatureRangeData"
      >
      </igx-bar-series>
      <igx-bar-series
        name="RangeBarSeries2"
        brush="white"
        outline="white"
        #rangeBarSeries2
        [xAxis]="xAxis"
        [yAxis]="yAxis"
        title="Los Angeles - Low"
        valueMemberPath="lowLA"
        [dataSource]="temperatureRangeData"
      >
      </igx-bar-series>
      <igx-data-tool-tip-layer
        name="dataToolTipLayer"
        summaryType="None"
        #dataToolTipLayer
      >
      </igx-data-tool-tip-layer>
    </igx-data-chart>

public get temperatureRangeData(): TemperatureRangeData {
    if (this._temperatureRangeData == null) {
      this._temperatureRangeData = new TemperatureRangeData();

      this._temperatureRangeData.forEach((v) => {
        if (v.highLA > 35) {
          (v as any).highLARed = v.highLA;
        }
      });
    }
    return this._temperatureRangeData;
  }

[gmurray81]

thanks for the recommends, im not looking for a hacky solution. im using highcharts for now. i will replace highcharts in the future when you support it as im not looking to bloat the project for single highchart.

Understood! I think the above are a reasonably clean approach, but check back here soon too, since it think we'll have some good news RE range bar.