Navigation :

StyleCode Property: color v2

🚧 Work in progress — This documents the redesigned dashboard layout system, which is still under active development and subject to change. It is not compatible with the older v1 dashboard tile system.

color

Specifies the color of a series for the plot color pipeline.

Applies to	Type	Default
`barchart > series` `barchart > series > value` `chart > plotxy > series` `chart > plot > series > line` `chart > plot > series > stack` `chart > plot > series > bar` `chart > plot > series > area` `chart > plot > series > background` `chart > plot > series > legend` `chart > plot > series > box` `chart > scatter > series` `chart > scatter > series > value` `linechart > series > line` `linechart > series > stack` `linechart > series > bar` `linechart > series > area` `linechart > series > background` `linechart > series > legend` `linechart > series > box` `piechart > series > value`	color, `gradient`	`gradient`

Examples

// Example: barchart > series
table Items = with
  [| as SKU, as Category, as Quantity |]
  [| "AAA", "CAT_1", 10 |]
  [| "BBB", "CAT_2", 20 |]
  [| "CCC", "CAT_1", 30 |]

show barchart "My BarChart" { 1..4, 1..6 } with
  sum(Items.Quantity) { color: "#FF6347" }
  group by Items.Category

// Example: barchart > series > value
table Items = with
  [| as SKU, as Category, as Quantity |]
  [| "AAA", "CAT_1", 10 |]
  [| "BBB", "CAT_2", 20 |]
  [| "CCC", "CAT_1", 30 |]

show barchart "My BarChart" { 1..4, 1..6 } with
  sum(Items.Quantity) { value { color: "#FF6347" } }
  group by Items.Category

// Example: chart > plotxy > series
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  plotxy T.X
    T.Y { color: "#FF6347" }
    order by T.Y

// Example: chart > plot > series > line
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  haxis by T.X
  plot by T.X
    same(T.Y) { seriesType: line ; color: "#FF6347" }

// Example: chart > plot > series > stack
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  haxis by T.X
  plot by T.X
    same(T.Y) { seriesType: stack ; color: "#FF6347" }

// Example: chart > plot > series > bar
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  haxis by T.X
  plot by T.X
    same(T.Y) { seriesType: bar ; color: "#FF6347" }

// Example: chart > plot > series > area
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  haxis by T.X
  plot by T.X
    same(T.Y) { seriesType: area ; color: "#FF6347" }

// Example: chart > plot > series > background
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  haxis by T.X
  plot by T.X
    same(T.Y) { seriesType: background ; color: "#FF6347" }

// Example: chart > plot > series > legend
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  haxis by T.X
  plot by T.X
    same(T.Y) { seriesType: legend ; color: "#FF6347" }

// Example: chart > plot > series > box
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  haxis by T.X
  plot by T.X
    same(T.Y) { seriesType: box ; color: "#FF6347" }

// Example: chart > scatter > series
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  scatter T.X
    T.Y { color: "#FF6347" }

// Example: chart > scatter > series > value
table T = extend.range(5)
T.X = T.N
T.Y = T.N * 2

show chart "My Chart" { 1..6, 1..6 } with
  scatter T.X
    T.Y { value { color: "#FF6347" } }

// Example: linechart > series > line
table T[Date] = with
  [| as Date, as Value |]
  [| date(2023,01,15), 15 |]
  [| date(2023,01,16), 5 |]
  [| date(2023,01,17), 12 |]

show linechart "My Line Chart" { 1..4, 1..6 } with
  same(T.Value) { seriesType: line ; color: "#FF6347" }
  group by T.Date

// Example: linechart > series > stack
table T[Date] = with
  [| as Date, as Value |]
  [| date(2023,01,15), 15 |]
  [| date(2023,01,16), 5 |]
  [| date(2023,01,17), 12 |]

show linechart "My Line Chart" { 1..4, 1..6 } with
  same(T.Value) { seriesType: stack ; color: "#FF6347" }
  group by T.Date

// Example: linechart > series > bar
table T[Date] = with
  [| as Date, as Value |]
  [| date(2023,01,15), 15 |]
  [| date(2023,01,16), 5 |]
  [| date(2023,01,17), 12 |]

show linechart "My Line Chart" { 1..4, 1..6 } with
  same(T.Value) { seriesType: bar ; color: "#FF6347" }
  group by T.Date

// Example: linechart > series > area
table T[Date] = with
  [| as Date, as Value |]
  [| date(2023,01,15), 15 |]
  [| date(2023,01,16), 5 |]
  [| date(2023,01,17), 12 |]

show linechart "My Line Chart" { 1..4, 1..6 } with
  same(T.Value) { seriesType: area ; color: "#FF6347" }
  group by T.Date

// Example: linechart > series > background
table T[Date] = with
  [| as Date, as Value |]
  [| date(2023,01,15), 15 |]
  [| date(2023,01,16), 5 |]
  [| date(2023,01,17), 12 |]

show linechart "My Line Chart" { 1..4, 1..6 } with
  same(T.Value) { seriesType: background ; color: "#FF6347" }
  group by T.Date

// Example: linechart > series > legend
table T[Date] = with
  [| as Date, as Value |]
  [| date(2023,01,15), 15 |]
  [| date(2023,01,16), 5 |]
  [| date(2023,01,17), 12 |]

show linechart "My Line Chart" { 1..4, 1..6 } with
  same(T.Value) { seriesType: legend ; color: "#FF6347" }
  group by T.Date

// Example: linechart > series > box
table T[Date] = with
  [| as Date, as Value |]
  [| date(2023,01,15), 15 |]
  [| date(2023,01,16), 5 |]
  [| date(2023,01,17), 12 |]

show linechart "My Line Chart" { 1..4, 1..6 } with
  same(T.Value) { seriesType: box ; color: "#FF6347" }
  group by T.Date

// Example: piechart > series > value
table Sales = with
  [| as Quantity, as Category |]
  [| 10, "A" |]
  [| 1, "B" |]
  [| 5, "B" |]
  [| 4, "A" |]
  [| 12, "C" |]

show piechart "My Pie Chart" { 1..4, 1..6 } with
  sum(Sales.Quantity) { value { color: "#FF6347" } }
  group by Sales.Category

User Contributed Notes

0 notes + add a note