I have a Kendo Chart with two or more series.
When the user click over a series name in the legend, this is hidden from the chart, and the series name in the legend change its color to a lighter blue.
The problem is that is not very intuitive that the series is disabled,
and I'd like to make it italic or change its color.
Is it possible?
found the solution. Easier than expected:
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: {
labels: {
color: "#aa00bb"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Related
I have two bootstrap columns side by side in which I want to show two related Chart.js doughnut charts. I want to include the legends, so one can easily see the meaning without interactively hovering with the mouse.
The thing is, when Chart.js plots the two doughnut charts, the sizes of the actual charts differ, because the legend in one chart takes up more space comparatively.
What I'd like is to have two doughnut charts side by side, that scale responsively, and where I am certain the actual doughnut is the same size.
Link to jsfiddle here: https://jsfiddle.net/emc86oux/1/
var chart = new Chart('plot1', {
type: 'doughnut',
data: {
datasets: [{
data: [3,6,10,6,1],
}],
labels: ["Lorem","ipsum","dolor","sit","amet"]
},
options: {
legend: {
align: "end",
position: "bottom"
},
responsive: true,
aspectRatio: 1
}
});
var chart = new Chart('plot2', {
type: 'doughnut',
data: {
datasets: [{
data: [6, 5, 9, 7, 8, 4, 1, 2, 3, 10, 5],
}],
labels: ["On", "the", "other", "hand", "we", "denounce", "with", "righteous", "indignation", "and", "dislike"]
},
options: {
legend: {
align: "end",
position: "bottom"
},
responsive: true,
aspectRatio: 1
}
});
I ended up using the approach described here, where HTML legends are added in separate div's. I modified the approach for doughnut charts, which set up the chart data slightly differently than bar charts.
I am new to Javascript. I found this graph on amcharts. I want to change the text color and add a stroke (that can be different colors on each) to each circle. Any help would be greatly appreciated!
I have tried to google search but don't really know where to even start or what to search.
{name: "Core",
children: [
{
name: "First",
children: [
{ name: "A1", value: 100 },
{ name: "A2", value: 60 }
]
},
networkSeries.dataFields.value = "value";
networkSeries.dataFields.name = "name";`
I just want the stroke color to be added and editable (can start with #25BEC1) and the text color to change to #0B3D49
Colors of the nodes
There is a whole section that talks about the colors of the Forced Directed Tree: https://www.amcharts.com/docs/v4/chart-types/force-directed/#Colors
You can either set the colors' source from data or the colors list. I'm not sure if you meant to just use one color for everything. If that's the case,
let chart = am4core.createFromConfig({
series: [{
type: 'ForceDirectedSeries',
...,
colors: {
list: [
'#25BEC1'
],
reuse: true
},
...
}],
data: ...
}, 'chart', am4plugins_forceDirected.ForceDirectedTree);
demo: https://jsfiddle.net/davidliang2008/q42c8u5w/23/
Text colors of the nodes
To change the text color of the labels, you can set the color to the fill property of the label object:
let chart = am4core.createFromConfig({
series: [{
type: 'ForceDirectedSeries',
...,
nodes: {
label: {
fill: '#0B3D49',
text: '{name}'
}
},
...
}],
data: ...
}, 'chart', am4plugins_forceDirected.ForceDirectedTree);
demo: https://jsfiddle.net/davidliang2008/q42c8u5w/25/
I want to display the following chart:
Many chart libraries allow the use of stacked bar charts, for example:
Chartist.js
d3.js
CanvasJS
etc.
But how about a chart like shown above? The idea is to provide values for the green, yellow and red area and for the black bar in the center... Based on those values such a chart should be rendered.
I thought this somehow can be realized by creating a stacked bar chart and "somehow" inserting the bar inside the stacked bar... And "somehow" putting the labels there... :D
As you can see, no clue at all... :)
Do you mean a workaround for bullet chart like this?
`data:[
{
type: "stackedBar100",
toolTipContent: null,
highlightEnabled: false,
name: "Region 1",
showInLegend: true,
dataPoints: [
{y: 60, label: "Water Filter" }
]
},
{
type: "stackedBar100",
toolTipContent: null,
highlightEnabled: false,
name: "Region 2",
showInLegend: true,
dataPoints: [
{y: 20, label: "Water Filter" }
]
},{
type: "bar",
dataPoints:[{}]
},{
type: "bar",
dataPoints: [
{y: 65, label: "Water Filter" }
]
},
{
type: "bar",
dataPoints:[{}]
}
] `
I have a bar chart like in this demo:
http://demos.telerik.com/aspnet-mvc/bar-charts/column
I want to get all colors of the generated bars with js.
Something like this:
function getColors() {
for (i=0:bars.Count) {
colorArray[i] = $('#chart').data("kendoChart").options.series[0].data[I].usercolor TODO?? how to access the bars
}
}
Additionally: How to set one/more colors of a pie chart with javascript: http://demos.telerik.com/aspnet-mvc/pie-charts/index
Instead of using the default chart colours, why not choose the colours you want?
You can do this specifying the SeriesColors when you define your Kendo MVC bar chart e.g.
#(Html.Kendo().Chart().
.Name("Chart")
.SeriesColors("#f00", "#0f0", "#00f", "#f0f")
)
To do this using JavaScript:
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesColors: ["red", "green"],
series: [
{ data: [1, 2] },
{ data: [1, 2] },
{ data: [1, 2] }
]
});
</script>
How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck.
Currently i am using this code it show legend for true but I not able to change the text I have tried this.
var chart = c3.generate({
bindto: '#container',
padding: {
top: 10,
right: 0,
bottom: 10,
left: 0,
},
data: {
columns: [<?php echo $pieChartDataString; ?>],
type : 'pie',
labels: true
},
legend: {
show: true,
position: 'upper-center'
format: {
title: function () { return "Legend title"; },
name : function () { return "Legend name"; },
value: function () { return "Legend value";}
}
}
//But these legend values or not showing
});
It's not showing my legend values its always shows only columns as legend.
Is there any way that I can change the legend values.
You haven't provided the data that gets outputted from your php, so it's hard to say.
But the first item in each of the columns array determines the name that goes in the legend. So:
columns: [
['this is legend 1', 30],
['put your value here', 120],
]
would result in the legend labels being "this is legend 1" and "put your value here".
Here's a fiddle:
http://jsfiddle.net/jrdsxvys/9/
Edit...
Another option is to use the names property, as done here:
http://jsfiddle.net/jrdsxvys/40/
data: {
columns: [
['d1', 30],
['d2', 120]
],
type: 'pie',
labels: true,
names: {
d1: 'some name here',
d2: 'another name'
}
}
#agpt Yes. The names property is a good way to go generally because the first property of the columns data array eg 'd1' above is used when doing things like having multiple types on charts. eg for a bar and line combination using types instead of type: 'pie':
columns: [
['bar_1', 3, 8, 6],
['bar_2', 4, 0, 7],
['bar_3', 2, 3, 0]
],
types: {
bar_1: 'bar',
bar_2: 'line',
bar_3: 'bar'
},
names : {
bar_1: 'Initial',
bar_2: '3 month',
bar_3: '6 month'
}
So, using the names property allows you to use more 'dynamic' property names and be consistent throughout the config.