Splunk Search

How do you specify chart colours for a JSStack chart?

lquinn
Contributor

I have a simple column chart with fields '-','High', 'Medium', 'Low', 'None'. I am using JS stack with the following code:

var ChartView = require("splunkjs/mvc/chartview");
columnchart = new ChartView({
        id: "example-chart",
        managerid: "example-search",
        type: "column",
        "charting.chart.stackMode": "stacked",
        "charting.axisLabelsX.axisVisibility": "show",
        "charting.axisLabelsX.majorLabelStyle.rotation":45,
        "height":346,
        el: $("#example-chart")
    }).render();

I would like to specifiy colours for each field in my bar chart rather than splunk randomly selecting them. I tried using charting.fieldColors, however after doing a bit of research it appears that this function is not supported by JSStack. Does any one know of a function that does the same thing as charting.fieldColors but is supported for JSStack?

1 Solution

gibba
Path Finder

charting.fieldColors is supported in JS stack, maybe it's complicated use the string formatting fo JS.
for example if you need to colors your fields called INFO, WARNING and ERROR, when you define the option charting.fieldColors you need to use the formatting string for your fields with the backslash "\".

Example

"charting.fieldColors": "{ \"INFO\": 0x9AC23C, \"WARNING\": 0x5479AF, \"ERROR\": 0xD85E3D }",

View solution in original post

gibba
Path Finder

charting.fieldColors is supported in JS stack, maybe it's complicated use the string formatting fo JS.
for example if you need to colors your fields called INFO, WARNING and ERROR, when you define the option charting.fieldColors you need to use the formatting string for your fields with the backslash "\".

Example

"charting.fieldColors": "{ \"INFO\": 0x9AC23C, \"WARNING\": 0x5479AF, \"ERROR\": 0xD85E3D }",

stour
Engager

@gibba If I could give you a million splunk points for this answer, I would. I've been working on this issue for well over an hour and this is the only thing that worked for me. This is VERY unclear in the docs.

0 Karma

lquinn
Contributor

Thanks so much, I still hadn't solved this issue. I had read a few places that charting.fieldColors was not supported but it just needed formatting a little differently. Much appreciated!

arkadyz1
Builder

So, to put it in a more formal way - the value of "charting.fieldColors" in JavaScript is not a map (as is claimed in the docs) - it is a string which JSON will parse into a map.

The docs never talk about the difference between XML and JS representation, and there are other properties which do not need this 'stringifying' of the value - look, for example, at "charting.seriesColors", which is an array and is specified as such in JS.

Just double checking...

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...