Horizontal lines indicator

[Fernando]

Hi,

How can I get horizontal lines of indicators in the column chart as shown in this image. I would like it to behave like a caption, where I can click on the caption and make the lines visible or invisible. What is the best graph property to achieve this?

The values ​​of each line will be obtained by viewbag.

Thanks

Fernando

<ejs-chart textRender="onTextRender" height="230px" id="container" locale="pt" width="100%" theme="Fabric">
    <e-chart-primaryxaxis title="Tempo" valueType="Category" labelPlacement="OnTicks" interval="1">
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Volume (m³)"></e-chart-primaryyaxis>
    <e-series-collection>
        <e-series fill='#00afef' xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
            <e-data-manager url="/Poc/GraficoPoc_Read" adaptor="UrlAdaptor">
            </e-data-manager>
            <e-series-marker>
                <e-series-datalabel visible="true">
                    <e-font size="9" color="black"></e-font>
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>
 Copy

[Nishanthi Panner Selvam]

Fernando,

Greetings from Syncfusion.

We have analyzed your query based on that we can use stripline and annotation to meet your requirement. In chartMouseClick event we can toggle the visibility of the stripline when clicking on the annotation.

We have also attached code-snippet,  sample and screenshot for your reference.

Code-snippet:

<e-chart-primaryyaxis>

    <e-primaryyaxis-striplines>

        <e-striplines>

            <e-stripline visible="true" start="20" size="1" color="red"></e-stripline>

        </e-striplines>

    </e-primaryyaxis-striplines>

</e-chart-primaryyaxis>

    <e-chart-annotations>

        <e-chart-annotation content='<div style="width: 25px; height: 2px; pointer-events: none; border-style: solid;border-color: red;color:#ffd8b4"/></div>' x="valueX1" y="430px"></e-chart-annotation>

    </e-chart-annotations>

</ejs-chart>
function chartMouseClick(args) {

    if (args.target.includes('Annotation')) {

    const clickedAnnotationIndex = args.target.split('_')[2];

        const chart = document.getElementById('container').ej2_instances[0];

        if (clickedAnnotationIndex === '0' || clickedAnnotationIndex === '3') {

        const redStripline = chart.primaryYAxis.stripLines[0]; // Assuming red stripline is the first one

            if (!clicked) {

                redStripline.visible = false;

                clicked = true;

            }

            else {

                redStripline.visible = true;

                clicked = false;

            }

            if (!redStripline.visible) {

                chart.annotations[0].content = '<div style="width: 25px; height: 2px; pointer-events: none; border-style: solid;border-color: grey;color:#ffd8b4"/></div>';

                chart.annotations[3].content = '<div style="pointer-events: none; color: grey;">Maior</div>';

            }

            else {

                chart.annotations[0].content = '<div style="width: 25px; height: 2px; pointer-events: none; border-style: solid;border-color: red;color:#ffd8b4"/></div>';

                chart.annotations[3].content = '<div style="pointer-events: none; color: black;">Maior</div>';

            }

        }

}

 

Screenshot:

After Annotation Click	Before Annotation Click

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/chart/chart-annotations

                              https://ej2.syncfusion.com/aspnetcore/documentation/chart/strip-line

Kindly revert us if you have any concerns.

Regards,

Nishanthi

Attachment: Annotation_e004e861.zip