I want to make a donut chart using Highcharts, but I can't convert this chart to stacked form. The Vue.js code is as follows:
<template> <div> <b-col md="12" style="margin-top: 40px"> <highcharts :options="pieChartOptions"></highcharts> </b-col> </div> </template> <script> import axios from 'axios' import {mapActions} from "vuex"; import Highcharts from "highcharts"; import {Chart} from 'highcharts-vue' import DashboardTable from "../../components/DashboardTable/DashboardTable"; import Widget from '@/components/Widget/Widget'; export default { name:"TestChart", components: { DashboardTable, Widget, highcharts: Chart }, data(){ return{ pieChartOptions:{ colors: ['#01BAF2', '#71BF45', '#FAA74B', '#B37CD2'], chart: { type: 'pie' }, accessibility: { point: { valueSuffix: '%' } }, title: { text: 'Coffee' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.0f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '{point.name}: {y} %' }, showInLegend: true } }, series: [{ name: 'Types', colorByPoint: true, innerSize: '75%', data: [{ name: 'Filtre', y: 68.1, }, { name: 'Türk', y: 11.0 }, { name: 'Latte', y: 11.2 }, { name: 'Espresso', y: 9.7 }] }] } } }, } </script> <style> </style>
The chart I created looks like this:
I'm trying to provide a stacked donut chart in Elasticsearch. Here is an example:
Tried adding pronunciation after "name" and "y" without success. Also, do I need to add a subcategory to installed (or any method)? If you have any ideas about this, I'm waiting for your help.
To create this type of chart in Highcharts you can use the Sunburst Series type:
Example: https://jsfiddle.net/BlackLabel/2Ldpvogr/
Documentation: https://www.highcharts.com/docs/chart-and-series-types/pie-chart
Or two pie chart series with specified
size
andinnerSize
:Example: https://jsfiddle.net/BlackLabel/uogq3waf/
Documentation: https://www.highcharts.com/docs/chart-and-series-types/sunburst-series