Hi
We use the chart wizard in our app to allow our end users to create their own charts by storing the chart wizard settings and then displaying the chart with updated data.
This works very well.
However there are some limitations with the chart wizard settings that result in us not being able to create as clean and readable charts as we would like. These are:
- In a bar chart the borders of each bar are black irrespective of the colour of the bar. This creates messy charts when have lots of bars that end up being next to each other as only see the black borders and not the (say) red bars. Ideally there should be no bar border
- You can't set the frequency of the x axis labels and hence with lots of items the labels overlap
- You can't have mixed series types i.e. choose type (line, column etc) for each series
The other usage issue is that if you change chart type from (say) bars to columns you loose your settings (eg which data items selected) even though only changing chart orientation
Hello, Martin,
Thank you for outlining your user scenario and the need for more advanced configuration options directly within the KendoReact Chart Wizard UI, without relying on custom code.
With the current implementation, the ChartWizard does not yet provide a built-in mechanism for easy customization. While there is no public release date for the features you mentioned and they are not currently on our roadmap, we are constantly striving to improve our components and carefully consider feedback like yours, which is very valuable to us. With this in mind, I’ve gone ahead and converted this ticket into an official feature request and added your vote. We will monitor the interest in the request, please let me know in case further questions arise.
Regards,
Filip
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Thanks for the response. But I don't that this addresses our desired user experience.
The used case is that we have a client facing app in which clients can build their own dashboards linking to their data (accessed via api's).
So we like the chart wizard as they can create their own charts (in edit mode) for which we store the chart configuration in a json object and then in view mode display the charts.
As such the data, charts created etc are not in our control and hence we do not want custom code to display labels, bar borders, mixed chart types etc.
Rather want to be able to configure all of this in the wizard as per the exist charting configuration.
I appreciate that can't currently do this. But wondering what your roadmap is to enhance the wizard configuration capability to include these features below. And other charting configuration options so that can our users can configure more chart types with more layout configuration options
Hi, Martin,
The chart wizard leaves bar and column borders undefined, so the chart falls back to the theme default, which is a black outline. With many adjacent bars, those borders dominate visually and make the chart hard to read. We can explicitly set border.width = 0 when rendering bar/column charts:
<ChartSeriesItem
{...wizardSeriesProps}
border={{ width: 0 }} // removes the outline
/>
As for the labels, the wizard doesn’t expose label stepping. But the underlying chart supports it via category axis label step (and optionally rotation / overlap strategies depending on your axis type).I can recommend the following approach:
<ChartCategoryAxis>
<ChartCategoryAxisItem
labels={{ step: 2 }} // show every 2nd label (use 3, 5, 10, etc.)
/>
</ChartCategoryAxis>
As for rendering mixed series types a possible approach I can suggest is to implement a custom component that enables to change the series, I have prepared a runnable example showcasing this approach here:
In case the suggested approaches did not resolve the issues, can you please modify the sample above so that it matches your implementation and the issues are reproduced? This will enable me to debug it locally and find another solution.
Regards,
Filip
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.