I was wondering if there is a way to have css styling inside of this chart title.
chart.allLabels = [{
'text': "<strong style='color:#666;font-size:18px'>80</strong>",
'align': 'center',
'y': '100'
}];
This just shows as the literal string instead of styling the <strong> tag.
Is this possible?
Since labels on the chart are SVG nodes, they do not support HTML and related CSS.
Looking at your example, it seems that you need to apply the following to the whole label:
Make it bold
Set color to #666
Set font size to 18
All this is doable with label's properties:
chart.allLabels = [ {
"text": "80",
"align": "center",
"y": "100",
"bold": true,
"size": 18,
"color": "#666"
} ];
Another option is to use CSS, as #gerric suggested in a comment.
Related
I am using amcharts for rendering the data in column charts, I need the legand to be shown along with the text of the each 'valueField'.
I am trying something like this :
"legend": {"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10,
"marginTop": 10,
"labelText":"[[value]]"
}
My JSFiddle
It's showing the different colors well, but the text is not getting displayed.
Any suggestions would be highly appreciable!
You need to set the title of the graphs so that the legend knows what to use to replace the labelText of each legend, which defaults to [[title]]:
https://docs.amcharts.com/3/javascriptcharts/AmLegend#labelText
It looks like the labelText will not parse any other special placeholders like [[value]] other than [[title]].
So the fix is, just to remove what you have set as the label text in the legend section (just leave it as default), and add titles on each graph:
legend: {
...,
// "labelText": "[[value]]"
},
...,
graphs: [
{
id: "g1",
fillAlphas: .9,
title: "value 1",
...
},
{
id: "g2",
fillAlphas: .9,
title: "OR WHATEVER YOU WANT TO DISPLAY",
...
},
...
]
fiddle: https://jsfiddle.net/davidliang2008/fm7jLkta/
I have a pie chart using chart.js 2.0. (jsfiddle)
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7],
}]
},
options: {
legend: {
display: true,
position: 'top'
}
}
});
I wanna to determine the best way to place legend's labels on top-left position and each label will be on a new line:
What is the simplest way to do this? Is it possible to do this out of the box?
After reading the documentation, I found generatelabels function which generates a legend that we can use and assign to an DOM element and stylize and etc... But it seems to me that this is a difficult way and I believe that there is easier.
This is a hack but a satisfactory and dirt-cheap one, until better support is provided officially. Just append a long string of spaces eg. " " to the end of each label string.
This should successfully force the labels to be formatted one-per-line. Ideally this should be used with align: 'start' (v2.9+)
I am trying to create a fiddle, mocking up the image attached
in following jsfiddle
http://jsfiddle.net/2TuCW/162/
The problem is I want the plotLines between blue line and green column.
I tried changing the zIndexes of plotLines (10) , between blue line (15) and green column (5) in following fiddle
http://jsfiddle.net/2TuCW/163/
//plotLines zIndex
"plotLines" : [
{
"color": '#E5E7EB',
"zIndex": 10,
"width": 2,
"value": 20
},
....
....
//Series data z-index
"series": [{
"type":"column",
"data": [35,39,49,50,57,58],
"zIndex":5
....
....
"series": [{
"type":"line",
"data": [35,39,49,50,57,58],
"zIndex":15
But it is not working as expected. Please suggest how to achieve it.
It is related with fact that all series have the same zIndex.
Related topic: https://github.com/highslide-software/highcharts.com/issues/3321
Try to adjust the values of the plotLines.
If you want a plot line to be between blue line and green column the value of the plotLines has to be between the data of blue line and data of column.
Unfortunately, it seems that plotLines can either be in front of all series or behind all series. This is because all series are grouped under a common element. A plotLine element is a sibling to the group element, not a sibling to the individual series elements.
This issue relates to the fact that all series are drawn within the same group, and therefore have the same z-index related to other groups. A related GitHub issue has discussion and code examples.
See this one example solution, proposed by Torstein Hønsi (Highcharts creator). I've made a modified, minimal, reproducible example here:
/**
* Plugin to allow plot band Z indexes in between series
*/
Highcharts.wrap(Highcharts.PlotLineOrBand.prototype, 'render', function (proceed) {
var chart = this.axis.chart;
proceed.call(this);
if (!chart.seriesGroup) {
chart.seriesGroup = chart.renderer.g('series-group')
.attr({ zIndex: 3 })
.add();
}
if (this.svgElem.parentGroup !== chart.seriesGroup) {
this.svgElem
.attr({ zIndex: this.options.zIndex })
.add(chart.seriesGroup);
}
return this;
});
Highcharts.chart('container', {
xAxis: {
plotLines: [{
color: 'red',
width: 2,
value: 3.5,
zIndex: 10
}]
},
series: [{
data: [7988, 12169, 15112, 22452, 34400, 34227],
zIndex: 9
}, {
data: [8105, 11248, 8989, 11816, 18274, 18111],
zIndex: 11
}]
});
The code uses Torsteins plugin to allow the plotline in between series. See the GitHub issues for discussion on caveats and potential improvements.
I am wondering if it is possible to set the background color of an edge label with cytoscape? I am setting the rest of the edge styles like this.
style: cytoscape.stylesheet()
.selector("edge")
.css({
"line-color": "#444444",
"width": 4,
"content": "data(length)"
})
You can set an outline on edge labels: http://js.cytoscape.org/#style/labels
I am creating a bar chart using dojocharts and version is 1.9 .Here i add a Indicator to a bar chart. I want the add text with html tag(like break tag) and also tooltip on the Indicator. I have added a labelFunc to return the HTML I want, but it only shows as plain text. here html tag and tooltip for that indicators not working.Any one suggest me is it possible for add tooltip and html tag on indicator of dojocharts.
Below is my code
Chart.addPlot("indicator", { type: "Indicator",
vertical:false,
values:30,
offset: { y: -2, x: -50 },
lineStroke: { color: "green",style: "line" },
labels: true,
htmlLabels: true,
// start:true,
// labelStyle:"inside",
//maxBarSize: 35,
fontColor:"red",
// precision: 1,
labelFunc: max,
stroke: {color:"rgb(204, 204, 204)",height:40,width: 25},
outline: "purple",
fill: "#666"
});
Use the Tooltip plugin.
For an example see this tutorial https://dojotoolkit.org/documentation/tutorials/1.7/charting/
The plugin is called dojox.charting.action2d.Tooltip and it is described here https://dojotoolkit.org/api/?qs=1.7/dojox/charting/action2d/Tooltip