It's possible to make a scichart with a single color background?

Answered

Hello Scichart Team again,

I’m trying to replicate anything like this (check Screenshot_2.png).

I can update the scichart background, but I just wanted to have a single color in the background, but it seems that there is an overlap of colors in X / Y as I show in the next printscreen (check Screenshot_3.png)

How I can solve this?

Waiting for feedback.

Many thanks,

Pedro Cruz

Version

1.3.1510

Images

JavaScript SciChartSurface javascript SCIChartSurface Background

Ricardo Diz asked 2 years ago
last edited 2 years ago

You must login to post comments

Answers (3)

Best Answer

Hi Pedro,
If you need to remove grid bands or change the color do this:

const xAxis = new NumericAxis(wasmContext);
xAxis.drawMajorGridLines = false;
xAxis.drawMinorGridLines = false;
xAxis.drawMajorBands = false;

const yAxis = new NumericAxis(wasmContext);
yAxis.drawMajorGridLines = false;
yAxis.drawMinorGridLines = false;
yAxis.drawMajorBands = false;

You can also change other styles for the axes, take a look at our documentation for SciChart.js

Best regards,
Michael

Images

Michael Klishevich answered 2 years ago

- Ricardo Diz
- 2 years ago
Thank you for your answer, it works, I will update the plugin. Thanks Michael! :)

You must login to post comments

Hi Pedro

Yes it is, what you need to set to remove this hatch styling is to set

 axis.drawMajorBands = false;

or alternatively

 axis.axisBandsFill = "Transparent";

There’s also a guide here on how to style every part of the chart in SciChart.js.

Can you try that and let me know?

Best regards,
Andrew

Andrew Burnett-Thompson answered 2 years ago

- Ricardo Diz
- 2 years ago
Hey Andrew, when you suggest “axis” you mean xAxis and yAxis? Because I tried to change axisBandsFill and nothing happens.
- Andrew Burnett-Thompson
- 2 years ago
Yes that’s right, xAxis and yAxis. I just tested and both properties drawMajorBands and axisBandsFill work as expected.

You must login to post comments

But if I currently using scichart background solution (for example, I need the wrapper be white, but inside the graphs i need them entirely gray)

// xAxis
xAxis.axisBandsFill = '#EAEAEA'
xAxis.majorGridLineStyle = {
    strokeThickness: 4,
    color: '#FFFFFF',
}
xAxis.minorGridLineStyle = {
    strokeThickness: 0,
}

// yAxis
yAxis.axisBandsFill = '#EAEAEA'
yAxis.majorGridLineStyle = {
    strokeThickness: 4,
    color: '#FFFFFF',
}
yAxis.minorGridLineStyle = {
    strokeThickness: 0,
}

I can’t understand why I am getting white squares?

Images