Cornerstone Charts Questions

[nickyker]

We’re using Cornerstone Charts with a Google Sheet as the source, and are having a couple of formatting issues that we were hoping you could help with:
-Our data points / tick marks are too bunched up, how do we reduce the number of tick marks that are showing?
-The labels on the X axis are slanted, but we would like them to be at a 90 degree angle to the axis. Is there a way to achieve this?
Attaching a screenshot for reference, and apologize if we’ve missed something in the documentation!

[charlie]

Hello,

Great questions. It looks like we are missing controls for the tick rotations and max tick number. If you copy this into Page JS you’ll notice the labels lie at 90 degrees. I have a feeling you meant 0 degrees or parallel to the X axis, in that case just change the 90s to 0 in this code.

// Filter the config of a CS Chart
// Use `cs_charts_config_{ID}` to filter based off of ID
window.csGlobal.csHooks.filter("cs_charts_config", function(config) {
  config.options.scales.x.ticks.autoSkip = true;
  
  // Force the rotation
  config.options.scales.x.ticks.maxRotation = 90;
  config.options.scales.x.ticks.minRotation = 90;

  // Force number of ticks
  config.options.scales.x.ticks.maxTicksLimit = 5;

  return config;
});

The point style is a little different, since it is tied to the Dataset currently and I don’t think there was anything related to auto-skipping values. It looks like we can set it up the controls to be at the “Data” level, but we’ll need to make some changes on our end and it’s a little more involved for now.

If you use “Looper Index” and check if it is Odd or Even. You can effectively skip values. You could do this with the labelset as well. The shape of the chart lines would probably be a little different, as well as what you would be able to hover over if you have a tooltip.

It might also just be easier to remove the points styling too. If you have a tooltip, it would still hover over the points without circles which might not be the preferred look.

Let me know if this helps, I can elaborate on anything here. Have a great day!

[nickyker]

This worked great, many thanks @charlie

We used the JS in the component JS, and used the conditional on the labelset looper index as you suggested.

Here’s the outcome, just for info in case anyone else wants to recreate this in future!

[tristup]

Hi @nickyker,

Glad that we are able to help you.

Thanks