0
119
ViewsChart.js - make background text responsive
I am using chart.js for visualization.
I am using the library to create the following chart:
function createConfig(legendPosition, colorName) {
return {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'My First Dataset',
data: [-91, -85, -70, -96, 70, -81, -85, -66, 47, 26, -7, -4],
backgroundColor: "",
borderColor: 'rgb(100, 73, 216)',
borderWidth: 1
}]
},
options: {
responsive: true,
legend: {
position: legendPosition,
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
}
};
}
window.onload = function(e) {
var ctx = document.getElementById('chart-legend-bottom').getContext('2d');
var config = createConfig('bottom', 'purple');
let myLineExtend = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
myLineExtend.apply(this, arguments);
this.chart.chart.ctx.textAlign = "center"
this.chart.chart.ctx.font = "40px Roboto black";
this.chart.chart.ctx.fillText("www.google.com", 450, 150)
}
});
new Chart(ctx, config);
};<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<body>
<canvas id="chart-legend-bottom" width="600" height="400"></canvas>
</body>When displaying the above example on mobile the inserted text does not scale with the chart.
Any suggestions how to scale the text with the screen size?
I appreciate your replies!
·
Juan Pablo Isaza
1 answers
Answer question0
You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In your case, you could use the afterDraw hook to draw text at a position computed from the chart.scales.
Please take a look at your amended code and see how it works.
new Chart('chart-legend-bottom', {
type: 'line',
plugins: [{
afterDraw: chart => {
let xAxis = chart.scales['x-axis-0'];
let yAxis = chart.scales['y-axis-0'];
let x = (xAxis.left + xAxis.right) / 2;
let y = yAxis.getPixelForValue(0);
let ctx = chart.chart.ctx;
ctx.save();
ctx.font = '40px Roboto black';
ctx.textAlign = 'center';
ctx.fillText('www.google.com', x, y);
ctx.restore();
}
}],
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'My First Dataset',
data: [-91, -85, -70, -96, 70, -81, -85, -66, 47, 26, -7, -4],
backgroundColor: "",
borderColor: 'rgb(100, 73, 216)',
borderWidth: 1
}]
},
options: {
responsive: true,
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="chart-legend-bottom" width="600" height="400"></canvas>
·
Juan Pablo Isaza
Report
Answer question