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.
Related
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 try to learn amCharts and now I stuck with changing tooltip format from date to datetime. There is jsfiddle what I have now: http://jsfiddle.net/m1a45zur/2/ The tooltip label which I want to change from date to only time is in red circle in this screenshot
I think that I should modify this part of code:
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
but I can't find in documentation any options that can change this :/
You can change the category tooltip by setting categoryBalloonDateFormat in your chartCursor. For example:
"chartCursor": {
// ....
"categoryBalloonDateFormat": "JJ:NN:SS",
// ....
},
You can find more information about formatting dates here
Updated fiddle
On an unrelated note, you should remove the duplicate timestamps from your data as the duplicate data is breaking your chart.
I am trying to modify the Vega.js choropleth example to use a gradient legend, and then to make that legend wider. I have succeeded in changing the type to "gradient", but when I try to make the legend wider, the text labels remain stuck and do not widen with the color bar.
Here's a link to the full code: https://jsbin.com/tamenucohu/edit?html,output
Here is the legend-specific part:
"legends": [
{
"fill": "color",
"orient": "bottom-right",
"title": "Unemployment",
"format": "0.1%",
"type": "gradient",
"encode": {
"gradient": {
"update": {
"width": {"value": 300}
}
}
}
}
Here's a screenshot when I set the width to 300, note that the "0.0%" and "15.0%" text labels are not properly spaced: wider color bar with narrower labels
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-'
I'm trying to trying to remove a small gap when I have a pie chart with a 100% slice.
I've tried to give it a outlineThickness of 0 but there is still a very small gap.
Here is an example.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"litres": 10
}],
"outlineThickness": 0,
"outlineAlpha": 1,
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
The only way to work around this in current version is to apply the same color to outline as the slice itself. You can use outlineColor for that:
https://jsfiddle.net/s083cdpk/1/
Please note that this should be applies only if there's only one slice, as the same color will be applied to all slices if there are more.
This options should be used:
"outlineThickness": 1,
"outlineAlpha": 1,
"outlineColor": undefined
Example