Steema Central

Posted: **Thu Apr 07, 2016 10:05 am**

We are trying to set different background colour to grid based on Y axis value.
For example :
1)The grid colour should be displayed in red upto Y axis value 50 from 0.
2) From Y axis value 50 to 100, the grid colour should be displayed in green color
3) above 100, the grid color should be displayed in yellow colour.

Is there any way to set the grid background color based on Y axis data range?

Posted: **Fri Apr 08, 2016 3:31 pm**

Hello,

If you look at the reference demo, you'll find the custom_paint demo that shows you how to draw a shape on top of your chart using Chart1.ondraw event.
If you want to draw shapes behind the series, you can use the beforeDraw event of your first series. Ie:

Code: Select all

var Chart1;

function draw() {
  Chart1 = new Tee.Chart("canvas1");
 
  Chart1.addSeries(new Tee.Line([50,30,20,70,10,60,40,50,10,0,100]) ).format.stroke.size=4;

  var myFormat = new Tee.Format(Chart1);
  myFormat.gradient.visible=true;
  myFormat.gradient.colors=["white","lime"];
  myFormat.transparency=0.3;

  Chart1.series.items[0].beforeDraw=function() {

    var x1 = Chart1.chartRect.x,
        y1 = Chart1.axes.left.calc(70),
        x2 = Chart1.chartRect.x + Chart1.chartRect.width,
        y2 = Chart1.axes.left.calc(40);

    // X,Y, Width, Height
    myFormat.rectangle(x1,y1, x2-x1, y2-y1);

  }
 
  Chart1.draw();
}

: beforedraw.jpg (30.17 KiB) Viewed 7564 times

Steema Central

How to set grid background colour based on Y axis value

How to set grid background colour based on Y axis value

Re: How to set grid background colour based on Y axis value