[SOLVED] ChartJS data set is not displayed in the new project.


I am trying the ChartJS sample project of wisej-examples-master of GitHub. And although the sample project worked, when I created a new project and described the code as described in step 3 of Wisej-Example-ChartJS.docx, the legend was displayed but the data set was not rendered .
Do I have to write some other code?

Also, regarding the GitHub sample, in the bar chart (ChartJS 2), even if you click on the legend and hide the data set, the data label still remains.
And in the bar chart (ChartJS 2), I changed the Text property to change the title of the chart, but the title still remains “Bar Chart”. The same thing happens in Donut Chart (ChartJS 5).

Thank you in advance.

  • You must to post comments
Best Answer

Hi Masafumi,

  1. Opens in designer view, go to the Properties panel and select the non-working chart.
  2. Under Misc, unfold Options, then Scales.
  3. Now click on the ellipsis to edit xAxes in a popup (or unfold xAxes until you see the Type property).
  4. The Type is Linear; just change it to Category.

As soon as you close the popup, the x axe will show the months you set in the Labels property. Run the sample and everything is as expected.

  • Masafumi Okuro
    Hi Tiago, thank you for your answer. It got as expected with the procedure presented to you Finally I added the following code. chartJS1.ChartType = ChartType.Bar; chartJS1.Labels = new string[] { “Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec” }; chartJS1.Options.Scales.xAxes[0].Type = ScaleType.Category; Thank you.
  • You must to post comments

Hi Tiago.

Thank you for the sample code. But the problem is not solved.

My explanation was not enough. I write below what I tried.

1. Create a new project and add Empty Page.
2. In the designer, drag and drop ChartJS from Wisej Extentions in the tool box to Page.
3. Change ChartType to Bar.
4. Write sample code.

The results are as per the sample project (ChartJS 1).

On the other hand, ChartJS 2 copied from GitHub’s sample project (ChartJS.sln) will be displayed without problems.

Also, the problem I wrote (data label remains, the “. Text” property is not reflected) is also in this project.

Thank you.

  • You must to post comments

Hi Masafumi,

Concerning  step 3 of Wisej-Example-ChartJS.docx, datasets created in the designer are no longer serialized. So for all purposes, you must follow another path: create the DataSet and add it to the ChartJS widget DataSets collection on the code behind file, say on the Load event handler. Populate the DataSet on initial page load and whenever you want to change the chart data.

Example for BarDataSet

BarDataSet barDataSet1 = new BarDataSet();
barDataSet1.BackgroundColor = new[]
    Color.FromArgb(49, 255, 0, 0),
    Color.FromArgb(58, 102, 255, 0),
    Color.FromArgb(52, 0, 183, 255),
    Color.FromArgb(53, 247, 0, 255),
    Color.FromArgb(52, 191, 123, 63),
    Color.FromArgb(53, 191, 63, 86),
    Color.FromArgb(104, 255, 0, 118),
    Color.FromArgb(237, 130, 237),
    Color.FromArgb(88, 64, 224, 208),
    Color.FromArgb(84, 255, 98, 70),
    Color.FromArgb(60, 41, 69, 70),
    Color.FromArgb(98, 0, 0, 128)
barDataSet1.BorderColor = null;
barDataSet1.Data = new object[] {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12};
barDataSet1.HoverBackgroundColor = null;
barDataSet1.Label = "Data Set";
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.