{"id":2069,"date":"2026-07-27T01:16:35","date_gmt":"2026-07-27T01:16:35","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/line-chart-trend-tracking-and-continuous-data-guide\/"},"modified":"2026-07-27T01:16:35","modified_gmt":"2026-07-27T01:16:35","slug":"line-chart-trend-tracking-and-continuous-data-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/","title":{"rendered":"Grafik Garis: Pelacakan Tren dan Data Berkelanjutan"},"content":{"rendered":"<p>Ketika melacak perkembangan berkelanjutan atau perubahan deret waktu, <strong>Grafik Garis<\/strong> berfungsi sebagai alat visual utama. Berbeda dengan grafik batang atau kolom diskret yang fokus pada perbandingan kategori individu, grafik garis menekankan koneksi dan kemiringan untuk menyoroti <em>momentum, musiman, dan perubahan mendadak pada metrik<\/em> di atas urutan yang tak terputus, seperti pertumbuhan pengguna aktif harian, pendapatan berulang bulanan, atau aliran data telemetri sensor.<\/p>\n<h2>Mekanisme Grafik Garis<\/h2>\n<p>Dalam Apache ECharts, visualisasi garis dikonfigurasi dengan mengatur properti series <code>type<\/code> properti menjadi <code>'line'<\/code>. Grafik garis menghubungkan titik-titik data yang diurutkan secara berurutan sepanjang sumbu horizontal skala kategorikal atau waktu yang kontinu (<code>xAxis<\/code>) dan memetakan nilai numerik yang kontinu ke sumbu vertikal (<code>yAxis<\/code>).<\/p>\n<h3>1. Pengaturan Dasar<\/h3>\n<p>Untuk membuat grafik garis dasar, tentukan kategori berkelanjutan Anda sepanjang sumbu X dan peta dataset Anda ke objek series dengan <code>type: 'line'<\/code>:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1Tj0LwjAQ3QX\/w21ZMvRTpeLg4uak4FA6BHvUQElKmkqL9L97aZGmgxneu\/fuXe50Y6VWcILPdgP0rNa1lU3205NnZFWhyYCJXrZsbox85v5M3jo+NEjZp7BYaTMwvrRKYUUGObtqxTiwe4eOHlhO6tU5uhjp6CbsRJ1ixXrj8G\/jW9T04TrcopFI6XxJe4PecC0V+qd654ZpwCGKHUQJQXjgEMYpQbInuQuKZWycS3LG4xdnjU5t\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1Tj0LwjAU3AX\/Q7YsGfqpUnFwVVzsWDpEfZRATEqaSov0v\/vSIG0FM9zl3bvjna6t0IocyHu9Ivis1tKKOvvOo2ZEVYHJCOWdaKhfDMxzd0Rtae9rQO+dW6i06SmbVg9ueUYKmoOijCBJR1d+c3TmT0endqTcixehaLm82P+7+OKyhZ96DRgB6C4m9yw4C0uhYF51VjdMA0ai2EGUIIQ7RsI4RUi2OG6CcooN\/ovKsP8ALG9OIw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        trigger: 'axis'\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'line',\r\n            data: [150, 230, 224, 218, 135, 147, 260]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1Tj0LwjAU3AX\/Q7YsGfqpUnFwVVzsWDpEfZRATEqaSov0v\/vSIG0FM9zl3bvjna6t0IocyHu9Ivis1tKKOvvOo2ZEVYHJCOWdaKhfDMxzd0Rtae9rQO+dW6i06SmbVg9ueUYKmoOijCBJR1d+c3TmT0endqTcixehaLm82P+7+OKyhZ96DRgB6C4m9yw4C0uhYF51VjdMA0ai2EGUIIQ7RsI4RUi2OG6CcooN\/ovKsP8ALG9OIw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1Tj0LwjAQ3QX\/w21ZMvRTpeLg4uak4FA6BHvUQElKmkqL9L97aZGmgxneu\/fuXe50Y6VWcILPdgP0rNa1lU3205NnZFWhyYCJXrZsbox85v5M3jo+NEjZp7BYaTMwvrRKYUUGObtqxTiwe4eOHlhO6tU5uhjp6CbsRJ1ixXrj8G\/jW9T04TrcopFI6XxJe4PecC0V+qd654ZpwCGKHUQJQXjgEMYpQbInuQuKZWycS3LG4xdnjU5t\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"iFKborZ\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-1296\" decoding=\"async\" fetchpriority=\"high\" height=\"1289\" sizes=\"(max-width: 1222px) 100vw, 1222px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e.png 1222w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e-284x300.png 284w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e-971x1024.png 971w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e-768x810.png 768w\" width=\"1222\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Teknik Struktural Lanjutan<\/h2>\n<p>Grafik garis menawarkan fleksibilitas untuk overlay multi-metrik, kurva interpolasi halus, dan indikator titik data yang disesuaikan.<\/p>\n<h3>1. Kurva Interpolasi Halus<\/h3>\n<p>Secara default, seri garis menghubungkan titik data dengan segmen garis lurus. Mengaktifkan <code>smooth: true<\/code> menerapkan interpolasi spline kubik untuk menciptakan jalur garis melengkung dan organik melintasi dataset Anda:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1ULsOwjAM3JH4h0gMWTL0watBDCwMSEyMiCEUq0QKdRVSIEL9dxIK6gPhIWf7zjo7WBiJOVmS53BAXBhEZWTBv\/W7p2WWgeaEioe80pqoWI2Plet15bYAp02FgQy1payhTsIITvZ0I3LKCF3D0cNWaA+rQteV9bApc3roWtl\/VjehSujtdQUtwan3jbo12BpWMof2ju\/hC6I5c3d5CT3qc8I8ChhJ4sg9QeizMSNhlLhmGMfBoTfkPXbGKuD9JXzc5cmbxeyXSlGh\/\/jRZDwL0intKqqm\/KTux6rFC0ykZiw=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1ULsKwjAU3QX\/IeCQJUMfvhpxcHEQOjmKQ6yXGoi9JabaIv13k6r0Id4h5z7O4dwbzI3EjKzJczwiNgyiMjLn37rpaZmmoDmhopQ3+h7U7I3lxvb69CoHy02EgRR1RVk7OgsjODnQncgoI3QLJwex0A42eQMxSAe7IqPHvlX1z+ouVAGDvW6gJVj2oWV3hB2xkhl0d2zEV0Rz4fbyAgajzwnLwGMkCgP7eL7Lpoz4QWSbfhh6x4HIeexNpYAPl3DxkGdnFrLfUYIK3cdPZtOFl8xpn1G35Se1P1avXj2oZiA=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        trigger: 'axis'\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'line',\r\n            smooth: true,\r\n            data: [820, 932, 901, 934, 1290, 1330],\r\n            lineStyle: {\r\n                width: 3,\r\n                color: '#5470c6'\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1ULsKwjAU3QX\/IeCQJUMfvhpxcHEQOjmKQ6yXGoi9JabaIv13k6r0Id4h5z7O4dwbzI3EjKzJczwiNgyiMjLn37rpaZmmoDmhopQ3+h7U7I3lxvb69CoHy02EgRR1RVk7OgsjODnQncgoI3QLJwex0A42eQMxSAe7IqPHvlX1z+ouVAGDvW6gJVj2oWV3hB2xkhl0d2zEV0Rz4fbyAgajzwnLwGMkCgP7eL7Lpoz4QWSbfhh6x4HIeexNpYAPl3DxkGdnFrLfUYIK3cdPZtOFl8xpn1G35Se1P1avXj2oZiA=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp1ULsOwjAM3JH4h0gMWTL0watBDCwMSEyMiCEUq0QKdRVSIEL9dxIK6gPhIWf7zjo7WBiJOVmS53BAXBhEZWTBv\/W7p2WWgeaEioe80pqoWI2Plet15bYAp02FgQy1payhTsIITvZ0I3LKCF3D0cNWaA+rQteV9bApc3roWtl\/VjehSujtdQUtwan3jbo12BpWMof2ju\/hC6I5c3d5CT3qc8I8ChhJ4sg9QeizMSNhlLhmGMfBoTfkPXbGKuD9JXzc5cmbxeyXSlGh\/\/jRZDwL0intKqqm\/KTux6rFC0ykZiw=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"AVyGyBw\"><img alt=\"\" class=\"alignnone size-full wp-image-1297\" decoding=\"async\" height=\"1293\" sizes=\"(max-width: 1241px) 100vw, 1241px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b42a95e4b.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b42a95e4b.png 1241w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b42a95e4b-288x300.png 288w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b42a95e4b-983x1024.png 983w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b42a95e4b-768x800.png 768w\" width=\"1241\"\/><\/p>\n<p>\u00a0<\/p>\n<h3>2. Perbandingan Kinerja Multi-Garis<\/h3>\n<p>Bandingkan metrik sekunder di seluruh interval waktu yang identik dengan menyediakan beberapa objek garis di dalam <code>series<\/code> array:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqtkT1PwzAQhnck\/sNJDF4y5KuUBjEg\/kAlBoaqg+WcgoWTixynalTlv3Nu+kGMEAx4SF77Xt+bJ0et09TAExxub4CXIzJOt8V5fzyzuqrQFiDkXndiKozR9DZYYVPO\/KV0soCNeOmtxcbBGq2mUkQg1hZ3mvrufLSd99o\/c\/959NAi5yrpsCI7iOh7yhviByS++1GlF5VdVB4GDT8F7aTpMSDs+FuR3Zur+8tFvxpZ+8sh79x0SjC6wbDU1UTuveAf3WNQOlFmaRxBlqX8iBOv8m1g1A7rVzcYzjiAIkN+XneLfBmrewHj1TxGv3GEU\/pPkNSDJA8MkqwYJP0ryCpRarmYg0ySRzs+fgJctqZJ\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqtkT9rwzAQxfdCv8NBBy0a\/C9N49KhY4dCIWPIoNqHIpAlY8slJvi791S72FYoZKgG61n3zs8\/na2dsgZe4HJ\/B7SctdqpOv99\/zlrlJTY5MDEWbVsLAx83DVKNOXKXwoncjiwD2yULRH2Qjh4M4pxmM\/wE3VXmV6w4\/qD51cKWef3NVJ4IRxK2\/SMX0e9KyNlB7GPmHSy0OlCZ2Fg\/1fgl9AdBrgt\/T+S+zC7F41+GVH55mv4tW3K0MpgWGora90pp3vvMChNvGkScUjThB5R7FV2DIzKYbV3vaaMCxRWWz++h022jYpHBsNsHvjNJPPI\/pMl8SzxE7HEO2JJbmXZxUWx3axZRknzHZ6\/AS7trIU=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        trigger: 'axis'\r\n    },\r\n    legend: {\r\n        data: ['Periode Saat Ini', 'Periode Sebelumnya']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Minggu 1', 'Minggu 2', 'Minggu 3', 'Minggu 4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Periode Saat Ini',\r\n            type: 'line',\r\n            smooth: true,\r\n            data: [320, 332, 301, 334],\r\n            itemStyle: { color: '#5470c6' }\r\n        },\r\n        {\r\n            name: 'Periode Sebelumnya',\r\n            type: 'line',\r\n            smooth: true,\r\n            data: [220, 182, 191, 234],\r\n            itemStyle: { color: '#91cc75' }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqtkT9rwzAQxfdCv8NBBy0a\/C9N49KhY4dCIWPIoNqHIpAlY8slJvi791S72FYoZKgG61n3zs8\/na2dsgZe4HJ\/B7SctdqpOv99\/zlrlJTY5MDEWbVsLAx83DVKNOXKXwoncjiwD2yULRH2Qjh4M4pxmM\/wE3VXmV6w4\/qD51cKWef3NVJ4IRxK2\/SMX0e9KyNlB7GPmHSy0OlCZ2Fg\/1fgl9AdBrgt\/T+S+zC7F41+GVH55mv4tW3K0MpgWGora90pp3vvMChNvGkScUjThB5R7FV2DIzKYbV3vaaMCxRWWz++h022jYpHBsNsHvjNJPPI\/pMl8SzxE7HEO2JJbmXZxUWx3axZRknzHZ6\/AS7trIU=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNqtkT1PwzAQhnck\/sNJDF4y5KuUBjEg\/kAlBoaqg+WcgoWTixynalTlv3Nu+kGMEAx4SF77Xt+bJ0et09TAExxub4CXIzJOt8V5fzyzuqrQFiDkXndiKozR9DZYYVPO\/KV0soCNeOmtxcbBGq2mUkQg1hZ3mvrufLSd99o\/c\/959NAi5yrpsCI7iOh7yhviByS++1GlF5VdVB4GDT8F7aTpMSDs+FuR3Zur+8tFvxpZ+8sh79x0SjC6wbDU1UTuveAf3WNQOlFmaRxBlqX8iBOv8m1g1A7rVzcYzjiAIkN+XneLfBmrewHj1TxGv3GEU\/pPkNSDJA8MkqwYJP0ryCpRarmYg0ySRzs+fgJctqZJ\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"rpaJWLs\"><img alt=\"\" class=\"alignnone size-full wp-image-1298\" decoding=\"async\" height=\"1372\" sizes=\"(max-width: 1222px) 100vw, 1222px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b43633b51.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b43633b51.png 1222w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b43633b51-267x300.png 267w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b43633b51-912x1024.png 912w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b43633b51-768x862.png 768w\" width=\"1222\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Penyesuaian Halus Isi Area dan Titik Data<\/h2>\n<p>Deret garis dapat ditingkatkan secara visual menggunakan isian gradien latar belakang yang halus dan penanda data yang ditargetkan untuk menarik perhatian pada tonggak penting.<\/p>\n<h3>1. Penataan Gaya Area Garis<\/h3>\n<p>Menambahkan <code>areaStyle<\/code>properti mengubah grafik garis standar menjadi tampilan area, mengisi wilayah antara jalur garis dan sumbu horizontal:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp9UctqwzAQvBf6Dws9qAXTyLKdOCo95NQPyDHkoNgbV6BYQVbaqMX\/XimxcWJw9zCM2NnHaPXRSl3DO\/w+PoCP8+osG96\/Qlh3RA6kEBYrbRyJhtROn+pSGPchjhz2QjUYwWwGKyWrGpSsEUppsLDKgdUgfGfAssJm6FAKKzhsCKWcUhIBoWlP8o7ErCfzjrBezBKeLcn22q7tFnNTDr6EOiG5FzdoJHr1ZlDfFN4UBze31i\/FB63tJwdrTjhKdb4SSiNgeYDMQ7b0kDMPi9hDmtDtqE4YFGvrFPLxHiEKrbTxy5hqJ57zNII4Zh6WeQT0lWUvJPz+Wu8t7KVS4I+D5nKH+1btaGhQTA\/9lmUwmUTT+zxl6YIWc\/L\/mMYddlqt5Y+fkw+p9kr9Fdu3P3vXkUs=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp9UctqwzAQvBf6Dws9qAXRyK\/EUemhp9JzjiGHdaw6IoplJLmJW\/zvlRsbJ4Z0D8OIfcyOVldO6hJe4ef+Dnyc3k7S8uHVhWsqwYFs0YlCm4bQMZXpuszRNO9YcfhEZQWF2QxWwtYo91hCgUZaUFgWti4L2AtwopJg60NWj2NydMhhTRjjjBEKhMUDSXsShAOZ9yQcisOIJ0uyOY9r++2aWza+UNWCXBdbYaTw1eux+qLxolnJUlz6\/2s+aO12HJypxSTV+4oYoxCmHSQekqWHNPSwCDzEEdtM+tAIXLlGCT7do4utVtr4ZUyR4WMaUwiC0MMypcCew+SJdCf4sNJ\/vxL+nx3kEjI84u58juuJ7US7s3hb+yjzzmtEb6\/1kMQLtp2T\/2Vsc8i0Wslvr5OOqfZM\/THbl1+s8pX5\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    xAxis: {\r\n        type: 'category',\r\n        boundaryGap: false, \/\/ Sesuaikan garis langsung ke tepi sumbu\r\n        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'line',\r\n            smooth: true,\r\n            data: [300, 280, 250, 590, 820, 710, 430],\r\n            areaStyle: {\r\n                color: 'rgba(84, 112, 198, 0.25)' \/\/ Isian lembut di bawah garis\r\n            },\r\n            lineStyle: {\r\n                width: 3,\r\n                color: '#5470c6'\r\n            },\r\n            symbolSize: 8\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp9UctqwzAQvBf6Dws9qAXRyK\/EUemhp9JzjiGHdaw6IoplJLmJW\/zvlRsbJ4Z0D8OIfcyOVldO6hJe4ef+Dnyc3k7S8uHVhWsqwYFs0YlCm4bQMZXpuszRNO9YcfhEZQWF2QxWwtYo91hCgUZaUFgWti4L2AtwopJg60NWj2NydMhhTRjjjBEKhMUDSXsShAOZ9yQcisOIJ0uyOY9r++2aWza+UNWCXBdbYaTw1eux+qLxolnJUlz6\/2s+aO12HJypxSTV+4oYoxCmHSQekqWHNPSwCDzEEdtM+tAIXLlGCT7do4utVtr4ZUyR4WMaUwiC0MMypcCew+SJdCf4sNJ\/vxL+nx3kEjI84u58juuJ7US7s3hb+yjzzmtEb6\/1kMQLtp2T\/2Vsc8i0Wslvr5OOqfZM\/THbl1+s8pX5\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#echarts:eNp9UctqwzAQvBf6Dws9qAXTyLKdOCo95NQPyDHkoNgbV6BYQVbaqMX\/XimxcWJw9zCM2NnHaPXRSl3DO\/w+PoCP8+osG96\/Qlh3RA6kEBYrbRyJhtROn+pSGPchjhz2QjUYwWwGKyWrGpSsEUppsLDKgdUgfGfAssJm6FAKKzhsCKWcUhIBoWlP8o7ErCfzjrBezBKeLcn22q7tFnNTDr6EOiG5FzdoJHr1ZlDfFN4UBze31i\/FB63tJwdrTjhKdb4SSiNgeYDMQ7b0kDMPi9hDmtDtqE4YFGvrFPLxHiEKrbTxy5hqJ57zNII4Zh6WeQT0lWUvJPz+Wu8t7KVS4I+D5nKH+1btaGhQTA\/9lmUwmUTT+zxl6YIWc\/L\/mMYddlqt5Y+fkw+p9kr9Fdu3P3vXkUs=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit ECharts di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"EAwGqGP\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-1299\" decoding=\"async\" height=\"1288\" loading=\"lazy\" sizes=\"auto, (max-width: 1270px) 100vw, 1270px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b4440f3b7.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b4440f3b7.png 1270w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b4440f3b7-296x300.png 296w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b4440f3b7-1010x1024.png 1010w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b4440f3b7-768x779.png 768w\" width=\"1270\"\/><\/p>\n<p>\u00a0<\/p>\n<h2>Praktik Terbaik Strategis<\/h2>\n<ul>\n<li><strong>Gunakan <code>boundaryGap: false<\/code> untuk Urutan Waktu:<\/strong> Menghilangkan jarak tepi bawaan pada sumbu waktu kontinu memungkinkan garis dimulai langsung dari margin nol untuk tampilan bersih dari ujung ke ujung.<\/li>\n<li><strong>Jaga Jumlah Garis Tetap Rendah:<\/strong>Hindari menampilkan lebih dari 4 hingga 5 garis dalam satu kanvas. Grafik garis yang terlalu padat (&#8216;grafik spaghetti&#8217;) dengan cepat menjadi tidak dapat dibaca.<\/li>\n<li><strong>Pemicu Tooltip Sumbu<\/strong>Selalu konfigurasi<code>tooltip: { trigger: 'axis' }<\/code>sehingga pengguna dapat mengarahkan kursor di sepanjang titik horizontal mana pun untuk melihat nilai-nilai yang tepat dari semua seri garis aktif secara bersamaan.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ketika melacak perkembangan berkelanjutan atau perubahan deret waktu, Grafik Garis berfungsi sebagai alat visual utama. Berbeda dengan grafik batang atau kolom diskret yang fokus pada perbandingan kategori individu, grafik garis menekankan koneksi dan kemiringan untuk menyoroti momentum, musiman, dan perubahan&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":5,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2069","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ECharts Line Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Plot continuous data trends over time using ECharts line chart scripts in VPasCode, a free diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Line Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Plot continuous data trends over time using ECharts line chart scripts in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/line-chart-trend-tracking-and-continuous-data-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/line-chart-trend-tracking-and-continuous-data-guide\\\/\",\"name\":\"ECharts Line Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/line-chart-trend-tracking-and-continuous-data-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/line-chart-trend-tracking-and-continuous-data-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b41f81b9e.png\",\"datePublished\":\"2026-07-27T01:16:35+00:00\",\"description\":\"Plot continuous data trends over time using ECharts line chart scripts in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/line-chart-trend-tracking-and-continuous-data-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/line-chart-trend-tracking-and-continuous-data-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/line-chart-trend-tracking-and-continuous-data-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b41f81b9e.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a66b41f81b9e.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/line-chart-trend-tracking-and-continuous-data-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Grafik Garis: Pelacakan Tren dan Data Berkelanjutan\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Line Chart Guide | VPasCode Text to Diagram Tool","description":"Plot continuous data trends over time using ECharts line chart scripts in VPasCode, a free diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/","og_locale":"id_ID","og_type":"article","og_title":"ECharts Line Chart Guide | VPasCode Text to Diagram Tool","og_description":"Plot continuous data trends over time using ECharts line chart scripts in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/","name":"ECharts Line Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e.png","datePublished":"2026-07-27T01:16:35+00:00","description":"Plot continuous data trends over time using ECharts line chart scripts in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a66b41f81b9e.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/line-chart-trend-tracking-and-continuous-data-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Grafik Garis: Pelacakan Tren dan Data Berkelanjutan"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2069"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}