title: How do I change axis, title, legend formatting on chartjs template
body: <p>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?</p>
  
  <p>Thank you so much for your help</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; Savings &lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  
      &lt;script src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/knockout-3.0.0.js"&gt;&lt;/script&gt;
      &lt;script src="js/globalize.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/dx.chartjs.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;script language="javascript"&gt;
  
  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();
                               }
                          });
  }
  
  
  &lt;/script&gt;
  
  &lt;body bgcolor="#aaaaaa"&gt;
  
  &lt;table style="background-color:black; color:white; width:800"&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;strong&gt;calculator&lt;/strong&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;form name="frmSimpleCalculator" action="" method="get"&gt;
  &lt;fieldset name="fraSimpleCalculator" style="width:1"&gt;
  &lt;legend&gt;Economic Savings Calculator&lt;/legend&gt;
  &lt;table width="300" border="0"&gt;
  
  &lt;!-- Value 1 --&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;
  Houses:
  &lt;/td&gt;
  &lt;td align="right"&gt;
  &lt;input type="text" value="50000" name="txtValue1" size="10" maxlength="10" style="text-align:right"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;!-- Value 2 --&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;
  Cars:
  &lt;/td&gt;
  &lt;td align="right"&gt;
  &lt;input type="text" value="25" name="txtValue2" size="10" maxlength="10" style="text-align:right"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;!-- Horizontal rule --&gt;
  &lt;tr&gt;
  &lt;td align="center" colspan="2"&gt;
  &lt;hr /&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;!-- Total --&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;
  Total:
  &lt;/td&gt;
  &lt;td align="right"&gt;
  &lt;input type="text" value="0" name="txtTotal" size="10" maxlength="5" style="text-align:right"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;!-- Calculate Button --&gt;
  &lt;tr&gt;
  &lt;td align="center" colspan="2"&gt;
  &lt;input type="button" value="Calculate Total" name="btnCalculateTotal" style="width:150" OnClick="btnCalculateTotal_Click();"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;!-- Calculate Chart Button --&gt;
  &lt;tr&gt;
  &lt;td align="center" colspan="2"&gt;
  &lt;input type="button" value="Update Chart" name="btnCalculateChart" style="width:150" OnClick="Thomas();"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  
      &lt;div class="content"&gt;
          &lt;div class="pane"&gt;
              &lt;div class="long-title"&gt;&lt;h3&gt;&lt;/h3&gt;&lt;/div&gt;
              &lt;div id="chartContainer" style="width: 250px; height: 440px;" style="position:absolute; TOP:200px; LEFT:350px"&gt;&lt;/div&gt;       
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>