0

I've been doing a lot of research but I wasn't able to figure it out, how to enter percentage into labels badge like this image below.

I'm using this laravel wrapper : https://github.com/ConsoleTVs/Charts

I just want to know the name of the option that plays with this. my code is this:

    $perTopicChart = (new AnsweredPerTopic);//->percentageInnerCutout(70);
        $perTopicChart->options([
            "events" => [],
            "legend" => [
                "labels" => [
                    "defaultFontFamily" => "Tahoma",
                    "fontSize" => 16,
                ],
                "position" => 'bottom'
            ],
            "cutoutPercentage" => 80,
            'tooltips' => [
                "show" => true
            ]
        ])->displayAxes(0);

        // put the labels (keys)
        $perTopicChart->labels($keys->map(function ($q) use ($perTopic) {
            $topic = Topic::find($q);
            $str = $topic->name;
            foreach ($perTopic as $key => $value) {
                if ($key == $q) {
                    $str .= ' ' . round($value) . '%';
                }
            }
            return "topic name " . '-'. $topic->id;

        })->push('other'))
        ->options([]);
        // get random color 
        // $color = RandomColor::many(count($keys), array(
        //     'luminosity' => 'bright',
        //     'hue' => ['pink', 'green', 'orange'] // e.g. 'rgb(225,200,20)'
        //     ));
        $color = [
            "#38c172",
            "#9F9",
            "#Fa0",
            "pink",
            "red",
        ];

        $perTopicChart->dataset("Practice per Category", "doughnut", $values->map(function ($q) {
            return round($q);
        })->push($remainingPercenteg))
            ->backgroundColor($color)
            ->options([
                'borderWidth' => 2.5,
            ]);

the first image the current result and the second is what I wanted. thanks in advance.

the current result what I want to achieve

Eissaweb
  • 142
  • 1
  • 10

0 Answers0