score: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
Source: stackoverflow.com
Related Query
- Chart.js vertical line when hovering and shadow on line
- Moving vertical line when hovering over the chart using chart.js
- ReactJS - Moving vertical line when hovering over Line chart using chart.js v3.7.1
- Moving vertical line when hovering over the chart using chart.js in v2.9.4
- Draw a horizontal and vertical line on mouse hover in chart js
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Chartjs: Need help on drawing a vertical line when hovering cursor
- Chart.js 3.6.2, Angular 10: Logarithmic Line chart Y-Axis problems. How to set and keep Y-Axis properties, even when data changes?
- chart.js - how to draw and manage line when only one label present in chart js Linechart
- How to add vertical line in bar chart using chartJs and ng2-charts?
- Change Vertical Line and Color bar chart in bar chart.js
- Chartjs Bar Chart showing old data when hovering
- Remove the vertical line in the chart js line chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- ChartJs line chart repaint glitch while hovering over
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- ChartJS: Draw vertical line at data point on chart on mouseover
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Drawing line chart in chart.js placing dots only when value changes
- Can we draw a Line Chart with both solid and dotted line in it?
- Chart js vertical line z-index
- ChartJS Line chart cut off at the top and bottom
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- How to add a vertical line on Chart.js when hover a point?
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS line chart drag and zoom
More Query from same tag
- Referencing locally declared variable into an array for data for chartjs
- chartjs add dots to bars in grouped bar chart
- Chart.js load new data
- Extend chart.js horizontal bar graph to include a vertical line
- ChartJS Recreate Chart
- getting chartsjs to show key of data label instead of value
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- Increase gap between line-chart and legend ChartJS
- How to reduce the number of data points displayed in react-chart-js2 (data decimation)
- How to create an animate-on-update Stacked Bar chart using Chart.js(or Chartist)?
- ChartJS remove previous chart when making new one
- Filter ChartJS using data from PHP
- Charts js showing only when positives data
- How can I export data from a csv file or excel file to a javascript object?
- Chart JS not working with Phonegap
- vue-chartjs how to load data
- Adding options to vue-chartjs seems not working
- Chart JS Layered Vertical Bar Chart
- Chart js pie chart, darker shade for higher value and lighter shade for lower value. I'm displaying values monthly
- Allow display of multiple data attributes in tooltip of Chart.js
- Custom dataset object not setting chart.js bar chart colors in Angular 6
- how to use chartJS to show breakdown of selected data
- The title of my ChartJs on the chart is undefined, but I can't change it because my labels use a function: Object.keys(groupMedia)
- chartjs + Angular6 is not showing charts or any error
- Angular: How to change color of chartjs?
- Chart js scatter graph labels
- Unable to resolve path to module 'chartjs-plugin-stacked100'
- Chart.JS Global Options
- Ember.Computed is not a function
- chartjs doesn't render dates properly