Change color of background of graph?

← Back to discussions

In Progress

Posted in: Product Support
Michelle

February 27, 2017 at 10:28 am #7337

I would like to be able to have a white background instead of black for the radial graph. It’s not part of the themes. How would you do this?

vizuly

February 27, 2017 at 10:42 am #7338

Hello Michelle,

That background is simply being referenced in the test container .css file here:

You can change the background color of those containers either by directly overriding the CSS in the tag, or changing the .css file.

Cheers,

Tom

fredtrem

March 31, 2017 at 5:41 am #7837

Tom,

Exactly which .css file do I modify to make the graph render with a white background?

Fred

vizuly

March 31, 2017 at 7:04 am #7839

Hello Fred,

The css is in vizuly_radial_progress.css and the style in question is for the #viz_container element.

Cheers,

Tom

Deasus

September 9, 2020 at 9:07 am #12002

-a bit late to the reply… but where would you override the CSS? Would it be in the .html or .js for the chart?

Essentially can I change the background on the .html (like RadialProgressTest.html)?

Thanks!
vizuly

September 9, 2020 at 10:16 am #12003

Hello Deasus, the original poster was referencing Vizuly 1.0. Vizuly 2.0 does things a little differently. I assume you want to change the gradient grey background on the radial progress bar, correct? If so you can either change those colors to a single color OR change the opacity to 0. You can use the style explorer in the demo to see these codes, but I am putting them here as well.

White Background
```
viz.style('background-color-top', '#FFF')
viz.style('background-color-bottom', '#FFF')
```
OR

viz.style('background-opacity', 0)

Please let me know if you have any more questions, or if this is not what you meant.

– Tom
Deasus

September 9, 2020 at 11:17 am #12004

Hello thank you!

I put

.style(‘background-color-top’, ‘#FFF’)
.style(‘background-color-bottom’, ‘#FFF’)

In the body-tag under ‘viz’in the HTML page I created from scratch. Essentially the below. I think when people are starting out with limited experience they are trying to change style variable and wonder where (which file and where in which file) do these changes go.

Example is below (for anyone else looking at this, make sure you create the file in an editor of your choice and save it in the same directory as your other Vizuly test containers (things that say stuff like BarChartTest.html . etc. Take a look:

_____

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Deeps First Bar Chart</title>
<link rel=”stylesheet” href=”lib/styles/vizuly.css”>

<script src=”lib/d3_v5.7.min.js”></script>

<script src=”lib/vizuly2_core.min.js”></script>
<script src=”src/BarChart.js”></script>

</head>
<body>
<div id=”myDiv” style=”width:600px; height:600px; margin:0px auto;”></div>
<script id=”testscript”>

var viz = vizuly2.viz.BarChart(“#myDiv”);

var data = [
[{‘stock’: ‘In Stock’, ‘fruit’ : ‘Apples’, ‘value’: 10,},{‘stock’: ‘In Stock’, ‘fruit’ : ‘Peaches’, ‘value’: 15},{‘stock’: ‘In Stock’, ‘fruit’ : ‘Pears’, ‘value’: 20}],
[{‘stock’: ‘Out Of Stock’, ‘fruit’ : ‘Apples’, ‘value’: 4,},{‘stock’: ‘Out Of Stock’, ‘fruit’ : ‘Peaches’, ‘value’: 8},{‘stock’: ‘Out Of Stock’, ‘fruit’ : ‘Pears’, ‘value’: 30}]
]

viz
.data(data)
.width(‘100%’)
.height(‘100%’)
.x(function (d, i) { return Number(d.value); })
.y(function (d, i) { return d.fruit; })
.seriesLabel( function (d,i) { return d.stock })
.style(‘background-color-top’, ‘#FFF’)
.style(‘background-color-bottom’, ‘#FFF’)
.update();

</script>

</body>
</html>

vizuly

September 9, 2020 at 11:20 am #12005

And here is a link to the documentation:

https://vizuly.io/vizuly/docs/out/tutorial-03-properties-and-styles.html
|

Viewing 7 reply threads

You must be logged in to reply to this topic.

Search Forums

Premium Support