How to Change the Color of Distribution Line in Vue Histogram Chart?

Description

This article explains how to change the color of the distribution line in a histogram Vue Chart

Solution

To change the color of the distribution line in a histogram chart, you can use the document.querySelector method to select the SVG element whose id contains “Histogram_Series_0_NDLine”. This element represents the distribution line. Once selected, you can modify its stroke color using setAttribute(“stroke”, “red”). This logic should be placed inside the chart’s loaded event to ensure the element is available in the DOM when the chart finishes rendering.

Here’s how you can implement it:

<template>
 <div class="control-section">
     <ejs-chart
       id="chartHistogram"
       :loaded="onChartLoaded"
     >
       <e-series-collection>
         <e-series
           type="Histogram"
           yName="Score"
           name="Score"
           :dataSource="chartData"
         >  .....
         </e-series>
       </e-series-collection>
     </ejs-chart>
 </div>
</template>
<script>
export default {
 methods: {
   onChartLoaded: function (args) {
     let distLine = document.querySelector(
       '[id*="Histogram_Series_0_NDLine"]'
     );

     if (distLine) {
       distLine.setAttribute('stroke', 'red');
     }
   },
 },
 .......
};
</script> 

Please note that using a partial match selector ([id=“Histogram_Series_0_NDLine”])* may also select other elements with similar IDs, so ensure the selector targets the correct element in your chart.

Screenshot

Live Sample

StackBlitz Sample

Conclusion

I hope you enjoyed learning about how to change the color of distribution line in Vue Histogram Chart.

You can refer to our Vue Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Vue Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our Vue components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Vue Chart and other Vue components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!