score:0
you need to provide your own legend label configuration by defining legend.labels.generatelabels
inside chart options
.
in the following code sample, generatelabels
creates an array of objects that implement the legend item interface. each object simply takes its properties from the corresponding dataset
but leaves linedash
undefined
.
new chart(document.getelementbyid('mychartaxis'), {
type: 'line',
data: {
labels: ['a', 'b', 'c', 'd'],
datasets: [
{
label: 'warnings',
data: [0, 2, 3, 2],
borderdash: [5],
bordercolor: 'rgb(255, 159, 64)',
backgroundcolor: 'rgba(255, 159, 64, 0.2)',
fill: false
},
{
label: 'errors',
data: [1, 1, 4, 3],
borderdash: [2],
bordercolor: 'rgb(255, 99, 132)',
backgroundcolor: 'rgba(255, 99, 132, 0.2)',
fill: false
}
]
},
options: {
legend: {
labels: {
generatelabels: chart => chart.data.datasets.map((dataset, i) => ({
datasetindex: i,
text: dataset.label,
fillstyle: dataset.backgroundcolor,
strokestyle: dataset.bordercolor
}))
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.js"></script>
<canvas id="mychartaxis" height="90"></canvas>
Source: stackoverflow.com
Related Query
- borderdash options in chart js changes my legend
- Chart.js - Increase spacing between legend and chart
- Pie Chart Legend - Chart.js
- Dynamically update the options of a chart in chartjs using Javascript
- Chartjs Bar Chart Legend
- chart js how to fill legend box with colour
- ChartJS bar chart with legend which corresponds to each bar
- Chart.js HTML custom legend issues with doughnut chart
- Drawing line chart in chart.js placing dots only when value changes
- Chart js: how can I align the legend and the title
- Increase padding between legend and chart with react-chartjs-2
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- Chart.js Radar chart legend label font size doesn't work
- Using Chart.js - Creating Legend for Doughnut Chart
- Angular chart how to show the legend data value by default along with legend name
- Chart.js: Pie chart legend "onclick" gets overwritten by "options.onclick" if both are present
- ChartJS - radar chart options not working
- Chart JS Legend Styling
- Using chart js options with react-chartjs-2 and typescript
- Chart.js xaxis formatter changes the value shown in the chart
- Chart.js changes selected legend filters when using update function
- Chart.js chart onclick disables legend onclick
- chartjs Adding percentages to Pie Chart Legend
- Chart Js update legend boxes of graph with graph line style
- ChartJS horizontal chart display legend on each bar
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Chart js options not changing chart
- React chartjs-2 - Increase spacing between legend and chart
- Chart js background color changes on click
- how to add percentage value to legend field in pie chart using chart.js
More Query from same tag
- How do I hide line outside the min/max (scale area) in chartjs 2.0?
- How to change the color of y axis labels in different color in Chart.js
- chartjs custom y axis values, different text for each one
- Adding Chart.js line chart to Jinja2/Flask html page from JS file
- Chart.js responsive css size
- Javascript OnChange to update data
- react chart js, title is not displayed
- Laravel Chart JS change data with dropdown
- How to customize Title position with ChartJS
- Partitioning radar graph in chart.js by sector
- data representation using charts
- Grouped bar chart with label in Chart.js
- How can I sort month by order?
- Streaming Real-time data with react and chartjs-plugin-streaming paused
- How to keep side bars in Chartjs bar graph from clipping?
- Chart JS V3 Tooltip styling location changed?
- Chart.js Chart does not start at
- ChartDataLabels is globally active for some reason
- Difficult displaying data with linechart in chart.js
- Cannot make my chart to work with data from mongoDB
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Angular 2 chart - change point radius
- how to put yAxisLabel in chartjs
- chart.js - Supplied parameters do not match any signature of call target (angular2)
- How to use HTML in custom tooltip in angular charts?
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- Angular data visualisation using chart.js
- Load ChartJS via VueJS - ChartJS empty and 0px dimension
- ChartJs chart in typescript: Object is possibly undefined in useEffect
- Chart.js with dual axis incorrect starting points (if negative values)