Custom Colors and legend

Question

Hi I have pie chart that I will include a picture of down below. This chart has 2 different series. I would like to set custom palettes for each series rather than the whole chart. I would also like the legend to itemize the series instead of having series 0 and series 1 label. Finally, When the chart is not big enough to display labels inside, the label is drawn near the title which looks weird. How can I control where the '6%' label is drawn? Thanks.

Dharanidharan Dharmasivam · Answer

Hi Caleb, 

Kindly find the response for your queries form below. 





Query 

Response 


I would like to set custom palettes for each series rather than the whole chart 

We would like to let you know that, as of now for accumulation type charts, when colors were specified using palette property, then it will be applied to each points in the all the series. We suspect that, you requirement is to apply unique colors to different series and points. If so, then it can be achieved by specifying the fill color to each points in the series. Find the code snippet to achieve this requirement. 





JS: 

$("#container").ejChart({ 
    series: [{ 
                        points: [ 
                            { x: 'Asia', y: 50, fill: "#34e2d3" }, 
                            { x: 'America', y: 5, fill: "#36fe3a" }, 
                            //... 
                        ], 
                }], 
}); 


Sample for reference can be find from below link. 
https://jsplayground.syncfusion.com/ggxyox1d  



I would also like the legend to itemize the series instead of having series 0 and series 1 label 

To customize the name of the legend, you can specify the required text in the series.name property as depicted below. 





JS: 

$("#container").ejChart({ 
    series: [{ 
                        name: "Continents", 
                        //... 
                },{ 
                        name: "Countries", 
                        //... 
                }], 
}); 


Sample for reference can be find from below link. 
https://jsplayground.syncfusion.com/kyxcu2au  



When the chart is not big enough to display labels inside, the label is drawn near the title which looks weird. How can I control where the '6%' label is drawn? 

To avoid such scenarios, you can place the label inside the chart by reducing the font size of the data label. Find the code snippet below to achieve this requirement. 






JS: 

$("#container").ejChart({ 
    series: [{ 
                     marker: { 
                        dataLabel: { 
                            visible: true, 
                            font: { 
                                //Specify the font size 
                                size: '12px', 
                                //Specify the font color 
                                color: 'White' 
                            }, 
                        } 
                    }, 
                    //... 
                }], 
       //... 
                 
}); 



Also, you can able to customize the color of  the data label text as highlighted above. 

Sample for reference can be find from below link. 
https://jsplayground.syncfusion.com/01rweky2 


Thanks, 
Dharani.

Caleb Kliewer · Answer

Thanks! I have a few more questions. I would like to move the legend for the pie chart to the left. I would also like to move it to the top after the screen has been resized to a certain width. When it's big I would like it to the side and small I would like the legend on top. I would also like to get rid of the border around the bar charts as well as right the x-label name inside the bar along with the y value (ex: Gold medal: 50). Thanks for the help!

Caleb Kliewer · Answer

To add to this, how can I change the font color of the title?

Dharanidharan Dharmasivam · Answer

Hi Caleb, 

Kindly find the solution for your queries from below. 





Query 

Response 


 I would like to move the legend for the pie chart to the left. I would also like to move it to the top after the screen has been resized to a certain width. When it's big I would like it to the side and small I would like the legend on top. 

Your requirement can be achieved using the beforeResize event of the chart. Here you can able to get the current size of chart, so with respect to the size, you can position the legend with respect to your requirement.  

We have prepared a sample in which initially legend is rendered at the bottom, then on resize, we have positioned the legend to top when the width is less than 500 and to left for width greater than 500. Find the code snippet below to achieve this requirement. 





JS: 

$("#container").ejChart({ 
           beforeResize:"resize" 
}); 
 
function resize(args){ 
            if(args.data.newWidth < 500) args.model.legend.position = "Top" 
            else args.model.legend.position = "Left";  
      } 


Sample for reference can be find from below link. 
http://jsplayground.syncfusion.com/4zczxhd2  

For more information on legend, kindly find the help document. 



I would also like to get rid of the border around the bar charts as well as right the x-label name inside the bar along with the y value 

For the given screenshot, we could not find any borders around the bar charts, so kindly provide us more information on this query, which will be helpful in providing solution at earlier. 


how can I change the font color of the title? 

You can change the font color of the title with the below code snippet. 





$("#container").ejChart({ 
                title: { 
                        text: 'Expenditures', 
                        font: { color: "Red" } 
                    }, 
}); 


Sample for reference can be find from below link. 
http://jsplayground.syncfusion.com/n2bfqq03  

For more information title, kindly find the help document. 


Thanks, 
Dharani.