score:1
easiest way is to provide your data with multiple sets :
data: {
labels: ['total votes']
, datasets: [{
label: 'blue'
, backgroundcolor: ['#2c79c5']
, data: ['12']
},{
label: 'green'
, backgroundcolor: ['#7fa830']
, data: ['2']
},
...
]
}
but you can generate a custom labels using generatelabels
- http://www.chartjs.org/docs/#chart-configuration-legend-configuration
or even customise the whole legend, including formatting, with legendcallback
- http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration
score:0
this solution uses chart.js version 3. you can pre-process your data using the plugin core api. the api offers different hooks that may be used for executing custom code.
i use the beforeinit
hook to create individual datasets for each defined label/value pair. note that the data
of these new datasets are defined in point format (for instance [{ x: 1, y: 12 }]
):
beforeinit: chart => {
let dataset = chart.config.data.datasets[0];
chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
label: l,
data: [{ x: i + 1, y: dataset.data[i] }],
backgroundcolor: dataset.backgroundcolor[i],
categorypercentage: 1
}));
chart.config.data.labels = undefined;
}
further you need to define a second x-axis that will contain the labels.
x1: {
offset: true,
gridlines: {
display: false
}
}
the labels
on x1
need to be collected and defined programmatically each time the hidden
state of a dataset
changes. this can be done in the beforelayout
hook.
beforelayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getdatasetmeta(i).hidden).map(ds => ds.label)
please take a look at below runnable code and see how it works.
new chart('chart', {
type: 'bar',
plugins: [{
beforeinit: chart => {
let dataset = chart.config.data.datasets[0];
chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
label: l,
data: [{ x: i + 1, y: dataset.data[i] }],
backgroundcolor: dataset.backgroundcolor[i],
categorypercentage: 1
}));
chart.config.data.labels = undefined;
},
beforelayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getdatasetmeta(i).hidden).map(ds => ds.label)
}],
data: {
labels: ['blue', 'green', 'yellow', 'red', 'purple', 'orange'],
datasets: [{
data: ['12', '2', '5', '0', '9', '1'],
backgroundcolor: ['#2c79c5', '#7fa830', '#fff200', '#ed4d40', '#800080', '#ec802f']
}]
},
options: {
interaction: {
intersect: true,
mode: 'nearest'
},
plugins: {
legend: {
position: 'right'
},
tooltip: {
callbacks: {
title: () => undefined
}
}
},
scales: {
y: {
beginatzero: true
},
x: {
display: false
},
x1: {
offset: true,
gridlines: {
display: false
}
}
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.min.js"></script>
<canvas id="chart" height="120"></canvas>
score:2
in one of the most recent releases of chart.js 2.1.x, they added back this functionality. so go get the latest release first. then insert the code below.
it is located under the options and legend. here is how you use it:
options: {
legend: {
position: 'right'
}
}
Source: stackoverflow.com
Related Query
- How to show bar labels in legend in Chart.js 2.1.6?
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- How to show the chartjs bar chart data values labels as text?
- how can i show labels and value in both on bar chart
- How to show bar chart labels clearly using ChartJS?
- Chart.js how to show cursor pointer for labels & legends in line chart
- PrimeNg bar chart how to show a label for the y-axis
- 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?
- Angular chart how to show the legend data value by default along with legend name
- How to show gradient vertically on chart js grouped bar chart?
- How to show different product name for every bar in chart js
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- How to show labels beside the bar in Char js 2?
- ChartJS Pie Chart How default just show 2 legend datas
- How to add labels on top of the chart bar with Chart.js 2
- Chart.js how to display multiple labels on multi bar stacked chart
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- Char.js - How to show labels by default in pie chart
- how to write labels along with data on top and bottom of each stack in bar chart
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- How remove duplicates xAxis labels and show all values on chart
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- Show the latest labels in a bar chart with React.js using react-chartjs
- how to show X and Y labels on points in Chart js 2 Line Chart
- How to make labels on both side from horizontal bar chart js
- how to show data value on bar chart body rather than using tooltip?
- how to show bar chart for every product
- How to add data labels in each bar in stacked bar chart in chart.js?
More Query from same tag
- Chart.js label value
- Display maximum value of an axis
- how to create a bar chart with php data variables
- Chart.js Radar Labels Coordinates
- chart js: when all the values passed to data are zeros, nothing is showing
- Why is chart.js canvas not respecting the padding of the container element?
- Chart.js margins
- how to pass function variable from one file to another in react
- Displaying Charts in C# using ChartJS
- Chartjs x axis scaling
- Django show Graphs with ChartJS
- Returning fetched JSON correctly but can't get it into Chart.JS
- Changing fontFamily on ChartJS bar chart
- null values for instead of date causes the browser to crash while using chart js
- Chart.js number Y-AXIS label format for many decimal places
- Chart.js Bar Chart - how to chart bars from 0
- Chart JS - Use time for xAxes
- How to limit number of displayed points in chart.js?
- Can't create separate charts using chart.js
- chart js - Apply different color for each x-axes label
- How to get Data from API to display chart using chartjs in Vuejs
- Display JSON data in react-chartjs-2
- Chart.js time scale not showing data
- Render chartjs and export image to data not in the DOM
- how to change color of bar if its goes above avg score in mixed graph chart.js
- chartjs stack bar graph color not working
- Mobile page loading in "zoomed" state
- How do I make many ChartJS charts on the same page to have the same height and also even column width?
- Add images inside bar chart in chart.js
- how to format date string for x axis labels in chartjs?