score:0
the plugin core api offers a range of hooks that may be used for performing custom code. you can use the afterdraw
hook to draw images instead of tick labels directly on the canvas using canvasrenderingcontext2d
.
you'll also have to instruct chart.js not to display the default tick labels. this can be done through the following definition inside the chart options.
scales: {
xaxes: [{
ticks: {
display: false
}
}],
further you need to define some padding at the bottom and right of the chart, otherwise you'll see only part of the images.
layout: {
padding: {
bottom: 30,
right: 15
}
},
please have a look at the runnable code snippet below.
const labels = ['2020-02-06', '2020-02-07', '2020-02-08', '2020-02-09'];
const images = ['https://i.stack.imgur.com/2rav2.png', 'https://i.stack.imgur.com/tq5da.png', 'https://i.stack.imgur.com/3krtw.png', 'https://i.stack.imgur.com/ilyvi.png'];
const values = [48, 56, 33, 44];
new chart(document.getelementbyid("mychart"), {
type: "line",
plugins: [{
afterdraw: chart => {
var ctx = chart.chart.ctx;
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
xaxis.ticks.foreach((value, index) => {
var x = xaxis.getpixelfortick(index);
var image = new image();
image.src = images[index],
ctx.drawimage(image, x - 12, yaxis.bottom + 10);
});
}
}],
data: {
labels: labels,
datasets: [{
label: 'my dataset',
data: values,
fill: false,
backgroundcolor: 'green',
bordercolor: 'green'
}]
},
options: {
responsive: true,
layout: {
padding: {
bottom: 30,
right: 15
}
},
scales: {
yaxes: [{
ticks: {
beginatzero: true,
stepsize: 20
}
}],
xaxes: [{
type: 'time',
time: {
unit: 'day',
tooltipformat: 'mmm dd'
},
ticks: {
display: false
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.bundle.min.js"></script>
<canvas id="mychart" height="90"></canvas>
Source: stackoverflow.com
Related Query
- How to change line chart data label to icon or image in chart.js
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- Chart js - Line chart - How to hide the data label on the line?
- Chart Js Change Label orientation on x-Axis for Line Charts
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- ChartJs line chart - display permanent icon above some data points with text on hover
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to change line segment color based on label value in chart.js?
- How can I change the label name when you hover your data in Chart.js?
- How to change the chart line or area colors according to the user need?
- How to change background color of labels in line chart from chart.js?
- How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels
- How to destroy chart object in order to change chart data dynamically (Chart.js)?
- How to give break line in data label
- How to get line x value from Label chart js
- Charts.js line chart, how to hide y-axis start and end label if data is same
- How to add data dynamically to primevue Line chart from vuejs3?
- How to change line color based on data - chartist or chart.js
- How to dynamically update data of line chart used with chart Js?
- How do I destroy/update Chart Data in this chart.js code example?
- Show label for every data point in line chart
- How to bind data from Controler to chartjs line chart to create it as dynamic?
- How to change React line chart tooltip title font family in chart.js
- 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?
- How to change chart js data on button click
- How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?
- chart.js - how to draw and manage line when only one label present in chart js Linechart
- How to change label color of ng2 chart in angular
- Chart.js - How to set a line chart dataset as disabled on load
More Query from same tag
- Change color according to data in pie chart.js
- Trying to have Doughnut chart with dql result chartjs
- change legend item style when dataset is hidden
- How to send data from struts2 to a javascript function to draw a chart
- Chartjs gradient background color based on min and max values
- My ChartJS dates don't show up correctly from coinranking API
- Chart.js - Make x-axis grouped by day
- Loading ViewBag data into a chart.js multichart
- Chartjs Add-Ons
- Horizontal xAxis labels in Chart.js
- How to add datas to chart js from my Array<number>? In Ionic3
- How do you insert a linear horizontal line in chart.js
- Chart.js - remove zeros and step numbers in Y axis
- Bar chart (chart.js) with only 2 points does not show one of the bars
- How to use an Addon with ChartJS on Angular 4
- Using ChartJs with MVC 5 Razor
- Horizontal bar chart in chart.js
- Use data from SQL database in .js file with PHP
- Chart JS Line Graph multitooltipkey background color issue
- ChartJS large data range
- how to change background in chartjs and remove background lines?
- How to add label square to Bar Chart using Chart.js
- How to assign different background colors to chart.js pie chart data set?
- Control Scaling of Canvas When dragged out of chart limit
- How would i print out HTML Chart.Js Legends using the global parameters
- Chart.js update function (chart,labels,data) will not update the chart
- How to retain spacing between bars for two different bar charts in Chart.js 2
- Stacked Bar Chart With Line Chart In Charts.js
- ChartJS plot not showing as it should be when toggling a grouped legend element
- Need some Help Regarding Chart.js