Topic: Show the value inside the Pie Chart

lucas.falcao free asked 6 years ago


How can I show the values without mouseover? The numbers inside of the colors the chart?

lucas.falcao free answered 6 years ago


Thanks for trying to help, but it doens't work well. I'm trying to show the Pie chart values without any event, show as a tooltip inside the respective area (something like the Polar Area Chart). With your reasoning I'm going to make some changes on my code!

Marta Wierzbicka staff answered 6 years ago


Hi, try this code:
$(function () {
            var data = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                }
            ]
           
            var option = {
            responsive: true,
            };
           
            // Get the context of the canvas element we want to select
            var ctx = document.getElementById("myChart").getContext('2d');
            var myPieChart = new Chart(ctx).Pie(data,option);

            $("#myChart").on('mouseleave', function (){
                myPieChart.showTooltip(myPieChart.segments, true);
            });
        });
Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags