How to set ForeColor of DataLabel in ChartJS?

0
0

I tried to use the ChartJS control to display data. After many settings, I couldn’t define the text display color of Labels to other colors. My code is as follows. Do you have a better solution?

Thank you so much!

private void ViewChart()
{
Wisej.Web.Ext.ChartJS.ChartJS chart1 = new Wisej.Web.Ext.ChartJS.ChartJS()
{
ChartType = Wisej.Web.Ext.ChartJS.ChartType.Doughnut,
Text = @”Test CharJS 1″,
Labels = new[] { “Order1”, “Order2″ },
Size = new Size(500, 500),
BorderStyle = BorderStyle.None,
ForeColor = Color.White
};

chart1.Options.Title.Text = @”Test CharJS 1″;
chart1.Options.Title.Display = true;
chart1.Options.Title.FontColor = Color.White;
chart1.Options.DataLabel.BorderColor = Color.White;
chart1.Options.DataLabel.Display = true;
chart1.Options.DataLabel.TextShadowColor = Color.White;
chart1.Options.DataLabel.TextStrokeColor = Color.White;
chart1.Options.DataLabel.Color = Color.White;

chart1.ForeColor = Color.White;

Wisej.Web.Ext.ChartJS.DoughnutDataSet doughnutDataSet1 = new Wisej.Web.Ext.ChartJS.DoughnutDataSet
{
BorderWidth = 0,
HoverBackgroundColor = new[]
{
Color.FromArgb(100, 200, 200, 50),
Color.FromArgb(200, 80, 7),
},

BorderColor = new[]
{
Color.FromArgb(58, 102, 255, 0),
Color.FromArgb(237, 130, 237),
},

BackgroundColor = new[]
{
Color.FromArgb(200, 102, 255, 0),
Color.FromArgb(237, 200, 237),
},
Data = CreateRandomData(2,500000),

};

chart1.DataSets.Add(doughnutDataSet1);
flowLayoutPanel2.Controls.Add(chart1);

chart1.UpdateData();

}

 
private void ViewChart3()
{
Wisej.Web.Ext.ChartJS3.ChartJS3 chart2 = new Wisej.Web.Ext.ChartJS3.ChartJS3()
{
ChartType = Wisej.Web.Ext.ChartJS3.ChartType.Doughnut,
Text = @”Test CharJS 3”,
Labels = new[] { “Order1”, “Order2”, “Order3”, “Order4″ },
Size = new Size(500, 500),
BorderStyle = BorderStyle.None,
ForeColor = Color.White,
Options = new DoughnutOptions(),

};
chart2.Options.Plugins.Title.FontColor = Color.White;
//chart2.Options.Plugins.Title.Text = @”Test CharJS 1”;
//chart2.Options.Plugins.Title.Display = true;
chart2.ForeColor = Color.White;

Wisej.Web.Ext.ChartJS3.DoughnutDataSet doughnutDataSet1 = new Wisej.Web.Ext.ChartJS3.DoughnutDataSet
{
BorderWidth = 0,
HoverBackgroundColor = new[]
{
Color.FromArgb(100, 200, 200, 50),
Color.FromArgb(200, 80, 7),
},

BorderColor = new[]
{
Color.FromArgb(58, 102, 255, 0),
Color.FromArgb(237, 130, 237),
},

BackgroundColor = new[]
{
Color.FromArgb(200, 102, 255, 0),
Color.FromArgb(237, 200, 237),
Color.FromArgb(200, 50, 150, 200),
Color.FromArgb(200, 50, 80),
},
Data = CreateRandomData(4, 500000),

};

chart2.DataSets.Add(doughnutDataSet1);
flowLayoutPanel2.Controls.Add(chart2);

if (chart2.Options.Plugins?.DataLabels!=null)
{
chart2.Options.Plugins.DataLabels.BorderColor = Color.White;
chart2.Options.Plugins.DataLabels.Display = true;
chart2.Options.Plugins.DataLabels.TextShadowColor = Color.White;
chart2.Options.Plugins.DataLabels.TextStrokeColor = Color.White;
chart2.Options.Plugins.DataLabels.Color = Color.White;
}

}

 

 

Thank you so much!

Attachment
  • You must to post comments
0
0

Hi dev,

can you please attach your code as a runnable sample so we can take a closer look?

Thanks in advance,
Frank

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.