Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

Fix apexcharts heatmap example in docs (#2147)

Browse Source
This commit is contained in:
BG-Software
2025-02-12 21:12:25 +01:00
committed by GitHub
parent d6a10938e3
commit afd070012d
2 changed files with 31 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/odd-boats-hear.md
+5
View File
@@ -0,0 +1,5 @@
---
---
Fix apexcharts heatmap example in docs
docs/ui/components/charts.mdx
+26 -32
View File
@@ -352,10 +352,7 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T
horizontal: 8, horizontal: 8,
vertical: 8 vertical: 8
}, },
}, }
tooltip: {
fillSeriesColor: false
},
})).render(); })).render();
}); });
</script> </script>
@@ -368,51 +365,48 @@ Heatmaps provide a graphical representation of data where individual values are
```html example centered columns={2} height="25rem" libs="apexcharts" ```html example centered columns={2} height="25rem" libs="apexcharts"
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div id="chart-demo-pie" class="chart-lg"></div> <div id="chart-demo-heatmap" class="chart-lg"></div>
</div> </div>
</div> </div>
<script> <script>
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), { window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-heatmap'), {
chart: { chart: {
type: "donut", type: "heatmap",
fontFamily: 'inherit', fontFamily: 'inherit',
height: 240, height: 240,
sparkline: {
enabled: true
},
animations: { animations: {
enabled: false enabled: false
}, },
toolbar: {
show: false
}
},
tooltip: {
theme: 'dark'
}, },
fill: { fill: {
opacity: 1, opacity: 1,
}, },
series: [44, 55, 12, 2], series: [
labels: ["Direct", "Affilliate", "E-mail", "Other"], { name: 'New York', data: [{ x: 'Monday', y: 22 }, { x: 'Tuesday', y: 24 }, { x: 'Wednesday', y: 19 }, { x: 'Thursday', y: 23 }, { x: 'Friday', y: 25 }, { x: 'Saturday', y: 27 }, { x: 'Sunday', y: 26 }] },
tooltip: { { name: 'Los Angeles', data: [{ x: 'Monday', y: 28 }, { x: 'Tuesday', y: 30 }, { x: 'Wednesday', y: 27 }, { x: 'Thursday', y: 29 }, { x: 'Friday', y: 31 }, { x: 'Saturday', y: 32 }, { x: 'Sunday', y: 33 }] },
theme: 'dark' { name: 'Chicago', data: [{ x: 'Monday', y: 18 }, { x: 'Tuesday', y: 20 }, { x: 'Wednesday', y: 17 }, { x: 'Thursday', y: 19 }, { x: 'Friday', y: 21 }, { x: 'Saturday', y: 22 }, { x: 'Sunday', y: 23 }] },
{ name: 'Houston', data: [{ x: 'Monday', y: 25 }, { x: 'Tuesday', y: 27 }, { x: 'Wednesday', y: 24 }, { x: 'Thursday', y: 26 }, { x: 'Friday', y: 28 }, { x: 'Saturday', y: 29 }, { x: 'Sunday', y: 30 }] },
{ name: 'Phoenix', data: [{ x: 'Monday', y: 33 }, { x: 'Tuesday', y: 35 }, { x: 'Wednesday', y: 32 }, { x: 'Thursday', y: 34 }, { x: 'Friday', y: 36 }, { x: 'Saturday', y: 37 }, { x: 'Sunday', y: 38 }] },
{ name: 'Philadelphia', data: [{ x: 'Monday', y: 20 }, { x: 'Tuesday', y: 22 }, { x: 'Wednesday', y: 19 }, { x: 'Thursday', y: 21 }, { x: 'Friday', y: 23 }, { x: 'Saturday', y: 24 }, { x: 'Sunday', y: 25 }] }
],
colors: [tabler.getColor("primary")],
dataLabels: {
enabled: false
}, },
grid: { xaxis: {
strokeDashArray: 4, tooltip: {
}, enabled: false
colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
legend: {
show: true,
position: 'bottom',
offsetY: 12,
markers: {
width: 10,
height: 10,
radius: 100,
},
itemMargin: {
horizontal: 8,
vertical: 8
}, },
}, },
tooltip: { title: {
fillSeriesColor: false text: 'Average Temperature by Day and City',
}, },
})).render(); })).render();
}); });