CODEWITHSUNDEEP
chartsdygraphsgridlines
Matul Jain
Matul Jain

Reputation: 168

Dygraph custom color for grid lines

I want to have red color for grid lines having date (20Jul) in their x-axis label, but default(black) for time x-axis labels.

I have tried using "gridLineColor" in Dygraph options but it applies to all the grid lines at once. 

 view.chart = new Dygraph(panelForDygraph,
            data, {
                width: activeTab.getWidth() - 50,
                height: panel.up().up().getHeight() - 150,
                labels: channel,
                labelsSeparateLines: true,
                gridLineColor: 'lightgrey'               
            }
   );

Here is what i want to do:

screenshot

Upvotes: 0

Views: 555

Answers (1)

danvk
danvk

Reputation: 16903

You can draw anything you like using an underlayCallback. Check out the highlighted-region page for a demo.

In your case you'd want something like:

view.chart = new Dygraph(
  panelForDygraph,
  data, {
    width: activeTab.getWidth() - 50,
    height: panel.up().up().getHeight() - 150,
    labels: channel,
    labelsSeparateLines: true,
    gridLineColor: 'lightgrey',
    underlayCallback: function(canvas, area, g) {
      var x1 = g.toDomXCoord(new Date('2019-07-19'));
      var x2 = g.toDomXCoord(new Date('2019-07-20'));

      canvas.fillStyle = 'red';
      canvas.fillRect(x1, area.y, 1, area.h);
      canvas.fillRect(x2, area.y, 1, area.h);
    }
  }
);

You can adjust the width and positioning to taste.

Upvotes: 2

Related Questions