How to Set Sencha Touch Chart Legend Labels
How do I make an how to set sencha touch chart legend labels?
It's a common problem people ask about in the forums and it's got a really simple solution. Article on this will be at http://www.phs4j.com/2014/10/set-sencha-touch-chart-legend-labels/. What is a how to set sencha touch chart legend labels? How do you make a how to set sencha touch chart legend labels? This script and codes were developed by Shayne Trosdahl on 18 November 2022, Friday.
How to Set Sencha Touch Chart Legend Labels - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>How to Set Sencha Touch Chart Legend Labels</title>
</head>
<body> <script type="text/javascript" src="http://cdn.sencha.io/touch/sencha-touch-2.3.1/sencha-touch-all.js"></script>
<link href="http://cdn.sencha.io/touch/sencha-touch-2.3.1/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"> <script src="js/index.js"></script>
</body>
</html>
How to Set Sencha Touch Chart Legend Labels - Script Codes JS Codes
Ext.application({ name: 'Chart Legend Custom Label Name', launch: function() { var barChart = new Ext.chart.Chart({ store: { fields: [ 'name', 'custSales', 'grossProfit' ], data: [{ 'name': 'Company one', 'custSales': 33, 'grossProfit': 2 }, { 'name': 'Company two', 'custSales': 10, 'grossProfit': 5 }, { 'name': 'Company three', 'custSales': 60, 'grossProfit': 2 }, { 'name': 'Company four', 'custSales': 20, 'grossProfit': 6 }, { 'name': 'Company five', 'custSales': 30, 'grossProfit': 4 }, { 'name': 'Company six', 'custSales': 12, 'grossProfit': 7 }, { 'name': 'Company seven', 'custSales': 80, 'grossProfit': 6 }, { 'name': 'Company eight', 'custSales': 20, 'grossProfit': 9 }, { 'name': 'Company nine', 'custSales': 15, 'grossProfit': 2 }, { 'name': 'Company ten', 'custSales': 55, 'grossProfit': 5 }] }, innerPadding : 10, insetPadding : 50, background : 'rgba(064, 064, 064, 1)', animate : true, shadow : true, // ======================================= // Add the legend... // ======================================= legend: { position : 'right' }, axes: [{ type : 'numeric', position : 'left', fields : [ 'custSales', 'grossProfit' ], label : { fontSize: 12, color: 'rgba(255, 255, 255, .2)', rotate: { degrees : -45 } }, style : { stroke: 'rgba(255, 255, 255, .2)', lineCap: 'miter', lineWidth: 2, miterLimit : 20 } }, { type : 'category', fields : 'name', label : { fontSize: 12, color: 'rgba(255, 255, 255, .2)', rotate: { degrees: -45 } }, style : { stroke: 'rgba(255, 255, 255, .2)' } }], series: [{ type : 'bar', stacked : true, // ============================================== // The title line below makes all the difference // title: [ 'Whatever', 'You', 'Want' ] // sets the chart legend labels // ============================================== title : ['Profit $', 'Sales $'], xField : [ 'name' ], yField : [ 'custSales', 'grossProfit' ], colors : [ 'rgba(148, 183, 187, 1)', 'rgba(239, 066, 111, 1)' ] }] }); Ext.Viewport.setLayout('fit'); Ext.Viewport.add(barChart); }
});
Developer | Shayne Trosdahl |
Username | Trozdol |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 2,322 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sencha Touch Bar Chart Add ons | 2,308 Kb |
SVG Logo Animation | 2,807 Kb |
Sencha Touch 2.3.1 Basic Grid Example | 2,770 Kb |
Viewport Text Width CSS | 1,720 Kb |
A Pen by Shayne Trosdahl | 1,947 Kb |
Fiddling with Drag and Drop | 2,286 Kb |
1em Sizing Side-by-Side Comparison | 2,397 Kb |
Sencha Touch Grid Text Wrap Test | 2,312 Kb |
Test Prof Mode | 1,484 Kb |
Example | 1,306 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Spilled Paint | Darrylhuffman | 3,894 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!