We Keep Coding

is it possible to duplicate the y axis labels to the right side of a google chart?

is there anyone having some experience with Google Charts, who was facing a similar problem before? I basically need to display the same y axis labels on the both sides of the graph, as shown on the image:
image of the graph
Here is my dataset:
['Date', 'Drilling', 'Stacked', 'Cold stacked', 'Construction', 'Repair']
['2020-09-16', 406, 171, 135, 67, 3]
['2020-09-17', 407, 170, 135, 67, 3]
['2020-09-18', 408, 169, 135, 67, 3]
['2020-09-19', 408, 169, 135, 67, 3]
['2020-09-20', 409, 168, 135, 67, 3]
['2020-09-21', 408, 169, 135, 67, 3]
['2020-09-22', 406, 171, 135, 67, 3]
['2020-09-23', 407, 170, 135, 67, 3]
...and so on...
And graph settings:
{
isStacked: true,
colors: ['#ff4852', '#005BFF', '#FFAB2E', '#af5ddf', '#00A580'],
vAxis: {
format: '######',
},
chartArea: {
top: '30',
height: '75%',
width: '80%',
},
series: {
0: {
textPosition: 'none',
},
},
vAxes: {
1: {
textPosition: 'none',
},
},
hAxes: {
0: {
gridlines: { color: 'transparent' },
},
},
}

Need to test it out but let's try as below. Otherwise you have to duplicate the series data and set it to 'targetAxisIndex: 1'.
series: {
0: {
targetAxisIndex: 0,
targetAxisIndex: 1,
},
},

ECharts: change line color. i have pick 2 color .Both two color show like odd and even style

i want ro remove that custom color and add that color as loop like first color red then green .odd even odd even.
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
itemStyle: { color: 'green'},
},
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: { color: 'red'},
}
]
};

Your plan is perfect, what's stopping you do it? What the problem blocks the next steps?
Update: please don't separate question to title and body, I hardly understood what you mean. Title should contain only short summary of question.
Answering your question: the easiest option for control colors is generation series with precomputed color.
Something like this:
var myChart = echarts.init(document.getElementById('main'));
var data = [
[120, 132, 101, 134, 90, 230, 210],
[340, 280, 310, 360, 280, 310, 410],
[520, 532, 490, 480, 520, 550, 570],
[760, 732, 790, 780, 820, 750, 770],
[820, 932, 901, 934, 1290, 1330, 1320],
];
var series = data.map((sData, idx) => (
{
name: 'series' + idx,
type: 'line',
data: sData,
color: idx % 2 === 0 ? 'red' : 'green',
}
))
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: series,
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.7.0/dist/echarts.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

How to group multiple series in Highcharts

I am using highcharts and looking for sultion something like
this graph
I have treid below code
var options = {
chart: {
type: 'line'
},
yAxis: [{}],
xAxis: [{
categories: ['20 Apr', '21 Apr', '22 Apr', '23 Apr', '24 Apr', '25 Apr',
'26 Apr'],
crosshair: true
}],
series: [{
name: 'sms sent',
yAxis: 0,
data: [200, 150, 170, 180, 190, 120, 254 ]
}, {
name: 'sms delivered',
yAxis: 0,
data: [210, 240, 270, 280, 240, 210, 190]
}, {
name: 'click through',
yAxis: 0,
data: [190, 210, 230, 240, 220, 254, 223]
}, {
name: 'leads',
yAxis: 0,
data: [240, 274, 250, 220, 254, 263, 270]
}, {
name: 'orders',
yAxis: 0,
data: [ 123, 174, 120, 110, 100, 154,145]
}, {
name: 'revenue generated',
yAxis: 0,
data: [200, 100, 400, 300,363, 254,245]
}]
}
var chart = Highcharts.chart('graph',options);
but it is showing only one series.
But I need as shown in image above.
So how can I do that?

Google chart set stroke-width of line chart to null

I am currently facing an issue with Google charts which looks fairly simply. All I need is to remove the stroke-width of the current chart:
And make it look like the chart below:
What I have is a stacked area chart, so the options were set as follows:
var options = {
'title': '',
isStacked: true,
legend: {
textStyle: { fontSize: '16' },
position: 'top'
},
hAxis: {
title: '',
gridlines: {
color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
}
//ticks: [0, 100, 200, 75, 100] // display labels every 25
},
vAxis: {
title: '',
gridlines: {
color: '#D3D3D3',
count: 10,
//lineDashStyle: [2,2]
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
},
viewWindow: { max: range_max, min: range_min } //TODO: make them generable
//showTextEvery: 100
},
'width': 1100, //100% //TODO: make this relative
'height': 600,
crosshair:
{
trigger: 'both'
},
series:
{
0: { pointSize: 8 },
3: { lineDashStyle: [5, 1, 3] },
4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
},
intervals: { 'style': 'line' },
colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}
But the strokeWidth property doesn't seem to be working. Any suggestions on what I am doing wrong please?

using a style column, you customize each series individually
it works the same for all the Column Roles, (annotation, style, etc...)
the role is applied to which ever series column it follows
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
problem with the above example, the legend is now out of sync with the series style
use the chart's 'ready' event to correct the legend entry,
the black line will be a path element
depending on the styles used, the logic may need to be adjusted, but works here
the elements found in the container will be in the same order as the data
see following working snippet to correct legend entry...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
if (path.getAttribute('stroke') === '#000000') {
path.setAttribute('stroke', 'transparent');
}
});
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google chart 2 stacked columns and line chart

The thing is that I want 2 stacked columns for columns 0-3 and 4-7, and then one line chart for column 8. So far I can't get a result I'm expecting. I'm getting one stacked column only.
This is what I have so far:
JSFiddle
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', ''],
['1', 165, 938, 522, 998, 165, 938, 522, 998, 614.6],
['2', 135, 1120, 599, 1268, 165, 938, 522, 998, 682],
['3', 157, 1167, 587, 807, 165, 938, 522, 998, 623],
['4', 139, 1110, 615, 968, 165, 938, 522, 998, 609.4],
['5', 136, 691, 629, 1026, 165, 938, 522, 998, 569.6]
]);
var options = {
title: 'Chart',
vAxes: [{
title: 'foo'
}, {
title: 'bar'
}],
seriesType: 'bars',
isStacked: true,
legend: 'none',
series: {
0: {
targetAxisIndex: 0
},
4: {
targetAxisIndex: 0
},
8: {
targetAxisIndex: 1,
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
EDIT: got a desired result from google forum:
https://jsfiddle.net/dlaliberte/5yv936sr/3/

need to adjust data to get two stacks
looking for something like this?
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', ''],
['1', 165, 938, 522, 998, null, null, null, null, 614.6],
['2', 135, 1120, 599, 1268, null, null, null, null, 682],
['3', 157, 1167, 587, 807, null, null, null, null, 623],
['4', 139, 1110, 615, 968, null, null, null, null, 609.4],
['5', 136, 691, 629, 1026, null, null, null, null, 569.6],
['1', null, null, null, null, 165, 938, 522, 998, null],
['2', null, null, null, null, 165, 938, 522, 998, null],
['3', null, null, null, null, 165, 938, 522, 998, null],
['4', null, null, null, null, 165, 938, 522, 998, null],
['5', null, null, null, null, 165, 938, 522, 998, null]
]);
var options = {
title: 'Chart',
vAxes: [{
title: 'foo'
}, {
title: 'bar'
}],
seriesType: 'bars',
isStacked: true,
legend: 'none',
series: {
0: {
targetAxisIndex: 0
},
4: {
targetAxisIndex: 0
},
8: {
targetAxisIndex: 1,
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>