CODEWITHSUNDEEP
javascriptangularkendo-ui
Adam
Adam

Reputation: 3914

How to add plot bands on Kendo Charts Angular 2

I have stumbled upon a problem while developing an application in which I wanted to display the average as a line on my kendo chart. I have searched and couldn't find any examples. Any ideas?

Upvotes: 1

Views: 312

Answers (1)

Adam
Adam

Reputation: 3914

So after much digging we've found the answer. Here is how to do it in case you run into the same problem:

In your HTML file: 

<kendo-stockchart [seriesColors]="['silver','cyan']">

 <kendo-chart-value-axis>
            <kendo-chart-value-axis-item [line]="{visible:true}" [plotBands]="plotBand1">
            <kendo-chart-value-axis-item-labels format='s'>
            </kendo-chart-value-axis-item-labels>

          </kendo-chart-value-axis-item>
      </kendo-chart-value-axis>

              <kendo-chart-series>
                <kendo-chart-series-item type="column" [data]="series" field="High" categoryField="Date">
                </kendo-chart-series-item>
             </kendo-chart-series>
</kendo-stockchart>

In your .ts file define the plotBandValues as this: 

public plotBand1 = [{
"color": "darkorange",
"from": 29,
"opacity": 0.5,
"to": 29.5
}]

and this should show a line like this:

enter image description here

Upvotes: 2

Related Questions