Develop Reference

Force two Chart.js doughnut charts with legends to same size in Bootstrap columns

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.

toggle between data and markline in echarts

Given the scatter series with markline in echarts as below :
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter',
markLine: {
data: [
{name: 'average',
type: 'average',
valueIndex: 0}
]
}
}]
};
I wanted to toggle between data and markline. Lets say when markline off , only scattered data should be shown. And when markline on only markline should be shown in the graph.

I think it should work when you simply set the e-chart option accordingly:
when you only want to show the markline, set the symbol for each data-item to none
when you only want to show the data, markLine can be undefined (or set symbol for each markline to none)

Drawing pie chart with chart.js

I'm using chart.js from http://www.chartjs.org/.
I want to draw a pie chart, but nothing is displaying. I managed to draw line chart, so the Javascript is loaded.
HTML
<!-- Chart -->
<script type="text/javascript" src="_javascripts/chart/Chart.min.js"></script>
<!-- //Chart-->
<canvas id="browsersChart" width="400" height="100"></canvas>
<script>
var ctx = document.getElementById("browsersChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
label: 'Browsers',
data: [14, 2, 2, 2, 1],
backgroundColor: [
window.chartColors.red,
window.chartColors.orange,
window.chartColors.yellow,
window.chartColors.green,
window.chartColors.blue,
],
}],
labels: [
"Chrome"
"Firefox"
""
"MSIE"
"Mobile Safari"
]
},
options: {
responsive: true
}
};
</script>

You have some typos in your code.
In the labels section, you need a comma after each label:
labels: [
"Chrome", // These commas at the end need added.
"Firefox",
"",
"MSIE",
"Mobile Safari"
]
You also need to add a ) at the very end of the Chart declaration:
options: {
responsive: true
}
}); // The rounded bracket here needs added
In the future, you should use the dev tools in your browser. The Console tab will tell you about errors like these. It explained exactly what line had errors.
After fixing these typos, I got a pie chart just as expected.

Kendo chart legend series style

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>

Using Kendo Dataviz Vertical Bullet Graph, How to add labels similar to Bar Graph?

Trying to Style up the Bullet Graph to be exactly as Marketing desires. The desired Graph looks like:
How do you add the labels at the top of the bars?
I've tried to set the labels property from the Kendo Documentation:
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
Here is my script that isn't working:
$barChart = $("#bar-chart").empty();
$barChart.kendoChart({
theme: global.app.chartsTheme,
renderAs: "svg",
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
target: {
color: "#444",
dashType: "dot",
line: {
width: 1,
}
},
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
data: [
{
score: 93.7,
average: 65.2,
}, {
score: 80.2,
average: 22.2,
}, {
score: 60.8,
average: 35.2,
}, {
score: 82.1,
average: 45.2,
}, {
score: 74.2,
average: 55.2,
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
Any help would be greatly appreciated.

Because this is not a supported feature, any attempt to do this is by it's nature a hack. I had a look at kendo demo and noticed that there is a tooltip element with class k-tooltip that contains the total for a bar on mouseover. You should take a look into that mouseover to display the totals.

What you're attempting to do is possible. I've created an example on our Try Kendo UI site here: http://trykendoui.telerik.com/#jbristowe/aDIf/7

To recap, bullet charts don't support that type of label you need, and bar charts don't support the visual you need (the special line on the chart).
You could switch back to bar charts and write a custom visual. However, an easier way is to use a plotband on the value axis: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.plotbands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If you make a very narrow band, it will work pretty. It won't be dotted as in your reference image, and it will be behind the bar, which might be a problem... To go deeper, you would need a custom visual, and it's going to be involved: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.visual