Changing pie chart colors and tool tip



  • Steve Niles

    Hi Jaime,

    I'm assuming you're modifying the Pie Chart report in the Standard Reports folder.

    Your first question was regarding the colors of the pie chart "wedges".  The pie char colors can be set by adding this line in the properties array for the pie chart in the addPieChart function:
    { Name: VS.PieChart_Properties.DataSetColors, Value: "#FF0000, #00FF00, #0000FF"},
    You can add as many colors to that list as you like, and they'll be used in sequence (1st color will be assigned to the first wedge, 2nd color will be used by the 2nd wedge, etc).  They are documented in the VisualScript SDK document, under the VSGraph section, in the SetProperties subsection (dataSetColors)  (
    In answer to your second question (about the tooltip table):   there's not an option to always expand that, but you can add a table that always is displayed.  To do that, in the buildVSON function (right under the call to addPieChart) add the following code to add a table beneath the pie chart:
    addStatsTable(model.targets, mainContainer, {
                rowHeaderLabel: getNiceTargetLabel(),
                getRowHeaderLabel: target =>,
                columnData: [
                        getHeader: () => getNiceDataTypeLabel(),
                        getIssues: target => target.issues,
    Those 2 changes will give you this sort of output:
    You can play with centering the table beneath the pie by modifying the SetAlighnH to VS.TextAlignH.Middle in the mainContainer in the buildVSON function
    Comment actions Permalink
  • Jaime Salazar

    Hi Steve,

    Thanks a lot. This answers both of my questions well.

    I guess the only thing I'm missing is the title's alignment. I've played around with all the VS.TextAlignH that I could find, and that's produced some decent alignment between the pie chart and the table but the chart's title is always too far left IMO, basically like you show in your screencap. It's already set with { Name: VS.PieChart_Properties.TitlePos, Value: "Top" } and playing around with "topright" doesn't seem to work.

    Any tips on how to center that title?


    Comment actions Permalink
  • Steve Niles

    If  you use value of "topleft" (all lowercase) it will adjust the title to appear more shifted to the right.  It uses the left half of the area as the centering point for the title, which (in this case) has the effect of shifting to the right.

    If that doesn't meet your needs, you can get rid of the title that's embedded in that pie chart, and instead add a title text shape above the pie chart shape.  Let me know if you'd like information about that.

    Comment actions Permalink
  • Jaime Salazar

    The value of "topleft" does indeed seem to move the title to the right although it doesn't work well for most of my titles.

    Therefore, I've played around with VS.Document.AddTitle(), which is what I suppose you were hinting at, and it works quite well. So thanks a lot for your help!

    Comment actions Permalink

Please sign in to leave a comment.