Want to plot a chart and display time in X-axis.

[Nithya]

Want to plot something like this. the graph is plotted based on the the range of time.
Eg. from 9 AM to 9:10 AM some value and based on the status, the color is decided.

I have tried restructuring bullet chart with number range as below

but I want to pass time and date as input instead. May I get some suggestion on this?

like which chart would match this requirement

[Dess | Tech Support Engineer, Principal]

Hi, Nithya,

It seems that the product in this forum thread is not specified. Could you please specify what is the exact Telerik product that you are currently using? Thus, the appropriate community would gladly assist you.

[Nithya]

Sure. It's Kendo react

[Vessy]

Hi, Nithya,

The chart from the provided image looks like a TimeLine chart which, unfortunately, is still not available in the KendoReact suit. Another possible option coming to mind (except for the one already found by you) is to use plotbands instead of series items, which allows defining from-to values:

https://stackblitz.com/edit/react-ykkxnj?file=app%2Fmain.jsx

I can also recommend submitting a feature request about such chart type in our feedback portal, where new ideas are constantly being evaluated and the most popular ones are implemented in future releases:

https://feedback.telerik.com/kendo-react-ui 

I hope this helps.

Regards,
Vessy
Progress Telerik

[Nithya]

Thanks Vessy. So I have utilized plotbands and arrived at the required graph almost. I'm converting time to number. It looks as below. 
I need some additional functionality to this

1.  I should be able to edit the label (shown as Down Time) on clicking the graph. My plotband object is something like below

{

                from: 17,

                to: 17.5,

                color: #68D560,

                opacity: 1,

                label: {

                    text: "Down Time",

                    font: "12px sans-serif",

                    color: "#FFFFFF",

                    rotation:-90,

                    background: 'black'

                  }

            }

I see there is a property called "visual" for label. I'm not able to understand and use that option. Can u help me how to use that function?  

 

2. My second requirement is I want to highlight the particular area of graph when clicked. Suppose I click on color 'red' area, that particular plotband should be highlighted with some dark border or something similar. Could u refer some option for this?

3.  the chart gives label in bottom of the chart.( eg from my chart is :17, 17.5 18, 18.5 etc) . I want to pass custom labels. Any help here?

Many thanks in advance :)

[Vessy]

Hi, Nithya,

Please, find my answers below:

1. Editing the "Down Time" label (and any label in the chart as a whole) is not supported. All elements o the chart are rendered inside an SVG object and you can edit their values only before the rendering of the chart. The `visual` prop can be used to override the default rendering of the labels by creating your custom Kendo Drawing objects. You can use it for passing custom text content (e.g. make the label red if the value is too big), insert a drawing object like icons, change the position of a label, skip a label on predefined condition, etc:

• https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/labels/#toc-rendering-custom-visuals

2. Unfortunately, the plotbands are also not designed as clickable elements - they can only highlighting a part of the chart.

3. You can bound the labels to a data holding the desired values though the `categories` and `categoriesField` props of the chart: 

• https://www.telerik.com/kendo-react-ui/components/charts/chart/data-binding/#toc-binding-categories

Just have in mind that the `from` and `to` props of the plotbands expect the indexes of the target category items, but not the values themselves: https://stackblitz.com/edit/react-ykkxnj-vyyr6v?file=app%2Fmain.jsx

 

I hope the provided information will be helpful for you.

Kind regards, 
Vessy