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.


Related Query

More Query from same tag