score:0
you will need a custom plugin for this, see live example:
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
bordercolor: 'red',
backgroundcolor: 'red'
}]
},
options: {
plugins: {
selector: {
color: 'blue',
width: 2,
// if canvas has a different backgroundcolor set this to match
boxcolor: 'white'
}
}
},
plugins: [{
id: 'selector',
beforedatasetsdraw: (chart, args, opts) => {
// return if no hover
if (chart._active.length === 0) {
return;
}
// set all variables needed
const activeel = chart._active[0].element;
const labelitem = chart.scales.x._labelitems[chart._active[0].index];
const {
ctx,
scales: {
y
}
} = chart;
const metrics = ctx.measuretext(labelitem.label);
const labelwidth = metrics.width;
const labelheight = metrics.fontboundingboxascent + metrics.fontboundingboxdescent;
// draw white box over old label
ctx.save();
ctx.fillstyle = opts.boxcolor || '#ffffff';
ctx.fillrect((labelitem.translation[0] - labelwidth / 2), labelitem.translation[1], labelwidth, labelheight);
ctx.restore();
// draw new text on canvas
ctx.save();
ctx.font = chart.helpers.tofontstring(object.assign(labelitem.font, {
style: 'bold'
}));
ctx.filltext(labelitem.label, (labelitem.translation[0] - labelwidth / 2), labelitem.translation[1] + labelitem.textoffset)
ctx.restore();
// draw vertical line down from point
ctx.save();
ctx.linewidth = opts.width || 1;
ctx.strokestyle = opts.color || 'black';
ctx.beginpath();
ctx.moveto(activeel.x, activeel.y);
ctx.lineto(activeel.x, y.getpixelforvalue(y.min));
ctx.stroke();
ctx.restore();
}
}]
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.4.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Add line from point to x-axis and bold label of him
- How can I add vertical line and label for each point in Chart.js?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Multiple axis line chart with Chart.js and JSON data from Google Sheet
- how to label the x and y axis - in a line graph
- How to remove square label from tooltip and make its information in one line?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Hide min and max values from y Axis in Chart.js
- show label in tooltip but not in x axis for chartjs line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js with dual axis on bar and line graph
- How to add a point to chart.js line chart?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Removing ChartJS 2 border and shadow from point style legend
- How to add a horizontal line at a specific point in chart.js when hovering?
- Add a text as tooltip for each point on a line chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- chart.js add second line in a Line chart that starts from end of first line
- Add a label to a point of a bubble graph (Chart.js)
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- chart.js - user add the final point of the line
- ChartJS getting an unwanted line between first data point and last data point
- How to sort XY line chart tooltip items based on value and add thousands separators?
- Chart.js add border around line chart, and yAxis unit title ([s])
- Change label color Y and X axis chart.js
- display vertical axis label in line chart using chart.js
More Query from same tag
- Time Series Line chart js in react not working
- integrate a scroll bar along with chartjs-zoom-plugin
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- Can't pass data to chart.js graph
- ChartJs Angular directive - chart[chartType] is not a function
- Chart.js canvas : can't center it
- Iterate over query for use in Charts.js using Coldfusion
- Chart JS ShowChart()bar" is not a chart type error
- ChartJS Label Names Not Showing, Just ID
- How to use icon as legend in Chart.js?
- ChartJS line chart or bar graph from a Java program
- Uprading to chart.js@3.x with Angular 8
- Chart.js nuget Package with angularJS
- Laravel - How to Display both count and percentage (%) in chartjs pie chart
- How to use Chart.js in Angular4?
- Set minimum number of steps in line chart
- Changing the label of chart
- How to add commas when showTooltips is false in ChartJS
- How to integrate charts with js and jQuery?
- Charts js - How to make gridlines dash and How to make the gridlines stop at each point
- Angular Chart.js, how to remove series?
- Chart.JS Get Json data for chart and return dataset where a type equals a certain type
- Change size of a specific point on a line chart in Chart.js
- How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+
- Reduce spacing between bars in horizontal bar chart (chart.js)
- Don't show label tooltip in Chart.js if hover is less than 1 second
- Trying to get multiple chart.js charts to load on the same page
- Display a single tooltip with Chart.JS?
- ChartJS TypeError: document.getElementById(...).getContext is not a function
- Why are my two charts repeating the same label?