Styled value axis
This example showcases various style properties for valueAxis: custom font and color for value labels and title, custom gridline and tick colors, label spacing, and others.
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var t = new TimeChart(
{
container: document.getElementById("demo"),
data:
{
units: ["h"],
url: "/dvsl/data/time-chart/temperature-kuldiga-h.json"
},
valueAxis: {
"va1": {
title: "Temperature",
side: "left",
position: "outside",
hgrid: true,
zeroLine: "visible", // "visible", "floating" or "center"
style: {
title: { fillColor: "blue", font: "30px Arial", alignment: "center", margin: 0 },
tick: { lineColor: "blue" },
valueLabel: { fillColor: "blue", font: "15px Arial", margin: 0 },
labelSpacing: 20,
baseLine: { lineColor: "blue", lineWidth: 2 },
hgrid: { lineColor: "blue" }
}
},
"secondary": {
side: "right",
position: "inside",
axisLine: true,
style: { axisLine: { lineDash: [3, 3] } }
}
},
series: [
{
id: "s1",
type: "columns",
valueAxis: "va1",
data: {
index: 1,
aggregation: "avg"
},
style: {
fillColor: "lightgreen",
lineColor: "olive",
lineWidth: 1,
padding: [2, 2] // space around the columns
}
}
]
}
);