Chart.js Line, different fill color for negative point

by

You can extend the line chart to do this.

Preview

enter image description here

Script

Chart.defaults.NegativeTransparentLine = Chart.helpers.clone(Chart.defaults.line);
Chart.controllers.NegativeTransparentLine = Chart.controllers.line.extend({
    update: function () {
        // get the min and max values
        var min = Math.min.apply(null, this.chart.data.datasets[0].data);
        var max = Math.max.apply(null, this.chart.data.datasets[0].data);
        var yScale = this.getScaleForId(this.getDataset().yAxisID);

        // figure out the pixels for these and the value 0
        var top = yScale.getPixelForValue(max);
        var zero = yScale.getPixelForValue(0);
        var bottom = yScale.getPixelForValue(min);

        // build a gradient that switches color at the 0 point
        var ctx = this.chart.chart.ctx;
        var gradient = ctx.createLinearGradient(0, top, 0, bottom);
        var ratio = Math.min((zero - top) / (bottom - top), 1);
        gradient.addColorStop(0, 'rgba(75,192,192,0.4)');
        gradient.addColorStop(ratio, 'rgba(75,192,192,0.4)');
        gradient.addColorStop(ratio, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, 'rgba(0,0,0,0)');
        this.chart.data.datasets[0].backgroundColor = gradient;

        return Chart.controllers.line.prototype.update.apply(this, arguments);
    }
});

and then

 ...
 var myLineChart = new Chart(ctx, {
     type: 'NegativeTransparentLine',
     data: {
     ...

Fiddle – http://jsfiddle.net/g2r2q5Lu/

More Related Contents:

  1. Javascript Commenting not working. Cannot comment out a comment?
  2. Random color generator
  3. Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
  4. Javascript function to convert color names to hex codes
  5. How to display data values on Chart.js
  6. JavaScript eyedropper (tell color of pixel under mouse cursor)
  7. Dynamically update values of a chartjs chart
  8. JS function to calculate complementary colour?
  9. Javascript color gradient
  10. Chart.js — drawing an arbitrary vertical line
  11. Convert RGB to RGBA over white
  12. How can I generate the opposite color according to current color?
  13. Click events on Pie Charts in Chart.js
  14. How to check if a string is a valid hex color representation?
  15. Destroy chart.js bar graph to redraw other graph in same
  16. Chart.js – draw horizontal line
  17. Mixing two colors “naturally” in javascript
  18. How to put rounded corners on a Chart.js Bar chart
  19. ChartJS: datalabels: show percentage value in Pie piece
  20. Is canvas getImageData method machine/browser dependent?
  21. Limit labels number on Chart.js line chart
  22. Remove x-axis label/text in chart.js
  23. Convert HSB/HSV color to HSL
  24. Chart.js v2: How to make tooltips always appear on pie chart?
  25. Create a hexadecimal colour based on a string with JavaScript
  26. chart.js Failed to create chart: can’t acquire context from the given item
  27. How to add images as labels to Canvas Charts using chart.js
  28. Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?
  29. ng2-charts update labels and data
  30. How to check if hex color is “too black”?

Leave a Comment