score:11
Adding a Drop Shadow for Line Charts
You can extend the line chart type to do this
Preview
Script
Chart.types.Line.extend({
name: "LineAlt",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var ctx = this.chart.ctx;
var originalStroke = ctx.stroke;
ctx.stroke = function () {
ctx.save();
ctx.shadowColor = '#000';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
originalStroke.apply(this, arguments)
ctx.restore();
}
}
});
and then
...
var myChart = new Chart(ctx).LineAlt(data, {
datasetFill: false
});
Fiddle - https://jsfiddle.net/7kbz1L4t/
score:0
This works for new version of Chart JS We can create a plugin object and register to the chart JS, Plugins are a way for a developer to modify a chart as it is being created, for reference please look at
https://riptutorial.com/chart-js/example/22332/plugins-introduction
Example Plugin to add a shadow to any of the chart
var simpleplugin = {
beforeDraw : function(chartInstance)
{
let _stroke = chartInstance.ctx.stroke;
chartInstance.ctx.stroke = function () {
chartInstance.ctx.save();
chartInstance.ctx.shadowColor = 'gray';
chartInstance.ctx.shadowBlur = 10;
chartInstance.ctx.shadowOffsetX = 2;
chartInstance.ctx.shadowOffsetY = 2;
_stroke.apply(this, arguments)
chartInstance.ctx.restore();
}
let _fill = chartInstance.ctx.fill;
ctx.fill = function () {
chartInstance.ctx.save();
chartInstance.ctx.shadowColor = 'gray';
chartInstance.ctx.shadowBlur = 10;
chartInstance.ctx.shadowOffsetX = 2;
chartInstance.ctx.shadowOffsetY = 2;
_fill.apply(this, arguments)
chartInstance.ctx.restore();
}
}
}
$(function()
{
Chart.pluginService.register(simpleplugin);
});
score:6
๐๐๐๐๐๐๐๐ ๐๐๐ ๐ฒ๐๐๐๐๐น๐ ๐ธ.๐ก.๐ก
แดสแดแด ษชแดแดก
๊ฑแดสษชแดแดโoverriding the draw function
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
draw.apply(this, arguments);
let ctx = this.chart.chart.ctx;
let _stroke = ctx.stroke;
ctx.stroke = function() {
ctx.save();
ctx.shadowColor = '#07C';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 4;
_stroke.apply(this, arguments);
ctx.restore();
}
};
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
draw.apply(this, arguments);
let ctx = this.chart.chart.ctx;
let _stroke = ctx.stroke;
ctx.stroke = function() {
ctx.save();
ctx.shadowColor = '#07C';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 4;
_stroke.apply(this, arguments);
ctx.restore();
}
};
let ctx = document.querySelector("#canvas").getContext('2d');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
data: [65, 59, 75, 64, 70, 30, 40],
borderColor: '#07C',
pointBackgroundColor: "#FFF",
pointBorderColor: "#07C",
pointHoverBackgroundColor: "#07C",
pointHoverBorderColor: "#FFF",
pointRadius: 4,
pointHoverRadius: 4,
fill: false,
tension: 0.15
}]
},
options: {
responsive: false,
tooltips: {
displayColors: false,
callbacks: {
label: function(e, d) {
return `${e.xLabel} : ${e.yLabel}`
},
title: function() {
return;
}
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
max: 90
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas" width="400" height="210" style="background-color: #E4E8F0"></canvas>
Source: stackoverflow.com
Related Query
- Styling Bars and Lines with Chart.js
- Align lines and bars in a mixed chart
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to prevent first/last bars from being cut off in a chart with time scale
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js Mixed Bar and Line chart with different scales
- Problem for display a chart with Chart.js and Angular
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- How to display data labels outside in pie chart with lines in ionic
- Can we draw a Line Chart with both solid and dotted line in it?
- Increase padding between legend and chart with react-chartjs-2
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- React chart : prevent chart's canvas scaling with height and width
- Why would a ChartJS chart end up with width 0 and height 0?
- Using chart js options with react-chartjs-2 and typescript
- Trying to load a chart with chart.js, through ajax and php
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- Angular-chart / line chart with multiple horizontal lines (margins)
- Issue while plotting bar chart with custom x-axis with month and year in chart.js
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- Dynamic line chart with chart.js and PHP
- Chart.js v2 - combined stacked bar chart and 2 unstacked lines
- Doughnut Chart not displaying data with Chart Js and Backbone js
- how to display multiple sum with chart js and laravel?
- live update ecg chart with python and flask
- Chart.js: Reverse bar chart with regular bars (Bottom to top instead of top to bottom)
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Bar chart with min height and zero values - ChartJs
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
More Query from same tag
- How to create html id attributes dynamically?
- Why is pan (and zoom) not working on my Chart.js graph?
- i have an error when use chart on laravel
- Chart.js Line, different fill color for negative point
- How to use images as key for chart.js legend
- Which jquery plugin can create a stacked column chart?
- Chartjs treemap example
- Chartjs bar order adjustment after bar chart is drawn
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Chart.js pie chart overflowing div
- How to show multiple datasets in line chart js
- chart js and json, chart not showing up
- Chart.js time series showing empty plot
- Chartjs line graph goes over panel
- In bar chartjs report zero values are skipped so bars are invalid
- Vertical spacing in horizontal ChartJS Bar Graph
- Property 'getContext' does not exist on type 'HTMLElement'
- charts.js chart size it's diferente than container setted size
- Call ChartJS details in main Javascript file
- Line Charts color all greyed out (ng2-charts)
- ChartJS: Mapping Non numeric Y and X
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- how to use chartJS to show breakdown of selected data
- Vue js component and Chart js
- ChartJS fixed y axis on scroll
- Trouble using utcoffset with Chart.js
- Chartjs - Insert additional data into chart tooltip
- ChartJS does not work on Windows 10 - in any browser
- Chart.JS custom y axis labels with text that has value
- vb.net string to chartjs data field?