score:1
chartjs is a good, but simple charting library.
rather than modifying the source code of chartjs to display your custom legends, it's probably easier for you to create your bar chart in native html canvas using lines and rectangles.
william malone does a good job describing barcharts here:
http://www.williammalone.com/articles/html5-canvas-javascript-bar-graph/
whether you decide to customize chartjs or "roll your own", here is code to draw text rotated vertically and centered at a specified x,y:
var canvas=document.getelementbyid("canvas");
var ctx=canvas.getcontext("2d");
var cw=canvas.width;
var ch=canvas.height;
var x=50;
var y=50;
var width=75;
var height=200;
ctx.strokerect(x,y,width,height);
vertcenteredtext(x+width*1/3,y+height/2,'arrived on-time');
vertcenteredtext(x+width*1/2,y+height/2,'logged-in on-time');
vertcenteredtext(x+width*2/3,y+height/2,'tasks completed on-time');
function vertcenteredtext(x,y,text){
var ta=ctx.textalign;
var tb=ctx.textbaseline;
ctx.translate(x,y);
ctx.rotate(-math.pi/2);
ctx.textalign='center';
ctx.textbaseline='middle';
ctx.filltext(text,0,0);
// clean up by undoing our changes to canvas state
ctx.settransform(1,0,0,1,0,0);
ctx.textalign=ta;
ctx.textbaseline=tb;
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
Source: stackoverflow.com
Related Query
- How to show the chartjs bar chart data values labels as text?
- How to show data values or index labels in ChartJs (Latest Version)
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- chart js tooltip how to control the data that show
- PrimeNg bar chart how to show a label for the y-axis
- Show Data labels on Bar in ChartJS
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Angular chart how to show the legend data value by default along with legend name
- How to commaize the data values provided to a chart in Chart.JS?
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- How to set the chartjs bar graph scale to the highest value in the result data
- Display Bar chart values in the graph - ChartJS
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- ChartJS - Show values in the center of each bar
- How to set the gap between data items in a chartjs chart
- How to show tooltip value of all data falling on the same axis in chart js?
- How to get the data attribute of the canvas chart created using chartjs
- How to show labels beside the bar in Char js 2?
- how can i show labels and value in both on bar chart
- How to add labels on top of the chart bar with Chart.js 2
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- Chartjs - Stacked bar chart data order causes invisible other values
- how to show bar value on the top of each bar in chartjs
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- How to stop displaying the data values from different data objects on Chart JS 2.x?
- how to write labels along with data on top and bottom of each stack in bar chart
More Query from same tag
- Chartjs extended doughnut with text tooltip issue
- how to pass the value of input to my bar chart
- Chart.js grid lines not hiding
- reveal.js with plotly.js and chart.js export pdf
- Grouped bar chart with label in Chart.js
- How do I import a csv into chart.js?
- Why am I getting "plot.new has not been called yet" calling legend() after chartJSRadar()
- Bar Color In Chart JS
- How do I filter & update dates using react-chartjs-2
- Chartjs - Line between two dots on the Y axis
- Chart js Bar Time Chart
- How to change bar width individually in chartjs?
- Show the latest labels in a bar chart with React.js using react-chartjs
- Gradient effect with Chart.js and Angular
- Multiple Graphs on one page
- Create Chart.js pie chart data from PHP
- Text in center of chartJS lead to infiniteloop
- Chart.js Multiple charts with one common legend
- chart does not change the values when the variable changes the value
- Cant assign data to ng2 piechart after receiving it in HTTP response
- Add dynamic data in a demo chart.js file of a django template
- How to use canvasjs to draw column chart using text data
- charts disappear if rendered in hidden divs
- How to adjust Chart.js height according to datasets size. Ionic 3
- Use AngularJS $scope var in on-page script
- How to zoom charts in chart.js using angular 7
- Chart.js 2.2.1 - Chart doesn't render correctly before resizing
- Show chart.js animation only when user scroll on the specific DIV
- Chartjs, How to edit data option after creating a chart?
- Realtime chart JS in Java obtaining the data from a sensor ;Chart.js: Failed to create chart: can't acquire context from the given item