Ideas

Tooltip Note(s) on {[ chart ]} Shortcode

6

Login To Vote

Tooltip Note(s) on {[ chart ]} Shortcode

CMS

We would like the ability to display additional information in the tooltips on chart data, specifically line charts, so you can have notes for particular ups or downs. Chart.JS supports an additional callback method "afterTitle" that would work perfect for this. We decided to implement an additional "tooltips" property on the dataset (or tooltip on individual data items) that works similarly to labels and data.

This is a preview of the desired result:

shortcodeResultSS.png


Here are the changes we made to accomplish this capability (original on left, changes on right):

shortcodeCodeCompare1.png

tooltips: [{{ dataitems | Map:'tooltip' | Join:'", "' | Prepend:'"' | Append:'"' }}]

shortcodeCodeCompare2.png

tooltips: [{{ dataset.tooltips }}]

shortcodeCodeCompare3.png

afterTitle: function(tooltipItems, data) {
  var tooltip = '';
      if (tooltipItems.length > 0) {
           var item = tooltipItems[0];
           var dataset = data.datasets[item.datasetIndex];
           if (dataset) {
                  var data = dataset.tooltips[item.index]
                  if (data) {
                      tooltip = data;
                  }
           }
       }
   return tooltip;
}

Photo of Nate HoffmanSubmitted by Nate Hoffman, Kingdom First Solutions Inc. (KFS)  ·   ·  CMS
Remove Votes
Login to add a comment...

Submission Success Tips

Cultivate your ideas for maximum impact with these helpful submission tips that will increase the chances of your brilliant concepts becoming reality.

  • Clear Title: Craft a straightforward and descriptive title that instantly conveys the essence of your idea.
  • Concise Description: Provide an idea description that is succinct, ensuring it effectively communicates the concept without unnecessary verbosity.
  • Provide Additional Details: With a concise description complete, now provide any other details that are needed to better understand the requirements.
  • Thorough Ministry Need Review: Provide a comprehensive overview of the ministry need your idea addresses, emphasizing its significance.
  • Cover the WHY: Clearly articulate the rationale behind your idea, explaining why it's essential and how it aligns with the organization's goals and mission. Oftentimes a clear "why" sheds light into other possible options.