How to dynamically change the dashType in a chart?

[supportinformatique]

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>&nbsp;:&nbsp;</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"))
)

[Anton Mironov]

Hello,

Thank you for the code snippet and details provided.

I am not sure which dashTypes are represented in the image, but I guess they should be different. The dashTypes are:

• "dash" - a line consisting of dashes
• "dashDot" - a line consisting of a repeating pattern of dash-dot
• "dot" - a line consisting of dots
• "longDash" - a line consisting of a repeating pattern of long-dash
• "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
• "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
• "solid" - a solid line

The dashTypes should be pointed out in the declaration of the Chart. They could be different as represented in the following dojo example:

• https://dojo.telerik.com/@anton.mironov/oqOHIlIR

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik