2

So, i use Chart.js for my project and that's what I saw in the PSD. enter image description here

Ok. I began to explore the question and actually found the answer to my question. Separately.

For the vertical line - Moving vertical line when hovering over the chart using chart.js

For the shadow - https://jsfiddle.net/dces93wv/ or https://github.com/chartjs/Chart.js/issues/4977

But for several hours I have not been able to figure out how to combine these two methods. :(

const ShadowLineElement = Chart.elements.Line.extend({
  draw () {
  
    const { ctx } = this._chart

    const originalStroke = ctx.stroke

    ctx.stroke = function () {
      ctx.save()
      ctx.shadowColor = 'red'
      ctx.shadowBlur = 0
      ctx.shadowOffsetX = 0
      ctx.shadowOffsetY = 8
      originalStroke.apply(this, arguments)
      ctx.restore()
    }
    
    Chart.elements.Line.prototype.draw.apply(this, arguments)
    
    ctx.stroke = originalStroke;
  }
})

Chart.defaults.ShadowLine = Chart.defaults.line
Chart.controllers.ShadowLine = Chart.controllers.line.extend({
  datasetElementType: ShadowLineElement
})

new Chart(document.getElementById('canvas'), {
      type: 'ShadowLine',
      data: {
        datasets: [
          {
           label: 'somedata',
            fill: false,
            borderColor: 'green',
           data: [
             10, 20
            ]
          }
        ]
      }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<p>
<b style="color: red">red</b> is shadow
</p>
<canvas id="canvas" width="200" height="100"></canvas>
user2164613
  • 157
  • 1
  • 2
  • 7

1 Answers1

6

You can customize various things with a Chart Js library (docs).

To add shadows to chart lines you can use Chart.controllers.line and create a function to draw the shadow.

Example for shadows:

let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line = Chart.controllers.line.extend({
    draw: function() {
        draw.apply(this, arguments);
        let ctx = this.chart.chart.ctx;
        let _stroke = ctx.stroke;
        ctx.stroke = function() {
            ctx.save();
            ctx.shadowColor = '#000000';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 4;
            _stroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

And to create vertical lines you can use Chart.defaults.LineWithLine and create a function to draw the vertical line too.

Example:

Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
   draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);

      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
         var activePoint = this.chart.tooltip._active[0],
             ctx = this.chart.ctx,
             x = activePoint.tooltipPosition().x,
             topY = this.chart.scales['y-axis-0'].top,
             bottomY = this.chart.scales['y-axis-0'].bottom;

         // draw line
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 2;
         ctx.strokeStyle = '#07C';
         ctx.stroke();
         ctx.restore();
      }
   }
});

follow the complete code for your question in my Fiddle

Edi
  • 615
  • 5
  • 15