score:2
you can use the plugin core api that offers a range of hooks that may be used for performing custom code. to draw the scale labels on top of the different yaxes
in your code sample, the afterdraw
hook could be defined as follows. it uses canvasrenderingcontext2d.filltext()
to draw text directly on the canvas
.
plugins:[{
afterdraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
ctx.font = "bold 14px arial";
ctx.fillstyle = "gray";
var y = 50;
ctx.textalign = 'left';
ctx.filltext('co2', 5, y);
ctx.filltext('°c', 46, y);
ctx.textalign = 'right';
ctx.filltext('%', chart.chart.width - 10, y);
ctx.restore();
}
}],
please have a look at your amended jsfiddle
score:0
https://github.com/chartjs/chart.js/issues/3706
it's still not supported,but there is a way to workaround.
title: { display: true, text: ['realtile','leftscalelabel...............................
many space....................................................... rightscalelabel'] },
Source: stackoverflow.com
Related Query
- Chartjs scaleLabel position
- ChartJs custom tooltip position
- Chartjs v2 xAxes label overlap with scaleLabel
- Chartjs 2.7.3: Set Y data at the correct X position axis
- Map event position to y axis value in chartjs line chart
- How to customize Title position with ChartJS
- ChartJS tooltip position / placement
- How to add ChartJS code in Html2Pdf to view image
- ChartJS xAxis label position
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- Chartjs tooltip anchor point position on bar charts
- How to position yAxes labels in chartJS
- ChartJS x axis title not visible when axis position is centered
- I can't change the legend position in Laravel Charts & ChartJS
- ChartJs pie legend position
- ChartJS have xAxes labels match data source
- How to change position from absolute to relative in charts in ChartJS
- Updating Chartjs to 2.5 with custom code
- what is wrong with my code ? java script chart position
- Calling data from outside of Chartjs code
- VueJS + Chartjs - Chart only renders after code change
- ChartJS - line graph, position tooltip
- ChartJS 2.0 differences in code help needed
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- ChartJS (Radar) - Set base tick position for "0" value
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- Chartjs labels position
- 'require is not defined' error when attempting to use chartjs in javascript code
More Query from same tag
- chart.js chart distorted with fixed width
- Why is my dependency injection not working in Angular?
- How to load chart data to an appended canvas
- Editing Chart.js legend template
- polarArea Chart.js starting from zero
- Label not showing in Chart.js with Grails
- Parsing webserver JSON Values to data property
- Chart js options not changing chart
- Partitioning radar graph in chart.js by sector
- is there a way to change the dispaly of a date
- chart data on 24hr X axis using recharts, chart.js, I don't mind what
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- Am I using chart.update() correctly when trying to update the chart?
- Chart js. How to align text by the center of the tooltip?
- chart js : how to display title or lable?
- How to change the z order of a chartjs polar chart
- How to render data using chartjs in expressJS
- Chartjs Add-Ons
- Eror: chart.min.js:13 Uncaught (in promise) Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused
- How to add a vertical line on Chart.js when hover a point?
- vue js bar-chart gradient color not showing
- How to display large amount of information properly without cramping too much in Chart.js
- How to manipulate data in react-chartjs-2
- Chart tooltip should show the consolidated information of a single bar in double bar chart
- Is There any way to show image on top of the stacked bar, Am getting image on every color Instead of that i need only on top of each bar
- chartjs-plugin-annotations not displayed in primeNG chart
- Chart.js how to resend animation command to a chart?
- chart.js substitute tooltipItems
- How do I force Chart.js axes min and max with react-chartjs-2?
- Resize the width and height of the ng2-charts