I have a chart loaded with a data source, and I would like to change the dash type based on the series name. I can't find a property in JavaScript or at the chart level (e.g., DashTypeField)
here is an extract from my code
@(Html.Kendo().Chart<AquascopWeb.pages.ValorisationResultats.Models.EvolPiezometreMultiPointSeriesDataViewModel>()
.Name("chartEvolPiezometreMultiPoint").HtmlAttributes(new { style = "height:" + height + "px;" })
.Title(title => title
.Text("Evolution du type d'observation " + ViewBag.TypeTraite + " - multi-pézomètres ")
.Font("bold 16px 'Arial Unicode MS'")
)
.Legend(legend => legend.Position(ChartLegendPosition.Bottom).Font("11px 'Arial Unicode MS'"))
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Normal)
)
.Series(series =>
{
series.Line(value => value.Data, categoryExpression: category => category.Date).MissingValues(ChartLineMissingValues.Gap).GroupNameTemplate("#= group.value #").Markers(conf=>conf.Visible(false).Size(2)).Style(ChartLineStyle.Normal);
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Line(line => line.Visible(false))
.Labels(label=>label.Visible(false))
)
.CategoryAxis(axis =>
{
axis.Name("label-axis");
axis.Line(line => line.DashType(ChartDashType.Dot));
axis.Categories(model => model.Date);
axis.Type(ChartCategoryAxisType.Category)/*.MajorGridLines(lines => lines.Visible(false))*/;
axis.Justify(true);
axis.Date().BaseUnit(ChartAxisBaseUnit.Fit)
.MaxDateGroups(12).Labels(labels => labels.DateFormats(formats => { formats.Days("dd/MM/yyyy"); formats.Months("MMMM yyyy"); }))
.AutoBaseUnitSteps(unitSteps => unitSteps
.Days(new int[] { 3 }) // Would produce 31 groups => Skip to weeks.
.Weeks(new int[] { }) // Not allowed as no steps are defined => Skip to months.
.Months(new int[] { 1 }) // Results in 2 groups => Chosen.
);
axis.Labels(label =>
{
label.Rotation("auto");
label.Font("11px 'Arial Unicode MS'");
});
}
)
.ValueAxis(axis => axis
.Numeric()
.Title(title=>
{
title.Text(ViewBag.TypeTraite);
title.Font("8px");
})
.Labels(label =>
{
label.Rotation("auto");
})
.AxisCrossingValue(0, int.MinValue)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Shared(true)
.SharedTemplate(
"<div style='display: flex;flex-direction:column;'>" +
"<div style='display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;'>#= kendo.toString(category, 'dd MMMM yyyy')#</div>" +
"<table class='table table-sm'>" +
" <tbody>" +
"# for (var i = 0; i < points.length; i++) { #" +
" <tr>" +
" <td><span style='color:#= points[i].series.color #' class='k-icon k-i-minus minus-grand'></span></td>" +
" <td>#= points[i].series.name #</td>" +
" <td> : </td>" +
" <td><span style='font-size: 12px;font-weight: bold;color:#= points[i].series.color #'>#= points[i].value #</span></td>" +
" </tr>" +
"# } #" +
" </tbody>" +
"</table>" +
"</div>"
)
)
.Pannable(pannable => pannable
.Lock(ChartAxisLock.Y)
)
.Zoomable(zoomable => zoomable
.Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
.Selection(selection => selection.Lock(ChartAxisLock.Y))
)
.DataSource(dataSource => dataSource
.Read(read => read.Action("ChartEvolPiezometreMultiPoint_Read", "GraphEvolPiezometreMultiPoint"))
.Group(g => g.Add(v => v.Name))
.Sort(s => s.Add(v => v.Date))
)
.Events(events=>events.DataBound("chartEvolPiezometreMultiPoint_DataBound"))
)