Chart style customization

[Matej]

Hi,

I have a general chart customization questions:

1. Can I change chart background fill? (e.g. I have 2 charts on my page. One should have white background and second light blue)

2. Can I change X and Y axis labels color/weight? (e.g. I have number on Y axis and Months on X axis and they should be bold.) 

3. Can I change legend text color/weight and icon shape(now it is a dash). (e.g. icon legend circle and bold text)

[Stefan]

Hello, Matej.

Regarding the questions:

1) This can be achieved using the ChartArea background prop:

https://www.telerik.com/kendo-react-ui/components/charts/api/ChartAreaProps/#toc-background

2) The labels have color and other font properties, please check the available ones here:

https://www.telerik.com/kendo-react-ui/components/charts/api/ChartSeriesLabelsProps/

3) These are the available props to change the color, font and other attributes of the legend labels:

https://www.telerik.com/kendo-react-ui/components/charts/api/LegendLabels/

As for the shape, it will require using a custom visual and rendering the required shape:

https://www.telerik.com/kendo-react-ui/components/charts/api/ChartLegendItemProps/#toc-visual

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Matej]

Can you give me an example how to use the visual prop from ChartLegendItem?

[Stefan]

Hello, Matej,

Yes, we made an example that uses the custom visual to render the legend items as a dash line.

The example is attached in the reply and can be tested locally.

Regards,
Stefan
Progress Telerik

[Matej]

Thank you.

[Matej]

sorry, I have more question about your react-kendo-chart-custom-visual.zip:

1.) How can I change cursor? cursor prop on ChartLegendItem is no more working.

2.) By default ( if customVisual is not used) your shape(dash) is centered vertically. But in your example path1 and path2 have fixed position. Is it possible to implement this vertical centering on your example ?  (because text can have a dynamic size)

[Stefan]

Hello, Matej,

Regarding the additional questions:

1) Indeed, the cursor property is only added to the built-in legend elements as we do not have access internally to the custom element. We can add it with CSS, but as the selector is not 100% specific, this may affect some other elements in the Chart depending on the used options:

    .k-chart g>rect {
      cursor: pointer;
    }

2) The items are aligned horizontally because the demo has the orientation prop set to `horizontally` setting it to `vertically` will change it:

https://www.telerik.com/kendo-react-ui-develop/components/charts/api/ChartLegendProps/

Regards,
Stefan
Progress Telerik

[Matej]

1) If this is only solution I have to add also text

.k-chart g>text {
    cursor: pointer;
  }

 

2) I am not talking about position and orientation. If I change legend font size in your example the shape is not centered because path1 and path2 have fixed position. see attached file

[Stefan]

Hello, Matej,

1) Yes, currently this is the possible option. We will research if a better option will be available in the future.

2) Thank you for the clarification. In this case, we have to adjust the values when we draw the lines:

            // The paths are constructed by using a chain of commands
            // These values have to be adjusted based on the new font.
            path1.moveTo(20, 7).lineTo(10, 7).close();
            path2.moveTo(15, 7).lineTo(25, 7).close();

 

Regards,
Stefan
Progress Telerik

[Matej]

1) this is affecting other elements, so no cursor pointer for me.

2) Yes, I understand paths in your example have fixed position. But it should not be a fixed value because font size is not fixed value and in my case font size can change. What I need is to switch only the "dash" shape for "circle" shape and everything else should be working as before. When custom visual is not used https://stackblitz.com/edit/react-jswbkx the default shape is centered correctly. Can centering like this be applied to custom shape?

 

new question:

3) Why don't you import hammerjs in your examples? Only example I have seen with hammerjs import is "Clicking Legend Items" and in this example you are toggling chart categories on legend click. Which is very confusing because if you import hammerjs  you don't need to control category visibility from outside of the chart component.

[Stefan]

Hello, Matej,

Regarding the questions:

1) It will be possible at some point when we add the onLegengLeave event as this will allow us to dynamically add the styles only when over the legend element.

2) The custom visual is a custom drawn SVG element that the developer has to draw instead of the built-in item. This means that everything including the position, length, etc has to be custom drawn, this is how the drawing API functions. In this case, we can suggest a method that will calculate the correct position based on the font size. Still, I agree that this can be a lot of custom modifications to only change the shape of the legend item. If you wish we can log a feature request to allow changing the shape to a predefined number of shapes.

3) HammerJS is required for the Chart events, but the reason why we do not have it in the demos comes from a limitation we have using stackblitz for many demos. We have to send a fixed list for all dependencies that will be added for all demos. As the hammerjs is needed only for the Chart we do not add it in the default list to not load it in all non-chart demos. I hope I was able to describe this correctly.

Regards,
Stefan
Progress Telerik