DEV Community: JiangTao

VChart, How to monitor the change of DataZoom?

JiangTao — Fri, 26 Apr 2024 12:51:13 +0000

Title

How to monitor the change of DataZoom?

Description

It is necessary to obtain the state information of the user's interaction with the chart dataZoom for the next rendering to preserve the state of dataZoom.

Solution

Different chart libraries have different solutions. VChart provides the dataZoomChange event to obtain the new start and end points of the chart after the DataZoom change, as well as other information.
After obtaining the new start and end, users can save this information and rewrite it back to the spec when needed, thus making the dataZoom state persistent.

Code Example

import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

import VChart from "@visactor/vchart";

const App = () => {
  useEffect(() => {
    const spec = {
      type: "scatter",
      xField: "revenues_mm",
      yField: "profit_mm",
      seriesField: "category",
      dataZoom: [
        {
          orient: "bottom",
          start: 0,
          end: 0.4,
          minSpan: 0.2,
          maxSpan: 0.8,
          filterMode: "axis",
        },
      ],
      axes: [
        {
          title: {
            visible: true,
            text: "revenues_mm",
          },
          orient: "left",
          type: "linear",
        },
        {
          title: {
            visible: true,
            text: "profit_mm",
          },
          orient: "bottom",
          label: { visible: true },
          type: "linear",
        },
      ],
      legends: [{}],
      data: [
        {
          id: "data",
          values: [
            {
              company: "Johnson & Johnson",
              revenues_mm: 71890,
              profit_mm: 18540,
              profit_as_of_revenues: 0.2578940047294478,
              category: "Pharmaceuticals",
            },
            {
              company: "Procter & Gamble",
              revenues_mm: 71726,
              profit_mm: 10508,
              profit_as_of_revenues: 0.14650196581434904,
              category: "Household & Personal Products",
            },
            {
              company: "Abbvie",
              revenues_mm: 25638,
              profit_mm: 5953,
              profit_as_of_revenues: 0.23219439893907481,
              category: "Pharmaceuticals",
            },
            {
              company: "Amgen",
              revenues_mm: 22991,
              profit_mm: 7722,
              profit_as_of_revenues: 0.33587055804445215,
              category: "Pharmaceuticals",
            },
            {
              company: "Eli Lilly",
              revenues_mm: 21222,
              profit_mm: 2738,
              profit_as_of_revenues: 0.12901705777023842,
              category: "Pharmaceuticals",
            },
            {
              company: "Bristol-Myers Squibb",
              revenues_mm: 19427,
              profit_mm: 4457,
              profit_as_of_revenues: 0.22942296803417925,
              category: "Pharmaceuticals",
            },
            {
              company: "Altria Group",
              revenues_mm: 19337,
              profit_mm: 14239,
              profit_as_of_revenues: 0.7363603454517247,
              category: "Tobacco",
            },
            {
              company: "Kimberly-Clark",
              revenues_mm: 18202,
              profit_mm: 2166,
              profit_as_of_revenues: 0.11899791231732777,
              category: "Household & Personal Products",
            },
            {
              company: "General Mills",
              revenues_mm: 16563,
              profit_mm: 1697,
              profit_as_of_revenues: 0.10245728430839823,
              category: "Food",
            },
            {
              company: "Colgate-Palmolive",
              revenues_mm: 15195,
              profit_mm: 2441,
              profit_as_of_revenues: 0.16064494899638038,
              category: "Household & Personal Products",
            },
            {
              company: "Conagra Brands",
              revenues_mm: 14134,
              profit_mm: -677,
              profit_as_of_revenues: -0.04789868402433847,
              category: "Food",
            },
            {
              company: "Land O'Lakes",
              revenues_mm: 13233,
              profit_mm: 245,
              profit_as_of_revenues: 0.01851432025995617,
              category: "Food",
            },
            {
              company: "Pepsico",
              revenues_mm: 62789,
              profit_mm: 6329,
              profit_as_of_revenues: 0.1007979104620236,
              category: "Food",
            },
            {
              company: "Kellogg",
              revenues_mm: 13014,
              profit_mm: 694,
              profit_as_of_revenues: 0.053327186107269095,
              category: "Food",
            },
            {
              company: "Reynolds American",
              revenues_mm: 12503,
              profit_mm: 6073,
              profit_as_of_revenues: 0.48572342637766935,
              category: "Tobacco",
            },
            {
              company: "Biogen",
              revenues_mm: 11449,
              profit_mm: 3703,
              profit_as_of_revenues: 0.32343436107957024,
              category: "Pharmaceuticals",
            },
            {
              company: "Estee Lauder",
              revenues_mm: 11262,
              profit_mm: 1115,
              profit_as_of_revenues: 0.09900550523885633,
              category: "Household & Personal Products",
            },
            {
              company: "Celgene",
              revenues_mm: 11229,
              profit_mm: 1999,
              profit_as_of_revenues: 0.17802119511977915,
              category: "Pharmaceuticals",
            },
            {
              company: "Hormel Foods",
              revenues_mm: 9523,
              profit_mm: 890,
              profit_as_of_revenues: 0.09345794392523364,
              category: "Food",
            },
            {
              company: "Campbell Soup",
              revenues_mm: 7961,
              profit_mm: 563,
              profit_as_of_revenues: 0.07071975882426831,
              category: "Food",
            },
            {
              company: "J. M. Smucker",
              revenues_mm: 7811,
              profit_mm: 689,
              profit_as_of_revenues: 0.08820893611573422,
              category: "Food",
            },
            {
              company: "Dean Foods",
              revenues_mm: 7710,
              profit_mm: 120,
              profit_as_of_revenues: 0.01556420233463035,
              category: "Food",
            },
            {
              company: "Hershey",
              revenues_mm: 7440,
              profit_mm: 720,
              profit_as_of_revenues: 0.0967741935483871,
              category: "Food",
            },
            {
              company: "Pfizer",
              revenues_mm: 52824,
              profit_mm: 7215,
              profit_as_of_revenues: 0.13658564288959563,
              category: "Pharmaceuticals",
            },
            {
              company: "Constellation Brands",
              revenues_mm: 6548,
              profit_mm: 1055,
              profit_as_of_revenues: 0.16111789859499084,
              category: "Beverages",
            },
            {
              company: "Dr. Pepper Snapple Group",
              revenues_mm: 6440,
              profit_mm: 847,
              profit_as_of_revenues: 0.13152173913043477,
              category: "Beverages",
            },
            {
              company: "HRG Group",
              revenues_mm: 6403,
              profit_mm: -199,
              profit_as_of_revenues: -0.031079181633609246,
              category: "Household & Personal Products",
            },
            {
              company: "Treehouse Foods",
              revenues_mm: 6175,
              profit_mm: -229,
              profit_as_of_revenues: -0.03708502024291498,
              category: "Food",
            },
            {
              company: "Avon Products",
              revenues_mm: 5853,
              profit_mm: -108,
              profit_as_of_revenues: -0.018452075858534086,
              category: "Household & Personal Products",
            },
            {
              company: "Clorox",
              revenues_mm: 5761,
              profit_mm: 648,
              profit_as_of_revenues: 0.11248047214025343,
              category: "Household & Personal Products",
            },
            {
              company: "Coca-Cola",
              revenues_mm: 41863,
              profit_mm: 6527,
              profit_as_of_revenues: 0.15591333635907603,
              category: "Beverages",
            },
            {
              company: "Merck",
              revenues_mm: 39807,
              profit_mm: 3920,
              profit_as_of_revenues: 0.09847514256286583,
              category: "Pharmaceuticals",
            },
            {
              company: "Gilead Sciences",
              revenues_mm: 30390,
              profit_mm: 13501,
              profit_as_of_revenues: 0.4442579795985522,
              category: "Pharmaceuticals",
            },
            {
              company: "Philip Morris International",
              revenues_mm: 26685,
              profit_mm: 6967,
              profit_as_of_revenues: 0.2610830054337643,
              category: "Tobacco",
            },
            {
              company: "Kraft Heinz",
              revenues_mm: 26487,
              profit_mm: 3632,
              profit_as_of_revenues: 0.1371238720881942,
              category: "Food",
            },
            {
              company: "Mondelez International",
              revenues_mm: 25923,
              profit_mm: 1659,
              profit_as_of_revenues: 0.06399722254368707,
              category: "Food",
            },
          ],
        },
      ],
    };
    const vchart = new VChart(spec, { dom: "chart" });
    vchart.renderSync();

    vchart.on("dataZoomChange", (params) => {
      const { value } = params;
      console.log("changed value:", value.start, value.end);
    });

    return () => {
      vchart.release();
    };
  }, []);

  return <div id="chart"></div>;
};

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Result

Online Demo: https://codesandbox.io/p/sandbox/vchart-datazoom-event-kczn5h?file=%2Fsrc%2Findex.js%3A1%2C1-327%2C1

VChart, How to center the label of a bar chart?

JiangTao — Fri, 26 Apr 2024 12:38:52 +0000

Question

How to center the label of a bar chart?

Description

In a stacked bar chart, it is expected that each label will be centered.

Solution

Different chart libraries have different solutions. VChart provides label configuration options and supports various postion configurations.
Optional values are: 'outside'、'top'、'bottom'、'left'、'right'、'inside'、'inside-top'、'inside-bottom'、'inside-right'·'inside-left'、'top-right'、'top-left'、'bottom-right'、'bottom-left'

Code example

import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

import VChart from "@visactor/vchart";

const App = () => {
  useEffect(() => {
    const spec = {
      type: "bar",
      label: {
        visible: true,
        position: "inside",
      },
      data: [
        {
          id: "barData",
          values: [
            { type: "Autocracies", year: "1930", value: 129 },
            { type: "Autocracies", year: "1940", value: 133 },
            { type: "Autocracies", year: "1950", value: 130 },
            { type: "Autocracies", year: "1960", value: 126 },
            { type: "Autocracies", year: "1970", value: 117 },
            { type: "Autocracies", year: "1980", value: 114 },
            { type: "Autocracies", year: "1990", value: 111 },
            { type: "Autocracies", year: "2000", value: 89 },
            { type: "Autocracies", year: "2010", value: 80 },
            { type: "Autocracies", year: "2018", value: 80 },
            { type: "Democracies", year: "1930", value: 22 },
            { type: "Democracies", year: "1940", value: 13 },
            { type: "Democracies", year: "1950", value: 25 },
            { type: "Democracies", year: "1960", value: 29 },
            { type: "Democracies", year: "1970", value: 38 },
            { type: "Democracies", year: "1980", value: 41 },
            { type: "Democracies", year: "1990", value: 57 },
            { type: "Democracies", year: "2000", value: 87 },
            { type: "Democracies", year: "2010", value: 98 },
            { type: "Democracies", year: "2018", value: 99 },
          ],
        },
      ],
      xField: ["year", "type"],
      yField: "value",
      seriesField: "type",
      legends: {
        visible: true,
        orient: "top",
        position: "start",
      },
    };

    const vchart = new VChart(spec, { dom: "chart" });
    vchart.renderSync();

    return () => {
      vchart.release();
    };
  }, []);

  return <div id="chart"></div>;
};

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Results show

Online Demo: https://codesandbox.io/p/sandbox/vchart-label-center-cz7wjm?file=%2Fsrc%2Findex.js%3A1%2C1-70%2C1

VChart, How to perform event tracking based on Tooltip behavior

JiangTao — Fri, 26 Apr 2024 12:38:07 +0000

Title

How to perform event tracking based on Tooltip behavior in VChart

Description

When users view the chart, they need to know when the tooltip viewing operation was performed on the chart, and the behavior event tracking of the chart needs to be reported.

Solution

Different chart libraries have different solutions. VChart provides Tooltip-related events, involving various stages such as triggering tooltips, updating tooltips, and destroying tooltips. You can use dimensionHover, tooltipShow, and tooltipHide events to obtain the required information.

Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { type: 'Autocracies', year: '1930', value: 129 },
        { type: 'Autocracies', year: '1940', value: 133 },
        { type: 'Autocracies', year: '1950', value: 130 },
        { type: 'Autocracies', year: '1960', value: 126 },
        { type: 'Autocracies', year: '1970', value: 117 },
        { type: 'Autocracies', year: '1980', value: 114 },
        { type: 'Autocracies', year: '1990', value: 111 },
        { type: 'Autocracies', year: '2000', value: 89 },
        { type: 'Autocracies', year: '2010', value: 80 },
        { type: 'Autocracies', year: '2018', value: 80 },
        { type: 'Democracies', year: '1930', value: 22 },
        { type: 'Democracies', year: '1940', value: 13 },
        { type: 'Democracies', year: '1950', value: 25 },
        { type: 'Democracies', year: '1960', value: 29 },
        { type: 'Democracies', year: '1970', value: 38 },
        { type: 'Democracies', year: '1980', value: 41 },
        { type: 'Democracies', year: '1990', value: 57 },
        { type: 'Democracies', year: '2000', value: 87 },
        { type: 'Democracies', year: '2010', value: 98 },
        { type: 'Democracies', year: '2018', value: 99 }
      ]
    }
  ],
  xField: ['year', 'type'],
  yField: 'value',
  seriesField: 'type',
  legends: {
    visible: true,
    orient: 'top',
    position: 'start'
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

vchart.on('dimensionHover', (params)=>{
  if(params.action === 'enter'){
    console.log('Triggered when enter Dimension', )
  } else if(params.action ==='move'){
    console.log('Triggered when move Dimension', )
  } else if(params.action ==='leave'){
    console.log('Triggered when leave Dimension', )
  }
})

vchart.on('tooltipShow', (params) => {
  console.log('Triggered every rendering')
  if(params.changePositionOnly === true){
    console.log('Triggered position change only')
  } else {
    console.log('Triggered target mark change')
  }
})

vchart.on('tooltipHide', (params) => {
  console.log('Triggered every hide')
})

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Result

A simple online demo: https://codesandbox.io/p/sandbox/vchart-tooltip-event-gmcgqf?file=%2Fsrc%2Findex.js%3A49%2C1

DEV Community: JiangTao

VChart, How to monitor the change of DataZoom?

Title

Description

Solution

Code Example

Result

Related Documentation

VChart, How to center the label of a bar chart?

Question

Description

Solution

Code example

Results show

Related Documents

VChart, How to perform event tracking based on Tooltip behavior

Title

Description

Solution

Code Example

Result

Related Documentation