legend: Object

Comments 28

1. is there a way of showing two Legends with only one data set? half of my bars (column chart) are one colour while the other half is a second colour

   • It is not possible to show two legends for the same series. But what you can do is add another series with dataPoints set to empty array like dataPoints:[] and set the second color to this series.

2. Is it possible to set a margin on the legend? I am using a font that has a large line height and the lower part of the ‘g’ character is being cut off.

   • Margin isn’t available for legend. Can you please post a screenshot (better if you can create a jsfiddle) so that I can have a look and figure out a solution.

3. is ti possible to hide the legend?

   • Legend is not shown by default. It is displayed only when “showInLegend” property of dataSeries is set to true.

4. Is it possible to change order of legend, like from bottom to top or top to bottom. At stack column 100, bar and legend is opposite order.

5. Is it possible to add a head title of all the legend?

6. Is there a way to force each element in legend at a new line? Currently they heading in a row.

   • You can do so in two ways.

     1. Move the legend to the left side of chart as shown in the last example.
     2. By setting maxWidth property of legend.

     • I’m using IE8 and canvasjs-1.6.2, because when I’m switching to 1.7.0 IE stops drawing graph lines.
       And so when I’m setting
       legend:{
       verticalAlign: “center”,
       horizontalAlign: “right”,
       maxWidth: 100,
       fontSize : 10
       }
       there is no any effect, legend is still same, in a row.

       • konstantian,

         Can you please create a jsfiddle of the chart so that we can have a look? Without seeing the entire code it would be difficult to figure out the issue.

         • https://jsfiddle.net/miraemor/1zg5cqcz/2/
           Here it is. I’ve truncated data for test purposes, in real this data comes in JSON from local php page.

           I want every item in legend in a nwe row, but can’t achieve that.

         • konstantian,

           You are setting legend option twice because of which second option overrides first option. Please refer to this jsfiddle with the issue fixed.

         • Thank you, that helped a lot.
           But I have one more question: in this piece of code when I’m calling

           var canvas = $(“#chartContainer .canvasjs-chart-canvas”).get(0);
           dataURL = canvas.toDataURL();

           generated image appear withoin graph lines, just graph area itself, with legend, but withiut lines.

         • konstantin,

           Issue is most probably because you are calling canvas.toDataURL() before the animation completes. You can fix the issue by calling canvas.toDataURL() inside setTimeout() with delay for 2 second.

         • SetTimeout really helped, Thank you for your great graph.

7. Is it possible to make the course title and/or the legend text non-breaking text? I’ve been trying to include   but it doesn’t seem to be working. The result is “Legend String” and “Doughnut Title” gets put on my doughnut chart:

   var reviewsData = [
   { y: courses_reviewed, legendText: Legend String}
   ];

   renderMyChart(trackingContainer, trackingData, “Doughnut Title”);

   Here’s a JFIDDLE demonstrating the above: http://jsfiddle.net/gratiafide/n6r5gsqq/2/

   Thanks in advance for your help.

   • Ah I learned how to do it: \xA0 instead of  

     see http://jsfiddle.net/9mbhsmv6/

8. Is there a way to control the size of the marker in the legend?

   • Size of the marker is automatically calculated based on the text size of legend. So you can try setting legend’s text fontSize.

9. is it possible to change the legend shape from colored circles to colored squares?

   • Yes, you can change the legend shape by using legendmarkertype.

10. Is there a way to get this legend space to be smaller?

    http://oi67.tinypic.com/14jatxx.jpg

    my properties are:
    legend: {
    maxHeight: 0
    },

    and

    showInLegend: false

11. Is there a way to disable the entire legend? I am trying to make the entire legend toggle when a button is pressed.

    • Michael,

      There is no direct option to disable the entire legend. It can be workaround as shown in this example

12. If there are too many items in the legend, they are cut off as shown here: https://jsfiddle.net/4wu3mpf1/3/
    This is definitely an edge case. However, this occurs often in my application.

    Maybe it would be possible to introduce an optional scroll bar for the legend.
    To provide this configuration option, a custom scroll bar and scroll behavior is required. I acknowledge that this is not easy to implement as I was not able to find any prototype of scroll bars inside a canvas element.

    Nonetheless, it would be great to have this problem solved. Maybe someone comes up with a better idea than scroll bars. Cutting off the legend labels is, unfortunately, not an option.

    • We are aware of this issue, and might come up with scroll bar for legend in future versions. For now please refer this thread.