Crosshair with only vertical line

[Megan]

I have a categorical line chart with multiple series, and I want the crosshair to only display a vertical line and work like a shared tooltip, with markers for all the lines showing up on the crosshair.

 

I found a picture online that matches what I want exactly (except for having no tooltip/text), and it belongs to Kendo UI for Angular, but the search result just takes me to the main page, so I have no idea how to accomplish this... I've attached the image I found.

[Dimiter Topalov]

Hi Megan,

To provide crosshair for one axis only, the developer can use the respective axis configuration object or nested configuration element (as Kendo Charts provide two configuration concepts):

https://www.telerik.com/kendo-angular-ui/components/charts/chart/configuration/

One possible approach is to use theCategoryAxisCrosshair component and either provide input option for the "tooltip" settings, or nest another component - the CategoryAxisCrosshairTooltip component:

<kendo-chart-category-axis>
            <kendo-chart-category-axis-item
                [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
                [title]="{ text: 'Months' }">
                <kendo-chart-category-axis-item-crosshair>
                  <kendo-chart-category-axis-item-crosshair-tooltip>
                  </kendo-chart-category-axis-item-crosshair-tooltip>
            </kendo-chart-category-axis-item-crosshair>
            </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>

Here is a runnable demo that demonstrates the described approach:

https://stackblitz.com/edit/angular-h4hd5t?file=src%2Fapp%2Fapp.component.ts

I hope this helps.

Regards,

Dimiter Topalov
Progress Telerik

[Megan]

That's exactly what I was looking for, thank you!