This is how you define a title in amCharts:
"titles": [{
"text": "My Chart Title"
}, {
"text": "My Chart Title 222",
"bold": false
}]
However I cannot define font family (as Arial) as the Title class does not support this. Any idea how this can be achieved?
First it is necessary to identify the right title.
For that you need to add addClassNames in your configuration.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"theme": "none"
});
Next you have to set an id for your title. AmCharts will create an additional class on the DOM-Element thats includes the specified id.
"titles": [{
"text": "My Chart Title",
"id": "main"
}]
resulting class: amcharts-title-main
Now everything you have to do is changing the font family whenever the chart is drawn using jQuery:
$(".amcharts-title-main").css("font-family", "Arial");
Working demo.
Supplement to the comment: #gerric
For add classes in 4 version you need:
import * as am4core from '#amcharts/amcharts4/core'
...
am4core.options.autoSetClassName = true
https://www.amcharts.com/docs/v4/reference/options/
https://www.amcharts.com/docs/v4/tutorials/chart-element-class-names-and-css/
For titles will be generated, classes by template: ${classNamePrefix}${id}
P.S. classNamePrefix by default: 'amcharts-'
Related
Going through the issues page of bot framework composer, I stumbled on this issue which shows an interesting UI card for getting the user's satisfactory :
Does this looks like an adaptive card ? How can we reproduce that ?
the easiest thing to do is go to the designer on Adaptivecards.io. They have a super simple Adaptive Cards Designer experience that is drag and drop.
on other tabs they have example templates which you can launch in the designer to see how they work and play with them.
In your example above, the card is simply a text field with two image links and the images are clickable.
You can use the containers and/or columns components in the designer to layout the items.
You can use a hero card to get user satisfaction response by using thumbs up/thumbs down emoji.
[Herocard
text = Are you satisfied?
buttons = 👍 | 👎
]
Following JSON is a sample for thumbs up and down input choice
{
"type": "TextBlock",
"text": "Do you like the product"
},
{
"type": "Input.ChoiceSet",
"style": "expanded",
"isMultiSelect": false,
"choices": [
{
"title": "👍",
"value": "yes"
},
{
"title": "👎",
"value": "no"
}
],
"placeholder": "Placeholder text",
"spacing": "None"
},
What I have now is
But I want to change the colors of Legends, and achieve like below as it should match the colors of the bars.
Despite trying chart.legend.backround.fill and chart.legend.data with fill property, I am unable to change the colors
Thank you #Samuel
I have solved my problem!
Chart.legend.data = [{
"name": "Normal",
"fill": "#28a745"
}, {
"name": "Underweight",
"fill": "#ffc107"
}];
Was missing!
The Code Pen can be found Here
I want to show a progress of a task segment (like here: http://www.officetooltips.com/excel/tips/gantt_chart_with_progress.html) using green bar inside task segment on AmCharts Gantt. Now I am using bullets as shown here http://www.amcharts.com/tips/using-bullets-gantt-chart/, but it is a little bit tricky approach.
Also, I've tried to add custom class names for graph-column-element using addClassNames property of AmChart and classNameField of AmGraph, but it does not work. Gantt documentation says that there is no custom class prefix for Gantt task segment https://www.amcharts.com/tutorials/css-class-names/.
I cannot quite determine what you are requesting. Maybe this example will help.
http://jsfiddle.net/13jbrn2e/1/
First, amCharts does allow some css control for gantt charts. The example you point to in your question is an older post, and I believe the api has since been updated. You should be able to use addClassNames.
https://docs.amcharts.com/3/javascriptcharts/AmGanttChart#addClassNames
In your chart config...
var chart = AmCharts.makeChart( "chartdiv", {
"type": "gantt",
"theme": "light",
"marginRight": 70,
"addClassNames": true,
Use the DOM inspector of your browser to catch the css class names added.
This means you can do this in your css:
.amcharts-graph-column-element {
stroke-width: 1;
stroke: green;
}
Then if you set up your segments similar to this (sorry, this is dummy data forked from an amCharts gantt example that is not an exact fit I am sure for your data)...
}, {
"category": "Smith",
"segments": [ {
"start": 10,
"duration": 8,
"color": "#29a329",
"task": "Task #2"
}, {
"duration": 1,
"color": "#ebfaeb",
"task": "Task #2"
} ]
}, {
...you could end up having a chart looking like this, which seems to match somewhat with the link you shared.
Can we use a kendo Template in the shapeDefaults Content template part in below code?
$("#diagram").kendoDiagram({
dataSource: [{
"name" : "Telerik",
"items": [
{"name": "Kendo", "items": [{"name": "Kendo", "items":[{"name":"abc"}]}]}
],
}],
shapeDefaults: {
content:{template: "#=item.name#"}, //Need to use a kendo template here
editable: true
}
});
Your code is correct but there is a bug in the Kendo code; the content visual is not added on redraw when using templates.
You can wait for next release or simply add it in the redrawVisual method, it should be;
redrawVisual: function() {
this.visual.clear();
this.shapeVisual = Shape.createShapeVisual(this.options);
this.visual.append(this.shapeVisual);
this.visual.append(this._contentVisual);
this.updateBounds();
}
It is possible to have groups in amcharts axis?
Check the example in highcharts : example
Kind of... it's not an official feature but you can fake it.
You can have a graph for the label, with a valueField which is always zero.
You'll also need to offset the category axis so the labels don't hide each other.
Here's an example : http://jsfiddle.net/amcharts/XY2cD/
// each data provider has a label property
dataProvider :
[{ ... ,
"label": 0
}, ... ],
// the first graph in each 'cluster' is for the label
"graphs": [
{
"type": "column",
"fillAlphas": 0, // hide this column
"lineAlpha": 0, // hide this column
"title": "my sub group name",
"valueField": "label", // this is the field that's always zero
"showAllValueLabels": true, // even though the field is zero - the label will be shown
"labelText": "\n[[title]]" // start this with a newline so it's below the axis
}, ... ],
"categoryAxis": {
"labelOffset": 15
}
(not my fiddle, I just found it online)