score:5
with 2.1.x, you can write a plugin to do this
preview
script
chart.pluginservice.register({
afterdraw: function (chart) {
if (chart.config.options.elements.center) {
var helpers = chart.helpers;
var centerx = (chart.chartarea.left + chart.chartarea.right) / 2;
var centery = (chart.chartarea.top + chart.chartarea.bottom) / 2;
var ctx = chart.chart.ctx;
ctx.save();
var fontsize = helpers.getvalueordefault(chart.config.options.elements.center.fontsize, chart.defaults.global.defaultfontsize);
var fontstyle = helpers.getvalueordefault(chart.config.options.elements.center.fontstyle, chart.defaults.global.defaultfontstyle);
var fontfamily = helpers.getvalueordefault(chart.config.options.elements.center.fontfamily, chart.defaults.global.defaultfontfamily);
var font = helpers.fontstring(fontsize, fontstyle, fontfamily);
ctx.font = font;
ctx.fillstyle = helpers.getvalueordefault(chart.config.options.elements.center.fontcolor, chart.defaults.global.defaultfontcolor);
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
ctx.filltext(chart.config.options.elements.center.text, centerx, centery);
ctx.restore();
}
},
})
and then
...
options: {
elements: {
center: {
text: 'hello',
fontcolor: '#000',
fontfamily: "'helvetica neue', 'helvetica', 'arial', sans-serif",
fontsize: 24,
fontstyle: 'normal'
}
}
}
};
fiddle - http://jsfiddle.net/a1r1kszb/
Source: stackoverflow.com
Related Query
- getting additional value fields from data source for dx.chartjs doughnut chart
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chart JS - Use time for xAxes
- show label in tooltip but not in x axis for chartjs line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- Chart JS - set start of week for x axis time series
- Problem for display a chart with Chart.js and Angular
- Chart js. How to change font styles for "labels" array?
- Different color for each column in angular-chartjs bar chart
- Border radius for the bar chart in ChartJS
- Chart JS show multiple data points for the same label
- Chart.js tooltip hover customization for mixed chart
- Can I specify a different font size for each row of text in Chart Title?
- Chartjs - data format for bar chart with multi-level x-axes
- Creating a horizontal bar chart extension on Chart.js
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart js different background for y axis
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- How do I obtain a Chart instance for Chart.js
- Change labels colors for radar chart js
- how to set chart.js grid color for line chart
- Grouping the object by key for Chartjs bar chart
- PrimeNg bar chart how to show a label for the y-axis
- chart js - Apply different color for each x-axes label
- X-axis multiple colored label for bar chart using chart.js
More Query from same tag
- How to show Charts.js lables
- Is this graph possible using chart.js?
- Gradient effect with Chart.js and Angular
- JavaScript critical error...Syntax Error (MVC 5) when passing array to Charts.js
- chart.js API returns bad x and y points
- Dynamic dataset from MySQL query with Chart.js
- how to disable last/max value shown on x axis in chart js?
- Using unknown number of datasets in Chart.js
- how to get React chartjs to resize back down with window
- Multiple charts in one page with chart.js
- Can I bind an onclick event and edit a point in chartjs
- How to add text to chart.js data?
- Javascript OnChange to update data
- Legend color not working with randomly generated background colors in chartjs pie chart
- Change color on labels in chart.js
- React Chartjs 2 display axes above datasets backgroundColor
- How to set the pointDot option on combo stacked bar-line chart
- How to ensure that a Chart.js line chart uses all space available on the y-axis?
- Chart.js: chart not displayed from modules despite no errors - JS
- Loading an external JSON into ChartJs
- Merge Jquery Knob Functionality in Chart Js
- Chart not rendering on ChartJS
- Space between ticks marks and X axis with chart.js
- Use chartjs with rails
- Add Space Between Bars in Angularjs Chartjs
- Charts js. How to pass datasets use a select dropdown by angular instead jquery
- show name on yaxis in chart.js
- Angular and ChartJS to create bar chart
- React-chartjs-2 update height dynamically
- How to include adapters and plugins with ChartJS