The chart legend property is not working at all for my chart using Razor syntax. I'm using the latest version of Telerik.UI.for.AspNet.Core 2023.3.1114.
<chart-legend position="ChartLegendPosition.Top" visible="false" />
I'm trying to hide the legend and it still shows setting visible to false. Also, the property position is not working. No matter what I set it to the legend is on the bottom.
Here is the full code for the chart.
<kendo-chart name="chartDeliveryOrder">
<chart-area background="transparent"></chart-area>
<category-axis>
<category-axis-item>
<labels font="16px 'Nunito Sans'" />
<major-grid-lines visible="false" />
</category-axis-item>
</category-axis>
<series>
<series-item type="ChartSeriesType.Column" category-field="DeliveryOrderNumber"
field="SumTask1Through21Total" name="Tasks 1-21 Total" color="#1C355E" visible-in-legend="false" />
</series>
<value-axis>
<value-axis-item name="" type="numeric" min="0">
<labels format="C" font="16px 'Nunito Sans'" />
<line visible="false" />
<major-grid-lines visible="true" />
</value-axis-item>
</value-axis>
<datasource>
<transport>
<read type="post" url="@Url.Action("DeliveryOrderActualsSummaryChart", "Chart")" data="additionalInfo" />
</transport>
</datasource>
<chart-legend position="ChartLegendPosition.Top" visible="false" />
<chart-title text="Delivery Order Summary" font="28px 'Nunito Sans, Bold'" />
<tooltip visible="true" format="C" font="16px 'Nunito Sans'" />
</kendo-chart>
I have a column chart that has a default font of Arial. Is it possible to change this to the Inter font in one place or does the font have to be set for each individual label (e.g. chart title, axis title, axis label, legend, tooltip, etc.)?
Thanks,
Tim
I am using a Donut chart in my asp.net core application.
issue is that it is not showing the default loader while it fetch for data. on place of chart it looks blank space.
as it is not user friendly, please suggest me if i am missing something.
below is the code
@(
How can I create a custom chart legend. Like this checkbox grid
Hi, I have the following graph:
I would like to keep the values in the left side but without showing the negative sign, because they represent quantities. I tried several things for formatting the ValueAxis in order to perform some sort of Math.abs operation but nothing works. Is it possible what I want to achieve?
Otherwise, I wouldn't mid not showing the value axis if I can show the absolutes quantities using label template. However, I get a lot of undefined values that I don't know how to remove:
function customLabelFormat(value) {
Thanks a lot.
I am looking for a sample of a responsive pie chart. I have tried different suggestions from the forums but none seem to work. Is there a fully worked sample I can reference?
@(Html.Kendo().Chart<Commsights.Data.DataTransferObject.DashbroadDataTransfer>()
.Name("LineChart_Customer_Processed")
.DataSource(dataSource => dataSource
.Read(read => read.Action("Chart_CountData_DaXuLyTolist", "Dashbroad").Data("FilterCompany"))
.Group(group => group.Add(model => model.CompanyName))
.Sort(sort => sort.Add(model => model.DatePublish).Ascending())
)
.Events(events => events.SeriesClick("onSeriesClick"))
.Theme("material")
.Series(series =>
{
series.Line(model => model.ID_Count)
.Name("#= group.value #")
.Style(ChartSeriesStyle.Smooth)
.CategoryField("DatePublish")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= kendo.toString(category, 'MM/dd') # - #= value # (#= series.name # Article)"))
.Width(3).Opacity(0.6)
.ColorField("Color");
})
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels
.Format("{0}")
.Skip(2)
.Step(2)
)
)
.CategoryAxis(axis => axis
.BaseUnit(ChartAxisBaseUnit.Days)
.Labels(labels => labels
.DateFormats(formats => formats.Months("MM/dd"))
.Rotation(-45)
)
)
.HtmlAttributes(new { style = "width: 100%; height: 400px;" })
)
@(Html.Kendo().Chart<Commsights.Data.DataTransferObject.DashbroadDataTransfer>()
.Name("LineChart_Customer_Processed")
.DataSource(dataSource => dataSource
.Read(read => read.Action("Chart_CountData_DaXuLyTolist", "Dashbroad").Data("FilterCompany"))
.Group(group => group.Add(model => model.CompanyName))
.Sort(sort => sort.Add(model => model.DatePublish).Ascending())
)
.Events(events => events.SeriesClick("onSeriesClick"))
.Theme("material")
.Series(series =>
{
series.Line(model => model.ID_Count)
.Name("#= group.value #")
.Style(ChartSeriesStyle.Smooth)
.CategoryField("DatePublish")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= kendo.toString(category, 'MM/dd') # - #= value # (#= series.name # Article)"))
.Width(3).Opacity(0.6)
.ColorField("Color");
})
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels
.Format("{0}")
.Skip(2)
.Step(2)
)
)
.CategoryAxis(axis => axis
.BaseUnit(ChartAxisBaseUnit.Days)
.Labels(labels => labels
.DateFormats(formats => formats.Months("MM/dd"))
.Rotation(-45)
)
)
.HtmlAttributes(new { style = "width: 100%; height: 400px;" })
)
I would like to create the following type of chart:
I have set the BaseUnit to weeks but the label prints as 10/31, 11/7, 11/14 etc
@(Html.Kendo().Chart<FlightLog.Models.Charts.HoursByWeek>()
.Name("chart")
.Theme("bootstrap")
.Title("Monthly Hours")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.DataSource(ds => ds
.Read(r => r.Url(Url.Page("./DashBoard", "HoursPerWeek")).Type(HttpVerbs.Post))
)
.Series(series =>
{
series.Column(model => model.Hours).CategoryField("Date");
})
.CategoryAxis(axis => axis.Date()
.Labels(labels => labels.Rotation(-45))
.Labels(labels => labels.DateFormats(dateFormat => dateFormat.Months("MMM")))
.BaseUnit(ChartAxisBaseUnit.Weeks)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
)