Change colors in SeekTable charts

62 views
Skip to first unread message

Q&A Bot

unread,
Mar 21, 2021, 6:05:20 AM3/21/21
to seektab...@googlegroups.com

Q:
 is it possible to change the colors for the graphs?

SeekTable uses Chartist.js for charts and they are rendered as SVG images, so it is possible to customize colors in charts with CSS rules.
It is possible to specify custom CSS in 2 ways:
  • globally for the whole SeekTable app -- if you use self-hosted SeekTable (or managed instance) with an active white-label mode.
  • for concrete published report (accessible with a public link or embedded with an iFrame) -- if your SeekTable account has an active "Advanced publishing" subscription.
How to override a color for the chart series
Use these CSS rules to redefine a color for some (or all) chart colors:
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
	stroke: #2f4554 !important;
}
.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area {
	fill: #2f4554 !important;
}
.pvtChartLegend.pvtChart-series-a {
	background-color: #2f4554;
}
these rules are the first color (series-a); to redefine a color for 2-nd color use rules for "series-b", "series-c" etc (up to "series-o").
Reply all
Reply to author
Forward
0 new messages