I have a simple bar chart that I overlayed with a line. The bars and the lines are generated from different data, so the chart is skewing the size of the bars because the line data is significantly larger than the bars data. I want to have a separate y-axis for the lines on the right side of the chart to prevent this, but I can't find any documentation for go-echarts on how to do this.
Here is an image of what the chart currently looks like. As you can see the bars are almost imperceptible.
Below is my code. The line is added towards the bottom of the code. Does anyone know how do add a y-axis on the right side for the line?
// Sort the dates so that the x-axis is ordered.
var dates []string
for date := range data {
dates = append(dates, date)
}
sort.Strings(dates)
// Build series data for the bars (profit) and line (transaction count).
var barData []opts.BarData
for _, date := range dates {
stat := data[date]
barData = append(barData, opts.BarData{Value: stat.Profit})
}
// Create the bar chart for profit.
bar := charts.NewBar()
bar.SetGlobalOptions(
charts.WithTitleOpts(opts.Title{
Title: "Daily Profit",
Subtitle: "Profit in USDT",
}),
charts.WithLegendOpts(opts.Legend{
Show: opts.Bool(false),
}),
charts.WithDataZoomOpts(opts.DataZoom{
Type: "slider",
Start: 50,
End: 100,
}),
// First y-axis (index 0) for Profit USDT; no explicit index needed.
charts.WithYAxisOpts(
opts.YAxis{
Type: "value",
},
),
)
bar.SetXAxis(dates).AddSeries("Profit USDT", barData)
// Build series data for the bars (profit) and line (transaction count).
var lineData []opts.LineData
for _, date := range dates {
stat := data[date]
lineData = append(lineData, opts.LineData{Value: stat.Count, YAxisIndex: 1})
}
// Create the bar chart for profit.
line := charts.NewLine()
line.SetXAxis(dates).
AddSeries("Transaction Count", lineData)
line.SetGlobalOptions(
// First y-axis (index 0) for Profit USDT; no explicit index needed.
charts.WithYAxisOpts(
opts.YAxis{
Type: "value",
Position: "right",
},
),
)
line.ExtendYAxis(opts.YAxis{Type: "value", Position: "right", Show: opts.Bool(true)})
bar.Overlap(line)
return bar
You just need to add 2 Y-axes and indicate options for categories. I modified the code from the official example code for that:
package main
import (
"math/rand"
"os"
"github.com/go-echarts/go-echarts/v2/charts"
"github.com/go-echarts/go-echarts/v2/opts"
)
func generateBarItems() []opts.BarData {
items := make([]opts.BarData, 0)
for i := 0; i < 7; i++ {
items = append(items, opts.BarData{Value: rand.Intn(300)})
}
return items
}
func generateBarItemsBig() []opts.BarData {
items := make([]opts.BarData, 0)
for i := 0; i < 7; i++ {
items = append(items, opts.BarData{Value: rand.Intn(300) + 1000})
}
return items
}
func main() {
// create a new bar instance
bar := charts.NewBar()
// set some global options like Title/Legend/ToolTip or anything else
bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
Title: "My first bar chart generated by go-echarts",
Subtitle: "It's extremely easy to use, right?",
}))
// Put data into instance
bar.SetXAxis([]string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}).
AddSeries("Category A", generateBarItems(), charts.WithBarChartOpts(opts.BarChart{
YAxisIndex: 0,
})).
AddSeries("Category B", generateBarItemsBig(), charts.WithBarChartOpts(opts.BarChart{
YAxisIndex: 1,
}))
bar.YAxisList = []opts.YAxis{
opts.YAxis{
Type: "value",
Name: "small",
},
opts.YAxis{
Type: "value",
Name: "big",
},
}
// Where the magic happens
f, _ := os.Create("bar.html")
bar.Render(f)
}