score:1
Accepted answer
you can use the plugin core api. it offers different hooks that may be used for executing custom code. in below code snippet, i use the afterdraw
hook to draw a title on the canvas. that way you can draw as many titles as you want, define them of different style each and place them wherever it suits you.
please note that inside chart options
, i also defined some layout padding. this prevents the title from overlapping the chart bars.
layout: {
padding: {
top: 40
}
}
chart.plugins.register({
afterdraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
ctx.font = "18px arial";
ctx.fillstyle = "gray";
ctx.filltext('top title', chart.chart.width / 2, 20);
ctx.restore();
}
});
new chart(document.getelementbyid('mychart'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c', 'd'],
datasets: [{
data: [10, 12, 8, 6],
backgroundcolor: ['red', 'blue', 'green', 'orange']
}]
},
options: {
layout: {
padding: {
top: 40
}
},
title: {
display: true,
text: 'custom chart title',
position: 'bottom',
},
legend: {
display: false
},
scales: {
yaxes: [{
ticks: {
beginatzero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart" height="100"></canvas>
Source: stackoverflow.com
Related Query
- Chart js multiple titles
- how to not repeat code while creating multiple charts in chart js
- Chart.js - Draw bar chart with multiple labels
- Chart JS show multiple data points for the same label
- how to create multiple chart on one component vue
- X-axis multiple colored label for bar chart using chart.js
- Multiple stacked bar chart using ChartJs
- Multiple line labels for chart js
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- Group Chart with multiple layers in ChartJS
- ng2 chart multiple chart update
- Dynamicly update scatter/line chart in Chart.JS with multiple x/y grids
- Multiple bubble chart datasets for chartjs
- Angular-chart / line chart with multiple horizontal lines (margins)
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- Displaying line chart for multiple months using chart.js
- Multiple y-axis in horizontalBar chart js
- Chart.js Radar chart multiple datasets
- ChartJS update chart with multiple datasets
- ChartJs - Round borders on a doughnut chart with multiple datasets
- How to draw multiple color bar in a bar chart using chart.js
- How to display multiple y axis titles on seperate lines and rotated 90 degrees clockwise in chart.js
- how to display multiple sum with chart js and laravel?
- Chart.js -> line chart -> multiple points with the same X
- Chart.js: Bar chart multiple colors
- chart.js-plugin-annotations multiple horizontal lines in one chart
- Chart.js 3.5: linear gradient doesn't apply properly when multiple bars in the same chart
- How to make bar chart cover multiple labels?
- How to show multiple datasets in line chart js
More Query from same tag
- Chart.js after ajax refresh there are two charts in the same container (new and old)
- Chart.js adding tooltip with cashflow
- Vue-Chartjs not rendering graph
- Add \n or line break on chart.js (pie chart) labels
- Real time colored bar chart
- Align data label right. Horizontal bar chart Vue JS
- chart.JS i want to put different color for each Y axis value grid line color
- How to change axis font in PrimeFaces and Chart.js
- Loop datasets into chart.js?
- Angular Chart.js Multiple Canvas
- ChartJS: How to set fixed Y axis max and min
- chart.js remove on hover effect
- Chart.js not drawing on mobile (safari/chrome) fine on desktop
- gap between half doughnut chart and container div
- How to decrease the barthickness in ng2-charts?
- Change background color of all charts beside the one hovered
- Chart.js bumpy line
- load a graph with chart.js and react
- Set Chart Background Image - Chart.js
- Chart JS Tooltip - place it in a fixed location outside the canvas
- How I can change the font-family of labels in the bar chart?
- Chart not displaying from JSON data
- Chart.js bar chart : Grid color and hide label
- Hide label on slice of Doghnut/Pie Chart Angular ng2-charts
- Chart.js glitches and reverts to previous dataset on hover
- ChartJS in React throws 'too may re-renders'
- chart looking strange on phone´s browser using chart.js
- Chart.js Bar chart : display labels
- Chart JS - How to display Label over Slices instead of text on hover
- How can I merge multiple HTTP calls to one entity model in Angular