Change label on xAxis of bar chart

[shawnParticipant]

I have a bar chart who’s xAxis is the week of the year.

I want the week to roll back to 1 after week 52, but if I use week 1, it puts it at the beginning of the chart.
How can I change the label displayed on the x-axis without changing the placement value on the chart?

        $(document).ready(function () {
            // prepare chart data as an array
            var chartData = [
	        { week: '48','No Growth': 0,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
	        { week: '49','No Growth': 3,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 1},
	        { week: '50','No Growth': 6,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
		{ week: '51','No Growth': 0,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
		{ week: '52','No Growth': 5,'1-10': 1,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
		{ week: '53','No Growth': 0,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0},
		{ week: '54','No Growth': 0,'1-10': 0,'11-100': 0,'101-1000': 0,'1001-10000': 0,'TNTC': 0}
              ];
            // prepare jqxChart settings
            var settings = {
                title: "Combined<br>Culture Summary",
                description: "12-01-2022 To 01-10-2023",
                enableAnimations: false,
                showLegend: true,            
                showBorderLine: false,
                backgroundColor: "#fff",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: chartData,
                xAxis:
                {
                    dataField: 'week',                   
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    gridLines: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    axisSize: 'auto',
                    title: {text: "Weekly"}
                },
                valueAxis:
                {
                    unitInterval: 1,
                    title: {text: 'Number of Samples'},
                    tickMarks: {color: '#BCBCBC'},
                    gridLines: {color: '#BCBCBC'},
                    labels: {
                        horizontalAlignment: 'right'
                    },
                },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            series: [
                                    { dataField: 'No Growth', displayText: 'No Growth' },
                                    { dataField: '1-10', displayText: '1-10' },
                                    { dataField: '11-100', displayText: '11-100' },
                                    { dataField: '101-1000', displayText: '101-1000' },
                                    { dataField: '1001-10000', displayText: '1001-10000' },
                                    { dataField: 'TNTC', displayText: 'TNTC' }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);            
	    // add a new color scheme named 'kuster'
            $('#chartContainer').jqxChart('addColorScheme', 'kuster', ['#00C000', '#80FF80', '#FFFF40','#F8902C', '#FF8080', '#FF0000']);
	    // apply the new scheme by setting the chart's colorScheme property
	     $('#chartContainer').jqxChart('colorScheme', 'kuster');
	     // refresh the chart
             $('#chartContainer').jqxChart('refresh');       				    
        });

[svetoslav_borislavovParticipant]

Hi,

For this, you can use the formatFunction of the labels property.
Please see this example: http://jsfiddle.net/L4xgy1ba/2/
xAxis -> labels -> formatFunction

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[shawnParticipant]

thank you

[Author]

Posts