Multilevel labels

[alonekjco]

hi 

I want to create a chart like the attached image that uses two levels of labels.

I checked the demo on the site but could not solve the problem. Unfortunately, I did not find anything about this issue in the document.

  Thank you for your help

Attachment: multilevel_be2b3b0d.rar

[Durga Gopalakrishnan]

Hi alonekjco, 

Greetings from Syncfusion. 

We suggest you to use multilevel labels to achieve your reported scenario with border type as WithoutTopandBottomBorder for multilevel labels. Since axis labels and multilevel labels are customized separately border types are applicable from second level labels alone. 

Snippet : 

<ejs-chart id="container" load="onChartLoad"> 

    <e-chart-primaryxaxis multiLevelLabels="ViewBag.multiLevelLabels"></e-chart-primaryxaxis> 

</ejs-chart> 

<script> 

    onChartLoad = function (args) { 

        args.chart.primaryXAxis.multiLevelLabels = [ 

            { 

                border: { type: 'WithoutTopandBottomBorder' } 

                ] 

            }]; 

    } 

</script> 

public IActionResult Index() 

{ 

            List<ChartMultiLevelLabel> multilevels = new List<ChartMultiLevelLabel>(); 

            ChartMultiLevelLabel one = new ChartMultiLevelLabel(); 

            ChartCategory category = new ChartCategory(); 

            category.Start = "-0.5"; 

            category.End = "1.5"; 

            category.Text = "y1"; 

            //… 

            List<ChartCategory> categoryOne = new List<ChartCategory>(); 

            categoryOne.Add(category); 

            //…. 

            one.Categories = categoryOne; 

            multilevels.Add(one); 

            ViewBag.multiLevelLabels = multilevels; 

            return View(); 

} 

Screenshot : 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Multilevel-1304762120.zip 

UG : https://ej2.syncfusion.com/aspnetcore/documentation/chart/axis-labels/#multilevel-labels 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[alonekjco]

Thank

This method is good, but the problem is that the number is not fixed. For example, it may be as follows. The number will change each time. In this method, the range must be specified manually. What can be done about this problem?

name	value	cat
x1	15	y1
x2	18	y1
x3	12	y2
x4	21	y2
x5	66	y2
x6	21	y3
x7	17	y1
x8	19	y1
x9	34	y2

[Durga Gopalakrishnan]

Hi alonekjco, 

Most welcome. We request you to use chart refresh method by assigning the obtained new data for chart series datasource. Please check with the below snippet. 

var chartObj = document.getElementById("container").ej2_instances[0]; // to create chart instance 

      chartObj.series[0].dataSource = newData; 

      chartObj.refresh();  

Please revert us if you have any concerns. 

Regards, 

Durga G 

[alonekjco]

I think I could not explain what I meant

In this part of the code

--------------------------------------------------------------

 ChartCategory category = new ChartCategory(); 

            category.Start = "-0.5"; 

            category.End = "1.5"; 

            category.Text = "y1"; 

---------------------------------------------------------

You set the range manually. But a column may be added that makes the constraint larger, and this should be done automatically.

For example, the Y1 range is set from 0.5 to 1.5. If a column is added, this range will no longer be correct and should be -0.5 to 2

I want to explain more fully

We have categories that each category has children. For each category, a new child may be added in the future, which should display the new child column. This way it will not be right

[Baby Palanidurai]

Hi alonekjco, 

Thanks for update. 

We have checked your query. Multilevel labels range not automatically changed when data source changes. If you are setting -0.5 to 1.5, then add a new column data, multi-level labels range not changed automatically. You can change the end value of the multi-level labels.   

Kindly revert us, if you have any concerns. 

Regards, 

Baby. 

[alonekjco]

Thank you

Can you help me do this? I will explain below

I created this section in the controller with your help

------------------------------------------------------------------------------------------

ChartCategory category = new ChartCategory();
category.Start = "-0.5";
category.End = "1.5";
category.Text = "y1";
ChartCategory category1 = new ChartCategory();
category1.Start = "1.5";
category1.End = "4.5";
category1.Text = "y2";
ChartCategory category2 = new ChartCategory();
category2.Start = "4.5";
category2.End = "5.5";
category2.Text = "y3";
List categoryOne = new List();
categoryOne.Add(category);
categoryOne.Add(category1);
categoryOne.Add(category2);
one.Categories = categoryOne;
multilevels.Add(one);

------------------------------------------------------------------------------------------

How can I create an array in JavaScript from this?

categories: [

{ start: -0.5, end: 1.5, text: 'y1' },

{ start: 1.5, end: 4.5, text: 'y2' },

{ start: 4.5, end: 5.5, text: 'y3' }

]

I mean do not re-value the categories array. For example, Convert

ChartCategory category = new ChartCategory();
or 
 List<ChartCategory> categoryOne = new List<ChartCategory>();
or
 List<ChartMultiLevelLabel> multilevels = new List<ChartMultiLevelLabel>();




into

categories: [

{ start: -0.5, end: 1.5, text: 'y1' },

{ start: 1.5, end: 4.5, text: 'y2' },

{ start: 4.5, end: 5.5, text: 'y3' }

]

That is, the array categories[] are created from them automatically

[Durga Gopalakrishnan]

Hi alonekjco, 

We are validating your reported scenario. We will update the status within one business day(6^th July 2021). We appreciate your patience until then. 

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi alonekjco, 

Thanks for being patience. We request you to pass the assigned multilevel label values to JavaScript multilevel labels by following the below snippet. Please check with below snippet and sample. 

<script> 

    onChartLoad = function (args) { 

         levels = @Html.Raw(Json.Serialize(@ViewBag.multiLevelLabels)); 

         args.chart.primaryXAxis.multiLevelLabels = [ 

            { 

                border: { type: 'WithoutTopandBottomBorder' }, 

                categories: [ 

                    { start: parseFloat(levels[0].categories[0].start), end: parseFloat(levels[0].categories[0].end), text: levels[0].categories[0].text }, 

                    { start: parseFloat(levels[0].categories[1].start), end: parseFloat(levels[0].categories[1].end), text: levels[0].categories[1].text }, 

                    { start: parseFloat(levels[0].categories[2].start), end: parseFloat(levels[0].categories[2].end), text: levels[0].categories[2].text } 

                ] 

            }];        

    } 

</script> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Multilevellabels2069202725.zip 

Kindly revert us if you have any concerns. 

Regards,  

Durga G