JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RealChart - Visible</title>
<style>
html {
margin: 0px;
}
body {
margin: 20px 30px;
}
#realchart {
width: 850px;
height: 550px;
border: 1px solid lightgray;
margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realchart/realchart-style.css" rel="stylesheet" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/realchart/index"></script>
<script>
var realChartLic = 'upVcPE+wPOkOR/egW8JuxkM/nBOseBrflwxYpzGZyYkhw7qfHRQ+GiF0lY62mJi5KBwoSJHOA48O5+/xJSE3LhLB4LkQ8rWX0QeIbtyyIEGTFVqWmNPdyQ==';
</script>
</head>
<body>
<div id="realchart"></div>
</body></html>
JavaScript
const config = {
title: '2022년도 도시의 평균 대기질 지수',
xAxis: {
title: '수정구'
},
yAxis: {
title: '대기질 지수(Air Quality Index, AQI)'
},
legend: {
visible: true // <-- 여기 변경
},
series: {
pointLabel: {
visible: true,
numberSymbols: ""
},
data: [['신흥1동', 129012], ['신흥2동', 197960], ['신흥3동', 109959], ['태평1동', 146250], ['태평2동', 146270], ['태평3동', 126409], ['태평4동', 122079]]
},
ChartTextEffect: {
autoContrast: false
}
};
RealChart.createChart(document, 'realchart', config);