Chart.js: Grid Lines for dark theme

Created on 15 Dec 2016  ·  6Comments  ·  Source: chartjs/Chart.js

I searched the internet, i looked into the source code, but I still cannot find any answer.

All examples of ChartJS that i find are with a light theme. My website has a dark theme, therefore some charts look strange. In particular I have a radar chart, where I need to change the color of the grid as well as labels. On your website I could not find the code for the configuration.

This is such a simple task, I cannot believe that there should not be any parameters for doing this. But which? Radar Chart does not have an xAxis or yAxis, so using these parameters is messing the result even more up.

Please redirect me into the right direction. I love ChartJS but under that circumstances I cannot use it. I need configuration for radar chart on a webpage with black background. It seems grid lines by default are black with some opacity, which doesn't work on black background.

  • Isabelle
support

Most helpful comment

@SadChartUser we're working hard to rewrite the documentation for v2.5 to include more examples and make it clearer how the options work.

We provide all of the necessary options to change the grid lines and labels. I created https://jsfiddle.net/94o6vc9w/ that is a good start.

All 6 comments

@SadChartUser we're working hard to rewrite the documentation for v2.5 to include more examples and make it clearer how the options work.

We provide all of the necessary options to change the grid lines and labels. I created https://jsfiddle.net/94o6vc9w/ that is a good start.

Closing as answered per my comment above

Just so I understand: y'all built a beautiful, open source charting library but you require an ad-hoc plugin to change the canvas black? Given it's only seven lines, I'm not sure why it can't just be one line. backgroundColor: 'black' in the chart options.

Is there a general "theme" support or do we just declare the same colors for every chart? I don't want to sound like a dick, because I think I'll be using chartJS and loving it as I do highcharts. :}

@VaelVictus There is no built-in theme support, but I think it would make a good plugin (built-in or external, depending on the involved code size). About the canvas backgroundColor, I totally agree that it should be built-in.

@VaelVictus though, changing the canvas background color doesn't require any plugin and is just one line: <canvas style="background-color: black">, or via a style sheet (fiddle).

I'd read etimberg's post, which displays a plugin changing the bg color; since we can change with bgcolor on the canvas, it sounds redundant to have backgroundColor support in the plugin itself, then. :} However, the docs could be significantly better on theming in general.

Was this page helpful?
0 / 5 - 0 ratings