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
- Wrong tootip in chartjs
- Display Time In Y Axis - Bubble Chart
- Chart.js - Responsiveness not correctly working on device orientation change
- How do I loop under Chart js in JavaScript for multiple axis?
- LinearGradient doesnt't work on chartJs canvas for Angular
- Draw borders on line chartjs
- How to remove excess lines on X axis using chartjs?
- Chart.Js - Display only specific (fixed) X axis labels
- Chartjs axis description is not selectable and therefor not copyable
- Update chart in Chart js
- Can I bind an onclick event and edit a point in chartjs
- ChartJS v2.6 update breaks custom line-with-area-range (stripe) chart
- chart.js add second line in a Line chart that starts from end of first line
- Horizontal overlapping of bars, not whole graph
- Is there a way to draw floating rectangle using chart.js
- Which is the appropriate lifecycle hook to draw a line?
- Chartjs with Typescript: The types of 'interaction.mode' are incompatible between these types
- How do i programmatically set bar fillColor in chartJs + angular
- Chart JS tick options not working for y axis
- How to create an array of objects dynamically in javascript for a pie chart
- Resizing chart issue with CSS Grid
- Why does one chart overlays another (chart.js)?
- Chart.js: Display only the horizontal gridline at zero index
- How to create datasets for all labels for stacked bar in chart.js?
- How to get Uptime charts for Web Monitoring like Dynatrace?
- How do you label points in a scatterChart built using ng2-chart
- ChartJS doughnut legend click
- Hiding Chart.js line, but showing it's data in the tooltip
- how to transform changing data to be visualized in a chart.js
- Chartjs - Shift line plot to the right?