Highchart multi Yaxis in one line - charts

I want to create chart like that in highcharts:
IOT Central Chart
this is what i get until now:
Highcharts.setOptions({
colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: "spline",
marginLeft: 40, // Keep all charts left aligned
marginTop: 7,
marginBottom: 7
},
title: {
text: null,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
visible: false,
labels: {
format: '{value} km'
}
},
yAxis: {
visible: true,
title: {
text: null
},
tickAmount: 2,
minPadding: 0,
lineWidth:1,
gridLineColor: "transparent"
},
series: [{
data: dataset.data,
name: dataset.name,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
.chart {
min-width: 320px;
max-width: 800px;
height: 150px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
but the problem is that i cant export or zoom do normal legend to this chart.

The problem here is that you create three separate charts instead of one.
Highstock allows you to position and resize axes (height & top properties):
yAxis: [{
height: '50%'
}, {
top: '50%',
height: '50%'
}],
API references:
https://api.highcharts.com/highstock/yAxis.height
https://api.highcharts.com/highstock/yAxis.top
In fact it's going to work in Highcharts too (even though it's not documented).
Live demo: http://jsfiddle.net/BlackLabel/gb3jhq75/

Related

Chartjs - Doughnut chart with multi layer and running value

I have doughnut chart using chartsjs, and also I used multi layer with cutoutPercentage.
The First Layer (Black color) is the Total and the second layer (Red Color) complete is the running value.
type: 'doughnut',
data: {
datasets: [
{
data: Total,
fill: true,
backgroundColor:'rbg(242, 133, 0)',
borderWidth: 3,
weight:1,
},{
data: complete,
fill: true,
backgroundColor:'rgb(255,36,0)',
borderWidth: 3,
weight:1,
}
]
},
options: {
responsive: true,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 70,
},
This is what I need,2nd layer is running until reach the total.
In case you need a generic solution, you can use the Plugin Core API and define a beforeInit hook that modifies the chart configuration to fit your needs.
Please take a look at below runnable code and see how it could be done.
new Chart('runningValue', {
type: 'doughnut',
plugins: [{
beforeInit: chart => {
chart.data.datasets = [{
data: [chart.data.total],
backgroundColor: chart.data.totalColor,
borderWidth: 3
},
{
data: [chart.data.complete, chart.data.total - chart.data.complete],
backgroundColor: [chart.data.completeColor, '#fff'],
borderWidth: 3
}
]
}
}],
data: {
total: 50,
complete: 35,
totalColor: 'rbg(242, 133, 0)',
completeColor: 'rgb(255,36,0)'
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>
Simply define two values and two background colors on the second dataset as shown in the runnable code below.
const total = 50;
const complete = 35;
new Chart('runningValue', {
type: 'doughnut',
data: {
datasets: [{
data: [total],
backgroundColor: 'rbg(242, 133, 0)',
borderWidth: 3
},
{
data: [complete, total - complete],
backgroundColor: ['rgb(255,36,0)', '#fff'],
borderWidth: 3
}
]
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>

How to stylistically edit axes labels on AG-GRID standalone charts?

I'm working with ag-Grid to create both tables and charts. I've read through all of the documentation on editing the labels on the axes of grouped, stacked and normalised columns and bar graphs and although there's information on how to format labels on AG-Grid charts, there isn't a way (it seems) to edit them such that they don't overlap when there are multiple labels.
For example I have a line chart below:
The labels on the x-axis are clustered together because each point on the line chart is titled a lengthy word/phrase. I've tried to add padding on the label (second line)
this.options.axes = [
{ type: 'category', position: 'left' },
{ type: 'number', position: 'bottom', label: { padding: 10 } }
]
However it doesn't help the situtation. How can I make it so that either the label is removed altogether or whenever the labels on the axes are over a certain length then it narrows down to just a few letters and then show an ellipses?
For example in the image, the first label 'Business-as-usual' would be narrowed down to just 'Bu..'?
there are two ways to accomplish this. padding won't help you much in this case.
you can use label formatter function to narrow down the label to just a few letters and then show an ellipses.
you can use rotation property to rotate the label(if chart container has enough space) to desired degree so that labels don't overlap.
var options = {
container: document.getElementById('myChart'),
data: [{
os: 'this is pretty long word and will overlap with other labels Windows',
share: 88.07
},
{
os: 'macOS',
share: 9.44
},
{
os: 'Linux',
share: 1.87
},
{
os: 'Other hgyhtghygyh Linux ',
share: 1.87
},
],
series: [{
type: 'column',
xKey: 'os',
yKeys: ['share'],
}, ],
axes: [{
type: 'category',
position: 'bottom',
title: {
text: 'Desktop Operating Systems',
enabled: false,
},
label: {
formatter: function(params) {
if (params.value.length > 10) {
return params.value.substr(0, 6) + '...';
}
return params.value
},
}
},
{
type: 'number',
position: 'left',
title: {
text: 'Market Share (%)',
enabled: false,
},
label: {
formatter: function(params) {
return params.value + '%';
},
},
},
],
legend: {
enabled: false,
},
};
var options1 = {
container: document.getElementById('myChart1'),
data: [{
os: 'this is pretty long word and will overlap with other labels Windows',
share: 88.07
},
{
os: 'macOS',
share: 9.44
},
{
os: 'Linux',
share: 1.87
},
{
os: 'Other hgyhtghygyh Linux ',
share: 1.87
},
],
series: [{
type: 'column',
xKey: 'os',
yKeys: ['share'],
}, ],
axes: [{
type: 'category',
position: 'bottom',
title: {
text: 'Desktop Operating Systems',
enabled: false,
},
label: {
rotation: 90
}
},
{
type: 'number',
position: 'left',
title: {
text: 'Market Share (%)',
enabled: false,
},
label: {
formatter: function(params) {
return params.value + '%';
},
},
},
],
legend: {
enabled: false,
},
};
agCharts.AgChart.create(options);
agCharts.AgChart.create(options1);
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var __basePath = './';
</script>
<style media="only screen">
html,
body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<script src="https://unpkg.com/ag-charts-community#2.1.0/dist/ag-charts-community.min.js"></script>
</head>
<body>
<div id="myChart" style="height: 100%;"></div>
<div id="myChart1" style="height: 100%;"></div>
</body>
</html>

Chart.js ignore options

I'm trying to create a line chart with chart.js but when I try to style my chart.
Everything from options is ignored.
Here is my code:
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
scales: {
xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
yAxes: [{ gridLines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationDuration: 400 },
};
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
datasets: [
{
fill: false,
borderColor: '#6ebffe',
pointBackgroundColor: '#6ebffe',
pointBorderColor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
],
options: ChartOptions
}
});
</script>
I tried to copy the code from https://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html but it's the same. I can't add options to my chart.
Even the title is not showing. This is not a cache problem because I run it with chrome devtools open and tried with a different browser.
the options are in the wrong place,
they should be placed after the data object
data: {
},
options: ChartOptions
you had them as part of the data object...
data: {
options: ChartOptions
},
see following working snippet...
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
scales: {
xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
yAxes: [{ gridLines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationDuration: 400 },
};
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
datasets: [
{
fill: false,
borderColor: '#6ebffe',
pointBackgroundColor: '#6ebffe',
pointBorderColor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
]
},
options: ChartOptions
});
</script>

ChartJS - ignore labels

I am using ChartJS and need a chart like this: https://tppr.me/OE08p
Meaning it should ignore 4 of the labels (flexibility, external, stability, internal) and connect the dots from the other 4 labels (like the red lines show on the screenshot).
Can I ignore these 4 labels data-wise somehow, but keep them?
Other chart packages/solutions are welcome, if it is not possible in chartjs.
You can use highchart.js library, see:
docs: https://www.highcharts.com/docs/chart-and-series-types/polar-chart
example: https://www.highcharts.com/demo/polar-spider
with these options:
plotOptions: {
series: {
connectNulls: true
}
}
and filtering data with map function like below (just for example):
data.map(filter)
<omissis>
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
here is a jsfiddle showing this approach: http://jsfiddle.net/beaver71/w6ozog1c/
or a snippet here:
// original data
var data1 = [43000, 19000, 60000, 35000, 17000, 10000],
data2 = [50000, 39000, 42000, 31000, 26000, 14000];
var chart = Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: data1.map(filter), // filtered data
pointPlacement: 'on',
color: 'red'
}, {
name: 'Actual Spending',
data: data2,
pointPlacement: 'on',
color: 'green'
}],
plotOptions: {
series: {
lineWidth: 2,
connectNulls: true // connects also null value (bypassing)
}
}
});
var filterOn = true;
$('#button').click(function () {
filterOn = !filterOn;
if (filterOn)
chart.series[0].setData(data1.map(filter));
else
chart.series[0].setData(data1);
});
// filter function with your criteria
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
.highcharts-grid-line {
stroke-width: 2;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<button id="button">Toggle filter (ignoring a point in red serie)</button>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

In Kendo UI DataViz, how do I place the labels inside the pie chart

Please refer to this example:
http://jsfiddle.net/mcLEb/
jQuery("#grid").kendoChart(
{
theme: jQuery(document).data("kendoSkin") || "default",
legend:
{
position: "bottom"
},
chartArea: {
height: 200
},
seriesDefaults:
{
labels:
{
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
},
series: [{
type: "pie",
data:[70,20,10]
}],
tooltip:
{
visible: false,
template: "${ category } - ${ value }%"
},
title: { padding: 1, margin: 1 },
seriesColors: ["#d15400", "#d2d2d2","#01619e"],
plotArea: { margin: { left: 50, right: 50 } },
});
More clarification:
Right now, the labels are located outside of the pie chart with an arrow pointing to their corresponding pie section. I want the labels themselves to be inside their corresponding pie section.
I am aware that a pie section could get smaller than the actual text inside of it, but I will handle that.
Thanks in advance!
use the code below (set position as "center")
seriesDefaults:
{
labels:
{
position: "center",
visible: true,
format: "{0}%",
font: "12px Arial",
}
}
The best way I have found to do this is using position insideEnd on the labels.
seriesDefaults:
{
labels:
{
position: "insideEnd",
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
}
Another way that was less reliable was to use a negative distance property on the labels.
seriesDefaults:
{
labels:
{
distance: -10,
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
}