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
Get Updates on the Splunk Community!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...