Start a new topic

Chart Js Title

Is it possible to set the title on a chart using the Chart.js component?  I don't see a place on the options form.


You can set any property on the chart using the chart's native configuration.  The Orders Trend widget in the on-line demo uses the Chart.js component.  If you navigate to it you can follow along with the example below.

If you click the Advanced tab, you can click the here link at the top header to go to the documentation for the component which will include a link out to the chart configuration options on the vendor site.  



To set the title use the configuration in the screen pic also posted here for convenience.


{
  "schema": {
    "series": [ "OrderCount" ],
    "labels": "OrderMonth"
  },
  "type": "line",
  "chartjs": {
    "options": {
      "title": {
        "display": true,
        "text": "Title"
      }
    }
  }
}


This will set the char title.





That works however it seems it does not like spaces.  If I set the title to 'Top 25 Distributor Trend' in the configuration, the chart title is 'Top25DistributorTrend' with no spaces.

You can use the Unicode character for space in JSON -> \u0020


'Top\u002025\u0020Distributor\u0020Trend' =  'Top 25 Distributor Trend'

Thank you - works great.

Login to post a comment