Kendo Chart Legend:Label at Left, Color at Right

How can I set the legend to the top-right corner in a KendoChart?

You can do something like this

var char = $('#chart').data('kendoChart');    
chart.options.legend.offsetX = $('#chart').width() - 100;
chart.redraw()

This way you dynamically adjust legend based on screen resolution.

Kendo Angular Chart Legend Colors

The colours in the legend correspond to the colours of the series. Setting the colours of each column does not change the series. You need to remove the color settings and set the series instead.

Your template definitions should look something like this:

<kendo-chart [seriesColors]="['#4F81BD', '#C0504D']">
          <kendo-chart-legend  position="top"></kendo-chart-legend>
            <kendo-chart-axis-defaults>
              <kendo-chart-axis-defaults-labels format="c0"></kendo-chart-axis-defaults-labels>
              </kendo-chart-axis-defaults>
            <kendo-chart-tooltip format="{0:C}"></kendo-chart-tooltip>
                <kendo-chart-series>
                    <kendo-chart-series-item
                        *ngFor="let item of detailSeries"
                        [data]="item.items" [name]="item.value"
                        field="value" categoryField="service"
                        type="column">
                    </kendo-chart-series-item>
               </kendo-chart-series>

      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item>
              <kendo-chart-category-axis-item-labels [rotation]="-45"></kendo-chart-category-axis-item-labels>
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
</kendo-chart>

kendo chart series legend in top on two lines

Set the legend orientation to vertical and then set the height as needed:

  legend: {
    position: "top",
    orientation: "vertical",
    height: 50    
  },

Legend Customization

The easiest way is to manually select this element in js and set your own transformation matrix:

$('#chart > svg:nth-child(1) > g:nth-child(2) > g:nth-child(5) > g:nth-child(1) > g:nth-child(3)')
  .attr('transform', 'matrix(1,0,0,1,439,100.5)');

But this is not so good solution, because it is not resistant to changes in Kendo library

EDIT:
You can also try to use legend.item.visual property to setup legend conditionally in function: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.item.visual

How to Disable Custom Legend Kendo Chart

Just add .Legend(false) to your chart.

@(Html.Kendo().Chart(Model)
    .Name("chart")
    .Title(title => title.Align(ChartTextAlignment.Center))
    .Series(series =>
    {
        series.Bar(
            model => model.Deger,
            model => model.Color
        )
        .Labels(labels => labels.Background("transparent").Visible(true));
    })
    .CategoryAxis(axis => axis
        .Categories(model => model.Parameter)
        .MajorGridLines(lines => lines.Visible(true))
            .Line(line => line.Visible(true))
    )
    .ValueAxis(axis => axis.Numeric()
            .MajorGridLines(lines => lines.Visible(true)).Visible(true)
    )
    .ChartArea(chartArea => chartArea.Background("transparent"))
   .Tooltip(tooltip => tooltip
       .Visible(true)
       .Template("#= category #: #= value #"))
   .Legend(false)   
)

Alternatively, you can control the legend using JavaScript. Useful if you want to hide certain legend items.

var chart = $("#chart").data("kendoChart");
chart.options.series[0].visibleInLegend = false;
chart.redraw();

Using KendoUI Charts, How do you make the Legend item a hyperlink?

Telerik let me know that this functionality doesn't exist currently in KendoUI (version 2012.1.233) and the feature was noted and it may be in a future versions.

My work around to this problem was to hide the legend. Create my own legend with the hyperlink.

Setting Tool tip label colors on a KendoUI Pie Chart

You were very close to the solution in your question since you can use a function delegate as a template. Kendo tooltip is a div element, so just return an html block with the color you need and the tooltips will be white text on the dark background or a black text on the light background.

To detect if the background is too dark you can use the following thread How to check if hex color is "too black"? agains the series color from the "e" object - e.series.color. I used an abstract function getColorLuma() below to avoid duplication.

seriesColors: config.colors,
tooltip: {
    visible: true,
    template: function (e) {
        var textColor = getColorLuma(e.series.color) < 128 ? 'white' : 'black';
        return '<span style="color:' + textColor + '">' +  
          shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0") +
          '</span>';
    }
}

But be careful with the using ' and # in the text returned from the template function. Javascript will crash. I just used 'white' and 'black' in my code instead of hex colors.

---

Related Topics