score:12
Accepted answer
Try this one :)
Charts.prototype.initBarHorizontal = function () {
var ctxD = $("#barChartHDark"), chartData = {
type: 'horizontalBar',
data: {
labels: ["Today", "Last week", "Last month", "Last Year"],
datasets: [{
label: 'Something1',
data: [7, 59, 68, 26],
backgroundColor: this.colors[0],
hoverBackgroundColor: this.convertHex(this.colors[0], 70),
},
{
label: 'Something2',
data: [, 23, 44, 30],
backgroundColor: this.colors[1],
hoverBackgroundColor: this.convertHex(this.colors[1], 70),
},
{
label: 'Something3',
data: [, 3, -7, 1],
backgroundColor: this.colors[2],
hoverBackgroundColor: this.convertHex(this.colors[2], 70),
}]
},
options: {
barThickness: 1,
scales: {
xAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor,
min: 0,
max: 175,
stepSize: 25
}
}]
},
labels: ['Current data','Vs last week/month/year','Change'],
name: ['Current data','Vs last week/month/year','Change'],
legend: {
display: true,
legendText : ['Current','Vs last week/month/year','% Change']
},
}
}, myDarkRadarChart = new Chart(ctxD, chartData), myLightRadarChart = new Chart(ctxL, chartData);
};
for each dataset you have to add:
label: 'Something'
score:1
You can try define the labels from the as defined in the documentation. https://www.chartjs.org/docs/latest/configuration/legend.html#configuration-options . I believe it's labels (as array of legend label items) and with
{text: "something"}
as a pattern (see https://www.chartjs.org/docs/latest/configuration/legend.html#legend-item-interface).
Source: stackoverflow.com
Related Query
- Chart.js legend text showing undefined
- Chart Js Line chart with fill on click with full information of its legend text
- Custom Legend ChartJS not showing the text decoration: line through
- ChartJS - How to add Text between Pie Chart and Legend
- ChartJS: Custom legend not showing Labels for Multi-Pie chart
- In ng 2 chart during the load an undefined legend gets created automatically ,Is there any way to remove it?
- How to add text inside the doughnut chart using Chart.js?
- Chartjs Bar Chart showing old data when hovering
- Chart.js - Increase spacing between legend and chart
- Pie Chart Legend - Chart.js
- Chart Js Cannot read property 'length' of undefined
- Chart Js change text label orientation on Ox axis
- chartjs datalabels change font and color of text displaying inside pie chart
- Chartjs Bar Chart Legend
- chart js how to fill legend box with colour
- How to add text in centre of the doughnut chart using Chart.js?
- How to wrap legend text in Chartjs?
- Chart.js ng2-charts colors in pie chart not showing
- Chart.JS Mixed Chart - Bars Not Showing
- ChartJS bar chart with legend which corresponds to each bar
- Chart js. How to align text by the center of the tooltip?
- Can I specify a different font size for each row of text in Chart Title?
- Line chart is showing under bar in combochart in chartjs
- Chart.js HTML custom legend issues with doughnut chart
- Showing Percentage and Total In stacked Bar Chart of chart.js
- ChartJs line chart - display permanent icon above some data points with text on hover
- Series Details Not Showing in Angular Chart with Charts.js
- How to remove rectangle box next to the legend text in Chart.js
- Charts.js tooltip overlapping text on chart
- Chart js: how can I align the legend and the title
More Query from same tag
- bootstrap ui+angular chart: is it possible to disable graph's auto refreshing?
- Chartjs bar-chart does not render when values are equal
- Chartjs Nested Doughnut Layers With Different Thickness
- Handle X-axis label position in chart js
- Charts.js doughnut
- Chart JS Error : Uncaught TypeError: Cannot read property 'top' of undefined
- Chart.js HiLo chart example
- Deleting and recreating an element with React
- How to place extra text on canvas (not using HTML) beside chart?
- The engine “node” is incompatible with this module when installing React-chartjs-2 Chart.js,
- Modifying the X-Axis Labels of a Scatterplot in Chart.js 2
- Chart.js: Line displayed thinner than defined
- Complex Javascript variables containing the values of other assigned variables?
- Drawing linear chart without gaps in Chart.js
- How to keep rounded bar corners when data is filtered chartJs?
- Chart.js generate chart with foreach mvc
- Keep the Y axis fixed when the chart scrolls horizontally, regardless of DPI settings?
- live charts using chart.js
- How to parse a Chart using data from a nested object in ChartJS
- How do you output the correct value for Chart.js Radar graph on label?
- Gradient colour in backgroundColor JS
- Dynamic dataset from MySQL query with Chart.js
- How to align ChartJS bars to the left?
- Chart.js how to set start and end values to plot
- Consuming an API and displaying items in chart/Angular
- chart js with angular2 loading dynamic data only after zoomin
- Change position of Chart.js tick labels
- How to use segment property to color line / border color based on value in chart js?
- is there anything wrong with this If Condition in Javascript code?
- Single point on multiple line linear graph with Chart.js