topic Re: How do you specify chart colours for a JSStack chart? in Splunk Search

How do you specify chart colours for a JSStack chart?

lquinn — Mon, 02 Mar 2015 10:08:49 GMT

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?

Re: How do you specify chart colours for a JSStack chart?

gibba — Mon, 04 May 2015 16:40:52 GMT

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 }",

Re: How do you specify chart colours for a JSStack chart?

lquinn — Tue, 05 May 2015 14:23:31 GMT

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!

Re: How do you specify chart colours for a JSStack chart?

arkadyz1 — Thu, 23 Jul 2015 20:54:16 GMT

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...

Re: How do you specify chart colours for a JSStack chart?

stour — Fri, 13 Sep 2019 04:03:50 GMT

@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.