score:3
Accepted answer
You can extend the chart to override the scale draw function and draw a thicker / differently coloured line where you want
Preview
Script
Chart.types.Bar.extend({
name: "BarAlt",
initialize: function(data){
Chart.types.Bar.prototype.initialize.apply(this, arguments);
var originalScaleDraw = this.scale.draw;
this.scale.draw = function() {
originalScaleDraw.apply(this, arguments);
this.ctx.save();
this.ctx.beginPath();
this.ctx.lineWidth = this.gridLineWidth * 5;
this.ctx.strokeStyle = "rgba(120,120,220,1)";
this.ctx.moveTo(Math.round(this.xScalePaddingLeft), this.calculateY(60));
this.ctx.lineTo(this.width, this.calculateY(60));
this.ctx.stroke();
this.ctx.closePath();
this.ctx.restore();
}
}
});
and then
...
new Chart(ctx).BarAlt(data);
Fiddle - http://jsfiddle.net/udojrq57/
Source: stackoverflow.com
Related Query
- How to change grid line width for one specific line
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- how to set chart.js grid color for line chart
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- Chart.js - How to customize specific grid line depending on tick value
- How do I change the grid line style on the Y axis in Chart.js?
- How can I change background color of a specific area in my chart's grid using Chart.js and Annotation?
- How to remove Grid lines except for zero line and border Chartjs?
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chartjs change grid line color
- How to change colours for Angular-Chart.js
- How to disable a tooltip for a specific dataset in ChartJS
- Chart.js how to show cursor pointer for labels & legends in line chart
- How to create datasets dynamically for chart.js Line chart?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to display value of only one datapoint in line chart
- Chart js. How to change font styles for "labels" array?
- How to change the color of legend in chartjs and be able to add one more legend?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to change line segment color of a line graph in Chart.js?
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- How to display only one label in a multi line char?
- chart.js: hide specific ticks in y-axis and hide all x-axis grid line
- How to dynamically set ChartJs line chart width based on dataset size?
- How to draw round edges with chart.js for line diagrams
- Change size of a specific point on a line chart in Chart.js
- How to add a horizontal line at a specific point in chart.js when hovering?
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- How can I change color of only one column in Barchart using Chart.js
More Query from same tag
- How to colorize individual rings in polar chart background in chart.js/ng2-charts?
- Proper way to use a counter variable in HTML/Javascript
- Setting up min and max in chartjs did not work
- Chart.js annotation horizontal line on double y-axis graph
- Google Pie Chart php mysql
- The data that is called in chart does not match the database
- How to to change mouse cursor on chart.js doughnut graph?
- Use react-icons for pointStyles in Chart.js graph on Next.js app
- Trying to create a custom tooltip in a doughnut chart using chartsjs, but it is not working
- Chart.js Pie Chart: How to set background image for segment
- how does this javascript recolor the doghnut?
- Using data saved as a variable in HTML from Python
- how to set color of label in chartjs?
- flask altering python list
- How to move a chart.js to the center
- Click on Element Inside Doughnut Chart
- chartjs V3 align legend text
- ChartJS options with Chartkick
- Dashboard grid - Chart.JS and CSS- issue widening two small horizontal bar graphs - noob question
- how to set start value as "0" in chartjs?
- Scrollable x axis with chart.js 2.1.4
- Is it able to align line chart at left margin in mixed chart?
- Last value not showing in bar graph of charts.js-library
- Why is my Line Chart.JS starting in the middle?
- Gantt Chart Variation with Chart JS or other libraries
- Chart.js : how I can adjust Pie chart radius?
- ChartJS - Highlight Weekends and Lowest and Highest Values
- Datalabels plugin chartjs showing '[object]' instead of value
- Adding custom title in tooltips of chart.js
- How to put an image a circle chart