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 render in hidden Bootsrap tab
- Retrieve value returned from a function in Angular
- Chart.js I want to fix my xAxis to my yAxis position 0
- Issues with ng2-charts
- Chart JS not reloading in Partial View
- JavaScript - Convert dates and times (Chart.js and Moment.js)
- ChartJS : How to display two "y axis" scales on a chart
- Chart.js show x-axis data from right to left
- How to change cursor style to pointer on hovering over points of the chart?
- How to render Chart.js 2.x tooltips on top of everything
- Pausing Javascript animation on minimize
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- How to create a histogram in charts.js with MYSQL data
- Loading json file to chartjs
- ChartJS set default axis
- chartjs - show hide specific dataset with click on element outside graph
- Stacked Bar chart fixed width bar chart issue - Chartjs
- Chart.js line chart does not render data lines on iOS
- How to update a variable after button click
- Array value is not being passed to the plugin
- ChartJS dynamic line chart ghosting back to old data when hovered on
- Chart.js: Display Custom Tooltips, always visible on stacked bar-chart
- Extend chart.js horizontal bar graph to include a vertical line
- charts.js global options gridLines
- ChartJS showing wrong dataset following visibility property toggle
- Chart.js what is the new syntax for extending?
- I want to multiply chart data according as array length
- I need to increase data in a bar chart by one with a button click
- how to draw line graph with line animation from left to right using chartjs?
- chart js -data on chart in rotated form