score:2
Accepted answer
you can't use css since its not html styling because its drawn on the canvas.
what you can do is provide a custom positioner for the tooltip to chart.js.
in the sample below you can see how to do it. increading the yoffset
variable i declared on top will move the tooltip more above the point and increasing the xoffset
variable i declared on top it will move the tooltip more to the right:
const yoffset = 10;
const xoffset = 00;
chart.tooltip.positioners.custom = function(items) {
const pos = chart.tooltip.positioners.average(items);
// happens when nothing is found
if (pos === false) {
return false;
}
const chart = this.chart;
return {
x: pos.x + xoffset,
y: pos.y - yoffset,
yalign: 'bottom',
};
}
const options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
borderwidth: 1
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
borderwidth: 1
}
]
},
options: {
plugins: {
tooltip: {
caretpadding: 3,
caretsize: 0,
displaycolors: false,
backgroundcolor: 'rgba(45,132,180,0.8)',
bodyfontcolor: 'rgb(255,255,255)',
callbacks: {
title: () => {
return
},
label: (ttitem) => (`${ttitem.parsed.y} ppm`),
afterbody: (ttitems) => (ttitems[0].label)
},
position: 'custom'
}
}
}
}
const 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.7.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Is there a way to apply css on chart.js V3.7.0 tooltip without it being custom or external?
- Is there a convenient way to print values to a JS chart from a CSV file without converting it?
- (Chart.js) Is there a way to compare one chart with another so as not to have this inconsistent effect of small values being as big as big values?
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Chart JS custom tooltip option?
- Chart.js v2 is there a way to draw bar chart horizontally?
- How to disable Chart JS tooltip when there is no value?
- Chart JS custom tooltip not showing
- Is there any way to get Chiselled Effect in chart js?
- Is there a way to change part of the title to another font style or set a custom title format in Chart.js?
- Is there a way to make a view run without having to show the view in the browser in laravel?
- chart.js pie chart background colors: is there any way to generate them randomly?
- nnnick chart.js - Custom Tooltip on Line Chart
- Is there a way to change the react-chart-js tooltip only on a graph?
- Is there a way to give a pie chart in chart.js a different color outer border than the border color between segments?
- ChartJS add custom tooltip to a stacked bar chart
- Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- Is there a way to display a chart label that has no data behind it in Chart.js
- chart.js Is there way to color line chart ticks depending on value
- How to display Tooltip without hovering pie chart with Chart.JS
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- Chart JS - Is there a way to connect two datasets in a line chart?
- Is there a way to style multiple borders on Doughnut chart with Chart.js library?
- chartjs - How to access chart instance in a custom tooltip callback
- Is there a more optimized way to implement the change function of chart js upon changing the dropdowns?
- ChartJs (ver: 2.8.0): Custom tooltip does not hide if clicked (or mouse pointer is moved) outside the chart canvas area
- Trying to create a custom tooltip in a doughnut chart using chartsjs, but it is not working
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- In ng 2 chart during the load an undefined legend gets created automatically ,Is there any way to remove it?
More Query from same tag
- how to add second axes to chart JS
- Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"
- TimeSeries scale in ChartJS 3.0.2. brings error "This method is not implemented: either no adapter can be found or an incomplete integration was ..."
- Chartjs force horizontal bar to start from the lowest value
- ChartJs x-axis label to be in dateTime format issue: DD-MMM-YYYY, but displayed as MMM-YYYY-DD
- Trigger bar/pie graph highlight when hovering over an external element [chart.js / chart js] [AngularJS] [angular-chart.js]
- Data updating but chart isn't
- Legend isnt moving to the right on my doughnut chart created with chart.js
- custom tooltip opacity always 1
- Bars of my chartjs chart has no background color
- vue-chartjs load data from parent component
- How do I import Chart.js Helper Functions in Django?
- HTML Input Form to a Javascript Variable
- How to hide the legend in chart.js in a react project?
- How to export charts.js dynamic chart to PDF in Rails
- ChartJs different data for Tooltips
- Show multiple data in a single data in chart.js
- Why is view width working, but not view height? Super new to coding and chart.js
- Modifying the X-Axis Labels of a Bar chart in Chart.js 2
- labelling the pop up Chart js
- How to use chart.js script to draw multiple pie Charts
- Chart.js - draw horizontal line in Bar Chart (type bar)
- JavaScript ignore commas inside ChartJS data field pulled from csv that data has commas and is enclosed by double quotes
- ChartJS showing incorrect data on the X-Axes
- Use Chartjs with reactjs
- Display the triangle pointStyle of chartjs upside down
- What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js
- Vue grouping items by key then charting similar keys in one chart
- change date on x-axis dynamically
- Programmatically open and close Chart.js tooltip