JavaScript Chart

Set the rtl property of the jqxChart. Author: http://jqwidgets.com

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>

JavaScript

// prepare chart data as an array
    var sampleData = [{
        Day: 'Monday',
        Running: 30,
        Swimming: 0,
        Cycling: 25,
        Goal: 40
    }, {
        Day: 'Tuesday',
        Running: 25,
        Swimming: 25,
        Cycling: 0,
        Goal: 50
    }, {
        Day: 'Wednesday',
        Running: 30,
        Swimming: 0,
        Cycling: 25,
        Goal: 60
    }, {
        Day: 'Thursday',
        Running: 20,
        Swimming: 20,
        Cycling: 25,
        Goal: 40
    }, {
        Day: 'Friday',
        Running: 0,
        Swimming: 20,
        Cycling: 25,
        Goal: 50
    }, {
        Day: 'Saturday',
        Running: 30,
        Swimming: 0,
        Cycling: 30,
        Goal: 60
    }, {
        Day: 'Sunday',
        Running: 20,
        Swimming: 40,
        Cycling: 0,
        Goal: 90
    }];

    // prepare jqxChart settings
    var settings = {
        title: "Fitness & exercise weekly scorecard",
        description: "Time spent in vigorous exercise by activity",
        enableAnimations: true,
        showLegend: true,
        padding: {
            left: 5,
            top: 5,
            right: 5,
            bottom: 5
        },
        titlePadding: {
            left: 40,
            top: 0,
            right: 0,
            bottom: 10
        },
        source: sampleData,
        rtl: true,
        categoryAxis: {
            text: 'Category Axis',
            textRotationAngle: 0,
            dataField: 'Day',
            showTickMarks: true,
            tickMarksInterval: 1,
            tickMarksColor: '#888888',
            unitInterval: 1,
            showGridLines: false,
            gridLinesInterval: 1,
            gridLinesColor: '#888888',
            axisSize: 'auto'
        },
        colorScheme: 'scheme01',
        seriesGroups: [{
            type: 'stackedcolumn',
            columnsGapPercent: 100,
            seriesGapPercent: 5,
            valueAxis: {
                unitInterval: 10,
  ...