Style role

[DCH]

Alexander,

I see how I can choose the Role for each column in the chart settings, but the Style Role seems to be missing. How would you force specific styles on bars in a single series column chart?

Thanks!

For reference: https://developers.google.com/chart/interactive/docs/roles?hl=en-EN#stylerole

[DCH]

Should the colorByLabel option work for column charts? I thought it used to be for pie charts only but the help doesn’t indicate that any more.

Thanks!

[DCH]

I’ve tried these notations:

colorByLabel {“value1″:”red”,”value2″:”blue”}
colors [“red”,”blue”]
series {“0”:{“color”:”red”},”1″:{“color”:”blue”}}

The first two don’t work on my column chart. I know something is happening because when I use those options the default color goes away and a random color is assigned, but its the same color for all columns.

The third one works fine if there is more than one series, but I want to color columns in a single series differently. It doesn’t have to be by value/label since I can control the sorting in the list view.

[DCH]

I also just tried the spjs_chartOptionOverride function, but realized quickly that is based on the column value, not the column label.

[Alexander Bautz]

Hi,
The style role is currently not supported (was not available when I created the current release), and if you want to have different colors on the bars, I’m afraid you need to split the data in separate series. Can this be achieved by using some calculated columns so you can add the data columns as multiple rows in the configuration and get different series?

The calculated column “CustomValue1Column” could look like this:

=if([The original column name]="value1","1","0")

And the calculated column “CustomValue2Column” could look like this:

=if([The original column name]="value2","1","0")

Then you add the new columns “CustomValue1Column” and “CustomValue2Column” as separate series (using “sum”).

Could this work?

Alexander

[DCH]

Yes, that would work but in my case it would create about 30 new columns. I appreciate your effort to help though, thanks!

[Alexander Bautz]

Depending on the data-source you may be able to use the method in this page: https://spjsblog.com/2013/10/02/spjs-charts-for-sharepoint-v4/

Scroll down to “Configuring your first chart” and look at the screenshots.

Could this be used?

Alexander

[DCH]

That’s awesome, I never noticed that format setting before! If I “split unique values in separate series” can I control their colors individually? I don’t see how to reference them.

Thanks!

[DCH]

The series option with the object notation works!

So to control the color of each column in a single series chart:

1. Set the x-axis and y-axis to the same column
2. Set the y-axis column format to “split unique values in separate series”
3. Add the option ‘series’ and the value: {“0”:{“color”:”red”},”1″:{“color”:”blue”},”2″:{“color”:”yellow”}}

One strange side effect is that the bar width is also divided into equal portions based on how many the single series is broken into, so they end up being strangely thin, and I wasn’t able to effect the bar width using the bar.groupWidth option.

[Alexander Bautz]

I’m glad you got it working. If I remember correctly, you must set the option “IsStacked” to true to have the bar width to the full width.

Alexander

[DCH]

Perfect, it worked! Thanks again!

[DCH]

Just as a follow up, both of these options were successful using this chart configuration:

colorByLabel {"value1":"red","value2":"blue"}

series {"0":{"color":"red"},"1":{"color":"blue"}}

As an experiment I tried passing a style object like this but it didn’t work:

{"0":{"color":"red","style":{"stroke-color":"#703593","stroke-width":"4","fill-color":"C5A5CF"}},"1":{"color":"blue"},"2":{"color":"yellow"}}

[Author]

Posts