Improved Data, Legend Label and Styling Options for Chart Plus

If you use Chart Plus, you probably feel that the operations are easy; from configuring a chart to customizing data on the axis to making clear all the values on the chart. However, this may not be the case with a complete chart, as shown here:

Certain questions may now arise: “How do I highlight the title and/or the value on the chart? How do I change colors for the chart’s visual elements? How do I change the position of the data on the chart?” You may want to customize the details on the chart without having to bring somebody in to help you. If so, don’t worry. Here’s how it’s done:

Open Chart Plus Settings; Click Chart Setup section -> Click Display tab

General Settings tab

  • Chart Title Section: You can input the title of the chart and change the position of the title to display on the chart. The Position drop-down includes Top Center, Top Left, Top Right, Bottom Center, Bottom Left, and Bottom Right.
  • Legend and Tooltips Section: The Position drop-down includes Right, Left, Top, and Bottom. The Arrangement drop-down includes Horizontal and Vertical.
  • Chart Theme Section: You can choose to inherit the colors from the Chart Theme based on Kendo UI themes for widgets rendering data visualization.
  • Series Colors Section: Rather than having the chart theme generate the automatic hex colors, we can
    hardcode our own default hex codes for that theme. Meaning, we will no longer inherit series colors from the theme automatically; and, if you select a chart theme, we always display our custom series colors based on your selection as shown below: Then, you can select different colors using the color picker:
  • Advanced Settings tab you can select font color or font size for titles and labels. And you can change the color or width of the line and border if you want, too. We enable you to choose a language to display on the tool pane. Besides, you can customize the details on the chart by yourself if you know Cascading
  • Style Sheets (CSS). Here is an example of the chart visual elements: In the examples below, I’ve customized some things: The UI of the chart is now perfect: