score:1
If your aim is to take the values from an array and have them appear along the bottom of the bar chart so that each array value is the label for a bar then you need to set the data.labels
value, not the data.datasets.label
value.
For example, this basic chart is taken from the Chart.js documentation for bar chart data structure and shows how to use an array of month names to label the bars. Notice that the label bars go into the data.labels
node.
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
If you programmatically create an array with one label for each point of data then it might look something like this:
var chartConfig = {};
for (score = 0; score < maxScore; ++score) {
chartConfig.scoreLabels[score] = score;
chartConfig.scoreData[score] = howManyAchievedScore(score);
}
var data = {
labels: chartConfig.scoreLabels,
datasets: [
{
label: "Number of players who achieved score",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: chartConfig.scoreData,
}
]
};
You don't have to create the labels and data values inside a single object, but it's usually tidier if you can group your chart configuration data into one object so that you can pass it from one function to another with one parameter.
The data.datasets.label
value does something different, providing text which appears in the chart legend and in tooltips which appear when you hover over a bar.
Source: stackoverflow.com
Related Query
- How do I get a different label for each bar in a bar chart in ChartJS?
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- Different color for each bar in a bar chart; ChartJS
- Different color for each column in angular-chartjs bar chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to set a full length background color for each bar in chartjs bar
- PrimeNg bar chart how to show a label for the y-axis
- chart js - Apply different color for each x-axes label
- How to get onClick Event for a Label in ChartJS and React?
- How to show different product name for every bar in chart js
- How to use set the color for each bar in a bar chart using chartjs?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Set fixed label size for grouped bar chart in angular Chartjs
- How to set X coordinate for each bar with react chart js 2?
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- How to remove a label in top of bar in chartjs chart
- 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 add additional label in the middle of each bar using ChartJS
- How can I set different colours for each bar in angular-chart.js v1.0.0?
- How to custom index label on each bar chart using chartjs?
- How Can I Get An Instance of a ChartJS Bar Chart Using Angular
- subcategories for each bar in multibar chart using chartjs
- Different color for each bar in a bar graph in ChartJS and VueJS
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- How to set different colors in each stacked bar chart cell?
- how to create bar chart with group and sam color for each group using chart.js?
- Chartjs random colors for each part of pie chart with data dynamically from database
- how to plot multiple time series in chartjs where each time series has different times
- chartjs : how to set custom scale in bar chart
More Query from same tag
- How to hide other section of chartjs on click of lengend
- How to fill my chart (chart.js) with my own data from API
- Hiding spaces with zero values in bar chart with chart.js
- Change line point to triangle in Chart.js
- Chart.js How can I embed additional values to each data point in radar chart
- Javascript object from string
- Why isn't my Angular 4 ChartJS component rendering?
- Histogram like chart with intensity colored columns and per bin opacity to show intensity
- I can't change the legend position in Laravel Charts & ChartJS
- Grouped bar charts, in chart.js
- Drawing chart with Chart.js filled with data gotten per JsonRPC
- ChartsJS Legend not showing in Angular11
- colour sets for Chart.js border colour
- Updating Chartjs to 2.5 with custom code
- Change Angular js charts.js chart type dynamically
- Create a ChartJS with 2 database tables
- onClick event to Hide dataset Chart.js V2
- Chart.js - add data to line chart from clicking pie chart segment
- the graph in the view is not displayed - Chart.js Angularjs
- Vue + chartjs : Nearest point on hover tooltip not working
- chart.js remove on hover effect
- Why my ajax function does not work on yii2
- Change data onclick with ChartJS
- How to share same background color for multiple dataset in a chart?
- Sorting arrays and comparing array values php
- Issue while plotting bar chart with custom x-axis with month and year in chart.js
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- Chart.js Draw a Stacked Bar Chart with Limit Line
- Unable to update state in ReactJS
- Chart JS axes extension