score:0
in chart.js, there is very little legend configuration that can be done. you have basically mentioned all of them in your question. the reason this is so is because the default legend is rendered directly in the canvas object and its hard to parameterize this because the canvas api is not simple.
despite this, the chart.js guys realized that we would want more flexibility and they have provided a mechanism to create/style your legend outside the scope of the chart. you can use the legendcallback
option to create a function that returns html/css for your legend and then call the .generatelegend()
prorotype method to render it.
using this approach you can then place your legend anywhere on your html page and style it however you see fit with plain old html/css.
here is an example that shows how to do what i am describing. i'm not that great with css so i'll leave it to you to change the boxes to lines or whatever it is you are wanting.
one thing to note is that using an external legend breaks the ability for the legend to interact with the chart. you will have to build this in yourself. it can be a little complex depending on what you want to do, but nothing is impossible.
here is another example of an external custom legend that shows a bit of chart interaction. here we are highlighting the pie chart region on legend item mouseover. refer to this other question (asked by you actually :d) to see how to manipulate the dataset toggling.
you should be able to combine all these examples to build the custom external legend of your dreams! let me know if you have specific questions.
Source: stackoverflow.com
Related Query
- Chart Js update legend boxes of graph with graph line style
- how to change point style legend to diamond in chart js
- Chart.js - Increase spacing between legend and chart
- Pie Chart Legend - Chart.js
- Chartjs Bar Chart Legend
- chart js how to fill legend box with colour
- Change Chartjs Legend Icon Style
- ChartJS bar chart with legend which corresponds to each bar
- Chart.js HTML custom legend issues with doughnut chart
- Chart js: how can I align the legend and the title
- Chart Js, Style some ticks on the axis differently
- 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
- Chart.JS - Polar area - Legend hover style and margin
- Using Chart.js - Creating Legend for Doughnut Chart
- Removing ChartJS 2 border and shadow from point style legend
- Angular chart how to show the legend data value by default along with legend name
- Display point style on legend in chart.js
- Chart.js: Pie chart legend "onclick" gets overwritten by "options.onclick" if both are present
- Chart JS Legend Styling
- Chart.js chart onclick disables legend onclick
- chartjs Adding percentages to Pie Chart Legend
- ChartJS horizontal chart display legend on each bar
- Css style not working well when resizing chart height in angular application
- React chartjs-2 - Increase spacing between legend and chart
- How can I style scale numbers in a Polar Area chart (chart.js)
- change legend item style when dataset is hidden
- how to add percentage value to legend field in pie chart using chart.js
- how to add legend in pie chart
More Query from same tag
- Can Chart.js Horizontal bar work with time series data?
- How to draw a linear regression line in Chart.js
- How Can I Change the Y-axis labels to be shown as strings other than number in Chart.js?
- "Cannot read property 'xyz' of undefined": How to use map or foreach on numeric json?
- how to pass function variable from one file to another in react
- ChartJS: two axes in horizontalBar chart
- Second yAxes values not charting correctly with Chart.js
- How to use php variables in a chart js chart
- OffsetWidth / offsetHeight is zero when template loaded by ngRoute
- How to add links to chart.js (Doughnut Charts)?
- ChartJS - Y Axis line not drawing
- How to order tooltip values from the biggest to the smallest
- Update chart axis labels after hover - chart.js
- Chart.js not height responsive
- how to populate data in chart.js
- ng2Charts/chart.js changing chart type for one is impacting many charts
- In chart.js , change color of chart by clicking button
- Angular: How to change color of chartjs?
- How to do automatic pan with Chart.js
- Get the data from node.js for Chart.js
- Chart.js styling questions
- ChartJs DrawBorder() Configuration not working
- Synchronous XMLHttpRequest when loading charts.js in to a div
- How can I add user inputted values to my chart.js line graph?
- Convert date label on Y-axis Line Chart to specific date format
- Can't bind to 'chartType' since it isn't a known property of 'canvas' with angular12
- Chart.js - Creating a single bar chart with states
- How to pass data in Laravel with Chart.js
- Chartjs line graph goes over panel
- How to display data by current month and display no data message if data not exists