pie question

[jewon7377]

Translated

I have a question about data exposure using the form of a pie.

1. The data that looks like the attached image is displayed as a percentage. Is there any way to expose 77 cases of data?
2. Is there any way to expose the data inside the doughnut in radius range?
   Thank you.

Original

pie형태를 이용한 데이터 노출에 대해 문의드립니다.

1. 첨부이미지 처럼 보이는 데이터가 %로 표시가 되는데요. 77건이라는 데이터가 노출되게 하는 방법이 없는지요.
2. radiusRange 에서 도넛안쪽에 데이터를 노출하는 방법은 없는지요?
   감사합니다.
   

[jwlee1108]

@jewon7377

Thank you for using 'tui.chart'.
There are many people who use English in tui.chart.
It may be inconvenient, but I think using the community in English is also contributing to open source.

Neither is supported. But I thought of a detour.

1. You can use formatter option. but, But the process of finding the value needs your logic.

type options = {
  ...
  series: {
    dataLabels: {
      visible?: boolean;
      anchor?: 'center' | 'outer';
      offsetX?: number;
      offsetY?: number;
      formatter?: (value) => string;
      pieSeriesName?: {
        visible: boolean;
        anchor?: 'center' | 'outer';
      };
    };
  };
};

2. You create a brand new <canvas> and it is set with absolute position to overlay tui.chart. and set the value with the proper location.

[jewon7377]

Hi. When using a toast chart, Can I use multiple "columnLineCharts" in the dashboard? I'd like to ask how you can use it. Message ID: ***@***.***>

[jwlee1108]

@jewon7377 You can make multiple instances. As you know, you can set a target element to display a chart. so, you can make another chart instance.

el1 = document.querySelector('#el1');
el2 = document.querySelector('#el2');
const chartForEl1 = Chart.columnLineChart({el1, data, options});
const chartForEl2 = Chart.columnLineChart({el2, data, options});

[jewon7377]

Hello.
Is there a way to change the color of the text in the square box like the attached image in the toast chart?

[jwlee1108]

@jewon7377
Next time, please post a new issue according to the title. It's not a thread.

You can check the tooltip theme feature. this is a link

[jewon7377]

Hello I want to apply columnChart and columnLineChart on one screen at the same time, but the screen is not exposed. Please check which side is the problem. example) <script type="text/javascript" > $(function() { //-- Toast Chart (column) const el1 = document.getElementById('chart-area'); const data = { categories: ['<?php echo $prev_date7 ?>', '<?php echo $prev_date6 ?>', '<?php echo $prev_date5 ?>', '<?php echo $prev_date4 ?>', '<?php echo $prev_date3 ?>', '<?php echo $prev_date2 ?>', '<?php echo $prev_date1 ?>'], series: [ { name: '주문접수', data: [<?php echo $order_oa ?>] }, { name: '결제/배송', data: [<?php echo $order_oy ?>] }, { name: '주문취소', data: [<?php echo $order_oc ?>] } ] }; const options = { usageStatistics: false, chart: { width: 'auto', height: 'auto', title: '', format: '1,000' }, theme: { legend: { label: { fontSize: 12, fontFamily: 'Lato' } }, yAxis: { title: '', label: { fontFamily: 'Lato', fontSize: 12, formatter: (value) => `${value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')} 원` }, }, xAxis: { title: '', label: { fontFamily: 'Lato', fontSize: 12 } }, }, exportMenu: { visible: false }, tooltip: { //formatter: (value) => `${value} 원`, formatter: (value) => `${value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')} 원` }, legend: { align: 'top', visible: true, }, }; const chart = toastui.Chart.columnChart({el1, data, options}); const el2 = document.getElementById('chart-area2'); const data = { categories: ['<?php echo $prev_date7 ?>', '<?php echo $prev_date6 ?>', '<?php echo $prev_date5 ?>', '<?php echo $prev_date4 ?>', '<?php echo $prev_date3 ?>', '<?php echo $prev_date2 ?>', '<?php echo $prev_date1 ?>'], series: { column: [ { name: 'Visitors', data: [<?php echo $total_mem_con ?>] }, { name: 'PC', data: [<?php echo $pc_total_mem_con ?>] }, { name: 'MOBILE', data: [<?php echo $mo_total_mem_con ?>] }, ], line: [ { name: 'Avg', data: [<?php echo $avg_mem_con ?>], }, ], }, }; const options = { usageStatistics: false, chart: { //width: '100%', //height: '29.4vh', width: 'auto', height: 'auto', title: '' }, theme: { legend: { label: { fontSize: 12, fontFamily: 'Lato' } }, yAxis: { title: '', label: { fontFamily: 'Lato', fontSize: 12 } }, xAxis: { title: '', label: { fontFamily: 'Lato', fontSize: 12 } }, }, exportMenu: { visible: false }, tooltip: { formatter: (value) => `${value} 명`, }, legend: { align: 'top', visible: true, }, }; const chart = toastui.Chart.columnLineChart({el2, data, options}); }); </script>

…

-----Original Message----- From: ***@***.***> To: ***@***.***>; Cc: ***@***.***>; ***@***.***>; Sent: 2022-05-04 (수) 09:17:02 (GMT+09:00) Subject: Re: [nhn/tui.chart] pie question (Discussion #739) @jewon7377 You can make multiple instances. As you know, you can set a target element to display a chart. so, you can make another chart instance. el1 = document.querySelector('#el1'); el2 = document.querySelector('#el2'); const chartForEl1 = Chart.columnLineChart({el1, data, options}); const chartForEl2 = Chart.columnLineChart({el2, data, options}); — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>