SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Answered
0
0

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
  • You must to post comments
Best Answer
0
0

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
  • Pedro Cruz
    Thank you for your answer, it works, I will update the plugin. Thanks Michael! :)
  • You must to post comments
0
0

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

  • Pedro Cruz
    Hey Andrew, when you suggest “axis” you mean xAxis and yAxis? Because I tried to change axisBandsFill and nothing happens.
  • Andrew Burnett-Thompson
    Yes that’s right, xAxis and yAxis. I just tested and both properties drawMajorBands and axisBandsFill work as expected.
  • You must to post comments
0
0

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
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.