How to get the same design as the website example?

[hallefsantos]

I'd want the design just like the website (white tooltips, the legend, etc), is there a way to change the theme?

I'm using exactly the same code that frappe provides.

let chart = new Chart( "#frost-chart", {
      data: {
      labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

      datasets: [
        {
          name: "Some Data", chartType: 'bar',
          values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
          name: "Another Set", chartType: 'bar',
          values: [25, 50, -10, 15, 18, 32, 27, 14]
        },
        {
          name: "Yet Another", chartType: 'line',
          values: [15, 20, -3, -15, 58, 12, -17, 37]
        }
      ],

      yMarkers: [{ label: "Marker", value: 70,
        options: { labelPos: 'left' }}],
      yRegions: [{ label: "Region", start: -10, end: 50,
        options: { labelPos: 'right' }}]
      },

      title: "My Awesome Chart",
      type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
      height: 300,
      colors: ['purple', '#ffa3ef', 'light-blue'],

      tooltipOptions: {
        formatTooltipX: d => (d + '').toUpperCase(),
        formatTooltipY: d => d + ' pts',
      }
    })

Expected Behaviour

Actual Behaviour

Frappé Charts version: 1.6.2

https://codesandbox.io/s/frappe-charts-demo-viqud?from-embed=&file=/src/index.js

[uhrjun]

The website uses a V2 release RC version found at https://unpkg.com/browse/frappe-charts@2.0.0-rc23/ also upstreamed in this repo. The NPM package is a bit outdated. The newer version ships a newer stylesheet, while containing some breaking changes that don't have an easy-to-read documentation yet. So you might need to scour this repo if you face some issues.

[hallefsantos]

Thank you @uhrjun