Update chart.js
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { formatDataVolume, formatNumber } from "./Formatting.svelte";
|
||||
import { Chart } from "chart.js"
|
||||
import { Chart, PointElement, LineElement, LinearScale, CategoryScale, LineController, Filler, Tooltip } from "chart.js"
|
||||
|
||||
let chart_element
|
||||
let chart_object
|
||||
@@ -15,16 +15,16 @@ export const update = () => {
|
||||
return chart_object.update()
|
||||
}
|
||||
|
||||
Chart.defaults.global.defaultFontColor = "#cccccc";
|
||||
Chart.defaults.global.defaultFontSize = 15;
|
||||
Chart.defaults.global.defaultFontFamily = "system-ui, sans-serif";
|
||||
Chart.defaults.global.maintainAspectRatio = false;
|
||||
Chart.defaults.global.elements.point.radius = 0;
|
||||
Chart.defaults.global.tooltips.mode = "index";
|
||||
Chart.defaults.global.tooltips.axis = "x";
|
||||
Chart.defaults.global.tooltips.intersect = false;
|
||||
Chart.defaults.global.animation.duration = 500;
|
||||
Chart.defaults.global.animation.easing = "linear";
|
||||
Chart.register(PointElement, LineElement, LinearScale, CategoryScale, LineController, Filler, Tooltip)
|
||||
Chart.defaults.color = "#"+window.style.textColor;
|
||||
Chart.defaults.font.size = 15;
|
||||
Chart.defaults.font.family = "system-ui, sans-serif";
|
||||
Chart.defaults.maintainAspectRatio = false;
|
||||
Chart.defaults.plugins.tooltip.mode = "index";
|
||||
Chart.defaults.plugins.tooltip.axis = "x";
|
||||
Chart.defaults.plugins.tooltip.intersect = false;
|
||||
Chart.defaults.animation.duration = 500;
|
||||
Chart.defaults.animation.easing = "linear";
|
||||
|
||||
onMount(() => {
|
||||
chart_object = new Chart(
|
||||
@@ -35,46 +35,54 @@ onMount(() => {
|
||||
datasets: [
|
||||
{
|
||||
label: label,
|
||||
backgroundColor: "#"+window.style.highlightColor,
|
||||
borderWidth: 0,
|
||||
lineTension: 0,
|
||||
fill: true,
|
||||
yAxisID: "ax_1"
|
||||
pointRadius: 0,
|
||||
fill: 'origin',
|
||||
backgroundColor: "#"+window.style.highlightColor,
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: { display: false },
|
||||
layout: {
|
||||
padding: {
|
||||
left: 4,
|
||||
right: 10,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
type: "linear",
|
||||
y: {
|
||||
type: "linear",
|
||||
display: true,
|
||||
position: "left",
|
||||
ticks: {
|
||||
callback: function (value, index, values) {
|
||||
if (dataType == "bytes") {
|
||||
return formatDataVolume(value, 3);
|
||||
}
|
||||
return formatNumber(value, 3);
|
||||
},
|
||||
},
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
display: true,
|
||||
position: "left",
|
||||
id: "ax_1",
|
||||
ticks: {
|
||||
callback: function (value, index, values) {
|
||||
if (dataType == "bytes") {
|
||||
return formatDataVolume(value, 3);
|
||||
}
|
||||
return formatNumber(value, 3);
|
||||
},
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: { display: true },
|
||||
drawBorder: false,
|
||||
color: "#"+window.style.layer3Color,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
display: true,
|
||||
ticks: {
|
||||
sampleSize: 1,
|
||||
padding: 4,
|
||||
minRotation: 0,
|
||||
maxRotation: 0
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
}
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
ticks: {
|
||||
sampleSize: 1,
|
||||
padding: 4,
|
||||
minRotation: 0,
|
||||
maxRotation: 0
|
||||
},
|
||||
gridLines: { display: false }
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user