I'm playing with Sencha Touch Charts. I've got them working, with interactions, animation everything is good. I even styled a bunch of them.
But when I got around styling a series of type area.. it just wouldn't take.
new Ext.chart.Chart({
theme: 'MyTheme',
cls: 'myClass',
legend: { ... },
interactions: [{ ... }],
store: app.stores.MyStore,
axes: [...],
series: [{ type: 'area', axis: 'left', xField: 'Date', yField: 'someField' },
{ type: 'line', axis: 'right', xField: 'Date', yField: 'someField2' }
]
})
and the style
chart[cls=myClass] {
series {
&[type=area] {
fill: #FFA500;
}
&[type=line] {
stroke: #008000;
fill: #008000;
marker {
stroke: #008000;
fill: #008000;
}
}
}
}
so the line series is styled just fine, but the area is not :| Any idea?
I've not actually tried this but it looks like you're almost there...
Based on the example found at http://docs.sencha.com/touch-charts/1-0/#!/guide/touch_charts_styling (at "axis" -> "label")
I'd try:
axis[position=bottom] {
label {
rotate: 0 0 45;
}
}
Related
I would like to hide a pie chart slice on load but cannot figure out how to do so.
I'm not sure it's possible, but it seems like it might be. There is a property "selected", but it does not seem to change when I manually select or unselect a wedge via the legend. I've tried to dispatchAction like this example (example), but haven't had any luck:
I think you are close to the solution... Actually, you should tweak legend.selected.
Take a look at this basic example:
let option = {
legend: {
selected: {
'B': false // <--- HERE
}
},
series: [
{
type: 'pie',
label: {
position: 'inner'
},
data: [
{ value: 10, name: 'A' },
{ value: 20, name: 'B' },
{ value: 15, name: 'C' }
]
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 300px;
height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
In my react native application I have a Highcharts chart displaying some bar chart info.
I want to display the legend, so people know what the chart is showing, but I want to disable the functionality that hides bars when the legend is touched.
Additionally the bars themselves fade in and out when you press them... I have disabled the 'tooltip' but the fading still happens, how can I stop this?
If I could render to a static image that would be ideal!
just for info the code is
let Highcharts = "Highcharts";
const conf = {
chart: {
type: "column",
animation: false,
marginRight: 10,
dateFormat: "dd/mm/YYYY"
},
title: {
text: "Spread Events"
},
xAxis: {
type: "datetime",
tickPixelInterval: 50
},
yAxis: {
title: {
text: "Spread"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: { enabled: false },
legend: {
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: FieldStore.graphData.slice()
};
To disable hiding series on legend click, return false from legendItemClick event function.
To disable a tooltip and the fading effect on series hover set enableMouseTracking to false. If you want to also turn off the fading effect on legend hover, change opacity in inactive state:
plotOptions: {
series: {
enableMouseTracking: false,
states: {
inactive: {
opacity: 1
}
},
events: {
legendItemClick: function() {
return false;
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/gjkprbto/
API Reference:
https://api.highcharts.com/highcharts/series.bar.enableMouseTracking
https://api.highcharts.com/highcharts/series.bar.events.legendItemClick
https://api.highcharts.com/highcharts/series.bar.states.inactive.opacity
I am using Cytoscape.js to create a basic diagram and am curious as to how to set the colour and particular shape of each node. Here is my existing code:
layout: {
name: 'preset'
},
ready: function(){
window.cy = this;
cy.add([
{ group: "nodes", data: { id: "n0" }, position: { x: 100, y: 100 } },
{ group: "nodes", data: { id: "n1", shape: 'rectangle' }, position: { x: 200, y: 200 } },
{ group: "edges", data: { id: "e0", source: "n0", target: "n1" } }
]);
}
});
});
I was also curious as to how to animate the diagram and if there were any similar examples out there on that.
cheers,
...
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'shape': 'rectangle',
}
},
],
...
background-color is probably the attribute you are looking for, this is set in the style option. More info can be in http://js.cytoscape.org/#getting-started/specifying-basic-options.
As for the shape, cytoscape has a few predefined shapes such as rectangle, circle, etc. You can even make your own, or have an svg as the node's image. Options for nodes are listed in http://js.cytoscape.org/#style/node-body.
For animation I would look at some of the demos uploaded and go from there. This one is particularly interesting js.cytoscape.org/demos/aedff159b0df05ccfaa5
I have the following codes below.
.chartBody {
width: 350px;
height: 200px;
}
<div class="chartBody" id="genreStrucChart"></div>
$("#genreStrucChart").kendoChart({
dataSource: setData(),
series: [
{ field: "Sample" },
{ field: "School" }
],
categoryAxis: {
field: "Counter"
},
legend: {
visible: true,
position: "bottom"
}
});
The codes above works fine expect it's not showing the "Legend". What seems to be missing?
Thanks
The legend is built off the series.name property. You could change it to:
series: [
{ field: "Sample", name: "Sample" },
{ field: "School", name: "School" }
],
and that should make your legend show up. I had the same problem and went through much agony before I figured out that was the problem. I hope that helps you.
I have a Rally SDK 2.0p5 app that displays a chart. When the user selects an option, the data will be updated and I would like to refresh the chart. But instead of redrawing, it will place a new chart beneath. What is the proper syntax?
// Configure and Add the chart
this.add(
{
xtype: 'rallychart',
height: 400,
id: 'chart',
chartConfig: {
chart: {
},
title: {
text: 'My Chart',
align: 'center'
},
xAxis: [
{
categories: ['M0','M1','M2','M3','M4','M5'],
title: {
text: 'Interval'
}
}
],
yAxis: {
title: {
text: yText
}
},
series: [ { type: 'column',
name: yText,
data: mCount } ],
plotOptions : {
column: {
color: '#F00'
},
series : {
animation : {
duration : 2000,
easing : 'swing'
}
}
}
}
}
);
You need to remove the 1st chart before adding the new one.
redrawChart: function() {
this.remove('#chart');
this.add({...});
}
It's often better to just update the chart in place. HighCharts is the charting library that's included in the App SDK. HighCharts will even animate your changes. Cool!!! Look here for the list of methods that operate on charts. You can add series, change data, change axis limits, control the zoom, etc.