How to set grid background colour based on Y axis value

TeeChart for Javascript for the HTML5 Canvas
Post Reply
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

How to set grid background colour based on Y axis value

Post by SenSeo » 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?

Site Admin
Site Admin
Posts: 8969
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia

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

Post by Yeray » Fri Apr 08, 2016 3:31 pm


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);

  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);

beforedraw.jpg (30.17 KiB) Viewed 3211 times
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply