How do I change axis, title, legend formatting on chartjs template

javascript axis-labels chart.js

10,257

1) you can set font options for title, legend and axes through "font" property of corresponding options' element

legend: {
   font: {
      color: 'black',
      family: 'Zapf-Chancery, cursive',
      opacity: 1,
      weight: 700
    }
}

You can find more sample in ChartJS documentation.

2) You can use HTML tag br to wrap your title to second line

title: "This is my<br/>long title"

10,257

Author by

user3089117

Updated on June 29, 2022

Comments

user3089117 almost 2 years

still new to javascript and html, I have managed to build a simple calculator that will also graph some of the outputs. To do so I am using the below chartjs template. I would like to be able to change the font for the y-axis, title, and legend, as it looks really 'choppy' when it is created, however, I do not know where I would find/define the appropriate paramaters and what they would be. Also, how would I make the chart title wrap into a second line if it gets to long for one? Can I specify these items in my script or do I have to manipulate the dx.chartjs file, and if so where do I need to make the changes?

Thank you so much for your help

<html>
<head>
<title> Savings </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/knockout-3.0.0.js"></script>
    <script src="js/globalize.min.js"></script>
    <script src="js/dx.chartjs.js"></script>
</head>

<script language="javascript">

function btnCalculateTotal_Click()
{

houses = 0;
cars = 0;

houses = Number(frmSimpleCalculator.txtValue1.value);
cars = Number(frmSimpleCalculator.txtValue2.value);
sngTotal = houses + cars
frmSimpleCalculator.txtTotal.value = sngTotal;

test = 200
var dataSource = [{ savings: "", Houses: sngTotal, Cars: 300 },];

$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
    argumentField: "savings",
    type: "bar",
    hoverMode: "allArgumentPoints",
    selectionMode: "allArgumentPoints",
    label: {
        visible: true,
        format: "fixedPoint",
        precision: 0
            }
                      },
series: [
    { valueField: "Houses", name: "Houses" },
    { valueField: "Cars", name: "Cars" }
        ],

title: "Savings potential",
legend: {
    verticalAlignment: "bottom",
    horizontalAlignment: "center"
        },

pointClick: function (point) {
    this.select();
                             }
                        });
}


</script>

<body bgcolor="#aaaaaa">

<table style="background-color:black; color:white; width:800">
<tr>
<td>
<strong>calculator</strong>
</td>
</tr>
</table>

<form name="frmSimpleCalculator" action="" method="get">
<fieldset name="fraSimpleCalculator" style="width:1">
<legend>Economic Savings Calculator</legend>
<table width="300" border="0">

<!-- Value 1 -->
<tr>
<td align="left">
Houses:
</td>
<td align="right">
<input type="text" value="50000" name="txtValue1" size="10" maxlength="10" style="text-align:right">
</td>
</tr>

<!-- Value 2 -->
<tr>
<td align="left">
Cars:
</td>
<td align="right">
<input type="text" value="25" name="txtValue2" size="10" maxlength="10" style="text-align:right">
</td>
</tr>

<!-- Horizontal rule -->
<tr>
<td align="center" colspan="2">
<hr />
</td>
</tr>

<!-- Total -->
<tr>
<td align="left">
Total:
</td>
<td align="right">
<input type="text" value="0" name="txtTotal" size="10" maxlength="5" style="text-align:right">
</td>
</tr>

<!-- Calculate Button -->
<tr>
<td align="center" colspan="2">
<input type="button" value="Calculate Total" name="btnCalculateTotal" style="width:150" OnClick="btnCalculateTotal_Click();">
</td>
</tr>

<!-- Calculate Chart Button -->
<tr>
<td align="center" colspan="2">
<input type="button" value="Update Chart" name="btnCalculateChart" style="width:150" OnClick="Thomas();">
</td>
</tr>


    <div class="content">
        <div class="pane">
            <div class="long-title"><h3></h3></div>
            <div id="chartContainer" style="width: 250px; height: 440px;" style="position:absolute; TOP:200px; LEFT:350px"></div>       
        </div>
    </div>
</body>
</html>