Feature Request - Cornerstone Charts - New Chart Type

Beta
#1

Hi,

I have recently had a request for a different type of chart from an alternative therapy business (not sure of the correct name for it, but ring chart sort of describes it). The requirements for the chart were to create rings, built from the center out. It is a sort of hierarchical chart - please see the screenshot. There could be many or few rings, depending upon the specifications for the chart.

I have managed to create something which works, but it is a bit clumsy and I am sure you geniuses at Themeco will be able to develop a chart specifically for this use case. The way I built the chart was to stack multiple Doughnut Charts on top of each other using Position: Absolute and stepping the doughnut’s hole to different percentages. A downside is that the Legend had to be created manually using headline elements, rather than being a part of the Chart.

2023-09-02_12-03-59
2023-09-02_12-03-591866Ă—750 165 KB

I hope the screenshot helps you visualise the concept.

Thanks,
Christopher

2 Likes
#2

So if you create another dataset in a pie chart it will actually create a pie inside the pie. Each dataset will go further inward. Usually they have the same colors so you can toggle on or off a shared dataset. But if you change the colors it gives you the look and feel you are going for. See the page template below. I’ll keep this in mind as apart of a Chart template library.

Jawbreaker Chart
https://theme.co/app/uploads/share/charts/jawbreaker.tco

Example of something similar.
https://www.chartjs.org/docs/latest/samples/other-charts/multi-series-pie.html

image
image829Ă—607 79 KB

#3

Hi @charlie,

Thanks for that. Good to see that nested charts could do most of the work needed, as in your Jawbreaker example. A few questions which I cannot find the solutions for:

  • The Legend label colorings appear to be limited to the single color of the outer ring in the Labelset > label settings.
  • On the Tooltip we are left with the name of the outer Dataset being the title for all rings and the outer ring’s color. Can the Tooltip title be switched off, as well as the data value, leaving just the correct color and Dataset name for each ring?
  • Is it potentially possible for the legend labels to be presented within their rings, typed on the corresponding arc? I know this is possible for static charts in PhotoShop or Illustrator, but for web? Just an idea…

The multi-series example you gave (https://www.chartjs.org/docs/latest/samples/other-charts/multi-series-pie.html) is also a great idea and probably would resolve a scenario I think I am about to be presented with, so please do include it in a future build of Cornerstone Charts!

Thanks,
Christopher

#4

1 . Yes I set it up that way to try to match your picture. If you need numerous, yeah having a “Multi-series” mode would be great. Building out the legend differently and more dynamically then what I created here.
2. To just display the color and legend label try this.

window.csGlobal.csHooks.filter("cs_charts_config", function(config) {
  const labels = config.data.labels;
  
  config.options.plugins.tooltip.callbacks = {
    // Hide the tooltip title
    title: function() {
      return '';
    },
    
    // The individual point of data label
    label: function(context) {
      return labels[context.datasetIndex];
    }
  };  
  
  return config;
});
  1. Would love to solve this in Cornerstone. I would start here, but I don’t think there really isn’t anything for that currently.

Thanks for thoughts on multi-series pies. It will help us develop them further.

#5

Hi @charlie,

Thanks for the reply.

  1. You did a great job! Yes, a multi-series mode would be great. With your example, the legend has all the same colors. Ideally they will match the individual pie ring color.

2023-09-21_21-12-51
2023-09-21_21-12-511147Ă—775 116 KB

  1. The JS did not appear to do anything for me - I placed it as Component JS (correct, I hope). Please see the screenshot below. The two elements with boxes around them (including the colon) are what I hope to be able to remove, leaving the color square and band description (“Behaviours”, in this screenshot).

2023-09-21_20-55-54

  1. More hope than expectation! I will look at your idea over the next day or so - many thanks.

I am grateful for your help,
Christopher

#6

1 and 1. Do you want to check you are running the latest CS Charts? Then try my original template to make sure the labels are getting the right colors. Even placed in Component JS was working fine for me. You can also send me a site to look at.

image

Happy to help, have a great day!

#7

Hi @charlie,

I have found the problem - your template worked just fine. I had made a Section template of your page template so I could use it as a Component. During the template creation process, the JS you had already placed in the Chart was not saved to the template and all I had done was copy the second set of JS into the Component.

I have now added the missing original JS back in and upon page refresh everything works just perfectly! It also sorts out the tooltip question I had.

Thanks for the great support and have a great day!
Christopher

1 Like