How to set view properties using SplunkJS Stack

Some view properties can only be set in JavaScript, such as the choices for radio buttons and checkboxes, and certain chart properties. This example shows how to set properties using JavaScript for a chart that has already been instantiated using Django template tags:

{% extends "splunkdj:base_with_app_bar.html" %}

{% load splunkmvc %}

{% block content %}
    {% chart id="chart1" managerid="mysearch1" type="bar" %}
{% endblock content %}

{% block managers %}
    {% searchmanager
        id="mysearch1"
        search="index=_internal | head 1000 | stats count by source" %}
{% endblock managers %}

{% block js %}
    <script>
        var deps = [
            "splunkjs/ready!"
        ];
        require(deps, function(mvc) {
            var mychart = splunkjs.mvc.Components.getInstance("chart1");
            mychart.settings.set({
                "charting.axisTitleX.text": "My x-axis ",
                "charting.axisTitleY.text": "My y-axis ",
                "charting.legend.placement": "top",
            });
        });
    </script>
{% endblock js %}