ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Change financial chart background color
Posted by Brian Hui on Oct-24-2023 12:00
Hi Peter,

I found it is quite difficult to change the background color from white to black of financial chart which includes chart1, chart2 and xy-axis. I am using c# version. Auy suggestion? Thanks!

background color.png

  Re: Change financial chart background color
Posted by Peter Kwan on Oct-24-2023 17:06
Hi Brian,

Some of the colors are the default colors. They can be changed using BaseChart.setColors. Other colors are specified by your code and/or non-default. They have to be changed individually.

I have attached an example for your reference. It is modified from the "Finance Chart (2)" sample code. Basically, there is a "applyColors" function that changes some generic colors of the chart. I also adjusted the colors of some indicators to make them brighter, otherwise they will look too dark on a dark background.

The original sample code is at

The modified code is as follows:

// A function to change the generic colors of a chart
protected XYChart applyColors(XYChart c)
c.setColor(Chart.TextColor, 0xffffff);
c.setColor(Chart.LineColor, 0xaaaaaa);
c.getPlotArea().setBackground(0x000000, -1, 0x555555);
c.getPlotArea().setGridColor(0x333333, 0x333333);
return c;

// Page Load event handler
protected void Page_Load(object sender, EventArgs e)
    // Create a finance chart demo containing 100 days of data
    int noOfDays = 100;

    // To compute moving averages starting from the first day, we need to get extra data points
    // before the first day
    int extraDays = 30;

    // In this exammple, we use a random number generator utility to simulate the data. We set up
    // the random table to create 6 cols x (noOfDays + extraDays) rows, using 9 as the seed.
    RanTable rantable = new RanTable(9, 6, noOfDays + extraDays);

    // Set the 1st col to be the timeStamp, starting from Sep 4, 2002, with each row representing
    // one day, and counting week days only (jump over Sat and Sun)
    rantable.setDateCol(0, new DateTime(2002, 9, 4), 86400, true);

    // Set the 2nd, 3rd, 4th and 5th columns to be high, low, open and close data. The open value
    // starts from 100, and the daily change is random from -5 to 5.
    rantable.setHLOCCols(1, 100, -5, 5);

    // Set the 6th column as the vol data from 5 to 25 million
    rantable.setCol(5, 50000000, 250000000);

    // Now we read the data from the table into arrays
    double[] timeStamps = rantable.getCol(0);
    double[] highData = rantable.getCol(1);
    double[] lowData = rantable.getCol(2);
    double[] openData = rantable.getCol(3);
    double[] closeData = rantable.getCol(4);
    double[] volData = rantable.getCol(5);

    // Create a FinanceChart object of width 640 pixels
    FinanceChart c = new FinanceChart(640);

    // Add a title to the chart
    c.addTitle("Finance Chart Demonstration");

    // Set the data into the finance chart object
    c.setData(timeStamps, highData, lowData, openData, closeData, volData, extraDays);

    // Add a slow stochastic chart (75 pixels high) with %K = 14 and %D = 3
    applyColors(c.addSlowStochastic(75, 14, 3, 0x90f0f0, 0xf0f090));

    // Add the main chart with 240 pixels in height

    // Add a 10 period simple moving average to the main chart, using brown color
    c.addSimpleMovingAvg(10, 0xcc6600);

    // Add a 20 period simple moving average to the main chart, using purple color
    c.addSimpleMovingAvg(20, 0xcc44ff);

    // Add candlestick symbols to the main chart, using green/red for up/down days
    c.addCandleStick(0x00ff00, 0xff0000);

    // Add 20 days donchian channel to the main chart, using light blue (9999ff) as the border and
    // semi-transparent blue (c06666ff) as the fill color
    c.addDonchianChannel(20, 0x9999ff, unchecked((int)0xc06666ff));

    // Add a 75 pixels volume bars sub-chart to the bottom of the main chart, using green/red/grey
    // for up/down/flat days
    c.addVolBars(75, 0x99ff99, 0xff9999, 0x808080);

    // Append a MACD(26, 12) indicator chart (75 pixels high) after the main chart, using 9 days for
    // computing divergence.
    applyColors(c.addMACD(75, 26, 12, 9, 0x8888ff, 0xff66ff, 0x00c000));

    // Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.SVG);

Peter Kwan

  Re: Change financial chart background color
Posted by Brian Hui on Oct-26-2023 12:19
Let me try! Thanks Peter~